0

Hi
I am worthless in CSS. My boss doesn't want me to use <br> or table.
I have a datalist and a div which is relative, like he said I should have. Then I placed spans which are absolute and with top and left.
It works fine when there is just one row in the table, but when I have more rows, the rows are placed over eachother.

The code

<asp:DataList ID="rptItems" runat="server" Width ="100%" RepeatDirection="Vertical"> 
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div style="font-size: x-small; color: Gray; position: relative; width: 100%">			
<div style="color:#ce7300">
<span style="position:absolute;top:20px;left:0px">Företagsnamn  </span>
<span style="position: absolute; top: 20px; left: 110px">|</span>
<span style="position: absolute; top:20px;left:120px">Kontakt
</span>
<span style="position: absolute; top: 20px; left: 210px">|</span> <span style="position: absolute; top: 20px; left:220px">Organisationsnummer
</span>
<span style="position: absolute; top: 20px; left: 340px">|</span>
<span style="position: absolute; top: 20px; left:350px">Telefonnummer
</span> 
<span style="position: absolute; top: 20px; left: 450px">|</span> <span style="position: absolute; top: 20px; left:460px">Mobilnummer
</span>
<span style="position: absolute; top: 20px; left: 550px">|</span>
<span style="position: absolute; top: 20px; left:560px">Faxnummer
</span>
<span style="position: absolute; top: 20px; left: 650px">|</span>
<span style="position: absolute; top: 20px; left:660px">Län
</span>
 <span style="position: absolute; top: 20px; left: 750px">|</span>
<span style="position: absolute; top: 20px; left:760px">Stad	</span>	
 </div>	
<span style="position:absolute;top:30px;left:0px"><%#Container.DataItem("fldForName")%>  
</span>
<span style="position: absolute; top: 30px; left: 120px"><%#Container.DataItem("fldContact")%>
</span>
<span style="position: absolute; top: 30px; left: 220px"><%#Container.DataItem("fldOrgNr")%>
</span>
<span style="position: absolute; top: 30px; left: 350px"><%#Container.DataItem("fldTeleNr")%>
</span> 
<span style="position: absolute; top: 30px; left: 460px"><%#Container.DataItem("fldMobilNr")%>
</span>
<span style="position: absolute; top: 30px; left: 560px"><%#Container.DataItem("fldFaxNr")%>
</span><span style="position: absolute; top: 30px; left: 660px"><%#Container.DataItem("fldLan")%>
</span>
<span style="position: absolute; top: 30px; left: 760px"><%#Container.DataItem("fldStad")%> 
</span>
</div>	
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
 </asp:DataList>

Please help me, as I said I'm worthless in CSS and need throroughly explanation

Thanks
Fia

2
Contributors
2
Replies
3
Views
7 Years
Discussion Span
Last Post by fiaolle
0

Wow no breaks and no tables. LOL But yes when you use absolute thats what you get. I am not that good with css either but I think you need to use "position: relative;" and start a new row with a div tag. This way you are telling it to set the position relative to the parent div tag.
So if you have something like this all of your span tags will sit ontop of each other.

