A relative div in repeater

[fiaolle]

Hi
I am worthless in CSS. My boss doesn't want me to use </br>:(
I have a repeater 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

[diafol]

Yuk! You want to use a separate CSS file not all those horrible style attributes. Keep the logic (html) and presentation (styling) separate.

This looks like data to me - sorry I don't 'do' ASP. If so, data should be stored in a html table. You've probably heard loads of stuff about not using tables in html anymore as EVERYTHING has to be in pure CSS. That's rubbish. Data should always be placed in a table. To me, this is the only acceptable semantic format. Imagine an user using a mobile or a PC with custom CSS styles / no styles / screen reader. Your multiple span might look very odd. Tables keep data format integrity very well.

Your code looks like you're suffering from spanitis.

As for not using </br> - I should hope not - it doesn't exist!

Below is the xhtml I would use:

<table id="mytable">
	<thead>	
		<tr>
			<th>Företagsnamn</th>
			<th>Kontakt</th>
			<th>Organisationsnummer</th>
			<th>Telefonnummer</th> 
			<th>Mobilnummer</th>
			<th>Faxnummer</th>
			<th>Län</th>
			<th>Stad</th>	
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><%#Container.DataItem("fldForName")%></td>
			<td><%#Container.DataItem("fldContact")%></td>
			<td><%#Container.DataItem("fldOrgNr")%></td>
			<td><%#Container.DataItem("fldTeleNr")%></td>
			<td><%#Container.DataItem("fldMobilNr")%></td>
			<td><%#Container.DataItem("fldFaxNr")%></td>
			<td><%#Container.DataItem("fldLan")%></td>
			<td><%#Container.DataItem("fldStad")%></td>
		</tr>
	</tbody>
</table>

I don't know how you'd use an ASP repeater with this, but anyway.

CSS can be used to target specific table cells within the xhtml without any spans, divs, classes or ids, leaving a lovely clean logic.

/* this is SPECIFIC to the table where the id = 'mytable' - it makes all cells border-free */

table#mytable{
   width: 900px;
}

table#mytable, table#mytable th, table.data td{
  border:none;
}
/* change font colour to white and background to blue in table headings only. Changes font to a bigger size and to a specific font. Note if user has 'Calibri' on the device - show this, otherwise headings will show in Arial, and so on. */
table#mytable th{
  color: white;
  background-color: blue;
  font-size: 20px;
  font-family: Calibri, Arial, Verdana, sans-serif;
}
/* reverse the colour scheme for the data cells in the table */
table#mytable td{
  color: blue;
  background-color: white;
}
/* this gives the third cell onwards in all rows red font and yellow background*/ 
table#mytable tbody tr td + td + td{
  color: red;
  background-color: yellow;
}

Styling tables is so much fun (oops - sound like a geek). I find absolute positioning an absolute pain and avoid it if possible. Loads of divs and spans make maintenance VERY difficult.

You can look at advanced selectors like: tr td:nth-child(3), children, siblings etc. Really flexible.

[diafol]

Oh no! Made a mistake. On line 7 of the css above - change to this:

table#mytable, table#mytable th, table#mytable td{
  border:none;
}