Member Avatar for fiaolle

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
  • 126 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by fiaolle
Member Avatar for Freon22

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 because: n/a
Member Avatar for fiaolle

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

Fia

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.