<div style="color:#ce7300">
        <span style="position: absolute;top:20px;left:0px">Företagsnamn  </span>
        <span style="position: absolute; top: 20px; left: 110px">|</span>
        <span style="position: absolute; top:20px;left:120px">Kontakt</span>
        <span style="position: absolute; top: 20px; left: 210px">|</span> 
        <span style="position: absolute; top: 20px; left:220px">Organisationsnummer</span>
        <span style="position: absolute; top: 20px; left: 340px">|</span>
        <span style="position: absolute; top: 20px; left:350px">Telefonnummer</span> 
        <span style="position: absolute; top: 20px; left: 450px">|</span> 
        <span style="position: absolute; top: 20px; left:460px">Mobilnummer</span>
        <span style="position: absolute; top: 20px; left: 550px">|</span>
        <span style="position: absolute; top: 20px; left:560px">Faxnummer</span>
        <span style="position: absolute; top: 20px; left: 650px">|</span>
        <span style="position: absolute; top: 20px; left:660px">Län</span> 
        <span style="position: absolute; top: 20px; left: 750px">|</span>
        <span style="position: absolute; top: 20px; left:760px">Stad </span>    
    </div>
    
    <div style="color:#ce7300">
        <span style="position:absolute;top:20px;left:0px">Företagsnamn  </span>
        <span style="position: absolute; top: 20px; left: 110px">|</span>
        <span style="position: absolute; top:20px;left:120px">Kontakt</span>
        <span style="position: absolute; top: 20px; left: 210px">|</span> 
        <span style="position: absolute; top: 20px; left:220px">Organisationsnummer</span>
        <span style="position: absolute; top: 20px; left: 340px">|</span>
        <span style="position: absolute; top: 20px; left:350px">Telefonnummer</span> 
        <span style="position: absolute; top: 20px; left: 450px">|</span> 
        <span style="position: absolute; top: 20px; left:460px">Mobilnummer</span>
        <span style="position: absolute; top: 20px; left: 550px">|</span>
        <span style="position: absolute; top: 20px; left:560px">Faxnummer</span>
        <span style="position: absolute; top: 20px; left: 650px">|</span>
        <span style="position: absolute; top: 20px; left:660px">Län</span> 
        <span style="position: absolute; top: 20px; left: 750px">|</span>
        <span style="position: absolute; top: 20px; left:760px">Stad </span>    
    </div>

But if you do something like this now you will see that you have a new row. Because now you are telling the span tags to sit relative to the parent which is the div tag that they are in.

<div style="color:#ce7300">
        <span style="position: relative;top:20px;left:0px">Företagsnamn  </span>
        <span style="position: relative; top: 20px; left: 110px">|</span>
        <span style="position: relative; top:20px;left:120px">Kontakt</span>
        <span style="position: relative; top: 20px; left: 210px">|</span> 
        <span style="position: relative; top: 20px; left:220px">Organisationsnummer</span>
        <span style="position: relative; top: 20px; left: 340px">|</span>
        <span style="position: relative; top: 20px; left:350px">Telefonnummer</span> 
        <span style="position: relative; top: 20px; left: 450px">|</span> 
        <span style="position: relative; top: 20px; left:460px">Mobilnummer</span>
        <span style="position: relative; top: 20px; left: 550px">|</span>
        <span style="position: relative; top: 20px; left:560px">Faxnummer</span>
        <span style="position: relative; top: 20px; left: 650px">|</span>
        <span style="position: relative; top: 20px; left:660px">Län</span> 
        <span style="position: relative; top: 20px; left: 750px">|</span>
        <span style="position: relative; top: 20px; left:760px">Stad </span>    
    </div>
    
    <div style="color:#ce7300">
        <span style="position:relative;top:20px;left:0px">Företagsnamn  </span>
        <span style="position: relative; top: 20px; left: 110px">|</span>
        <span style="position: relative; top:20px;left:120px">Kontakt</span>
        <span style="position: relative; top: 20px; left: 210px">|</span> 
        <span style="position: relative; top: 20px; left:220px">Organisationsnummer</span>
        <span style="position: relative; top: 20px; left: 340px">|</span>
        <span style="position: relative; top: 20px; left:350px">Telefonnummer</span> 
        <span style="position: relative; top: 20px; left: 450px">|</span> 
        <span style="position: relative; top: 20px; left:460px">Mobilnummer</span>
        <span style="position: relative; top: 20px; left: 550px">|</span>
        <span style="position: relative; top: 20px; left:560px">Faxnummer</span>
        <span style="position: relative; top: 20px; left: 650px">|</span>
        <span style="position: relative; top: 20px; left:660px">Län</span> 
        <span style="position: relative; top: 20px; left: 750px">|</span>
        <span style="position: relative; top: 20px; left:760px">Stad </span>    
    </div>

Hope this help!

Edited by Freon22: n/a

0

Thank's
But that didn't help. The rows still appears over eachother.

Fia

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.