PDA

View Full Version : how to replace this table with a div



fatrat
Jan 10th, 2007, 09:25 PM
i think this table would be more semantic as a div:


<div class="standardheader">
<h1> <span class="standardheader-mid"><span class="standardheader-left"></span> <span class="standardheader-right"></span><a href="{U_VIEWONLINE}" class="cattitle">{L_WHO_IS_ONLINE}</a></span></h1>
<table class="standard">
<tr>
<td class="row1" align="center" valign="middle" rowspan="3"><img src="templates/subSilver/images/whosonline.gif" alt="{L_WHO_IS_ONLINE}" /></td>
<td class="row1" align="left" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />{TOTAL_USERS}<br />{NEWEST_USER}</span>
</td>
</tr>
<tr>
<td class="row1" align="left"><span class="gensmall">{TOTAL_USERS_ONLINE} &nbsp; [ {L_WHOSONLINE_ADMIN} ] &nbsp; [ {L_WHOSONLINE_MOD} ]<br />{RECORD_USERS}<br />{LOGGED_IN_USER_LIST}</span></td>
</tr>
<tr>
<td class="row1" align="left"><span class="gensmall">{USERS_OF_THE_DAY_LIST}</span></td>
</tr>
</table>

<table width="100%" cellpadding="1" cellspacing="0" border="0">
<tr>
<td align="left" valign="top"><span class="gensmall">{L_ONLINE_EXPLAIN}</span></td>
</tr>
</table>

The first column contains an image spanning 3 rows, the 2nd columns is 3 rows. Surely this should be a <div>?

But I dont know how to code it :(


[EDIT] I have replaced most of the tables on this page with <divs>, except this one. Can somebody plz have a look at it the divs and spans, see if they are ok, thanks.

http://digitalpatriots.org/forumindex.php?clan=americasarmy

VIPStephan
Jan 11th, 2007, 12:20 AM
Seems pretty simple:


<div class="standardheader">
<h1>Who's online</h1>
<div class="subcontainer">
<div id="subsection1">
<ul>
<li>{TOTAL_POSTS}</li>
<li>{TOTAL_USERS}</li>
<li>{NEWEST_USER}</li>
</ul>
</div>
<div id="subsection2">
<ul>
<li>{TOTAL_USERS_ONLINE} &nbsp; [ {L_WHOSONLINE_ADMIN} ] &nbsp; [ {L_WHOSONLINE_MOD} ]</li>
<li>{RECORD_USERS}</li>
<li>{LOGGED_IN_USER_LIST}</li>
</ul>
</div>
<div id="subsection3">{USERS_OF_THE_DAY_LIST}</div>
</div>
</div>

The class and ID names were just chosen for demonstration, you can change 'em if you like.

Now you apply some left padding to the subcontainer and this icon as background image. I think you can figure out the rest by yourself.
Good luck.

fatrat
Jan 11th, 2007, 12:23 AM
k, thanks for that, seems simple enough

how to replicate the borders.....

am thinking

VIPStephan
Jan 11th, 2007, 12:45 AM
Do you mean the 3D effect? Pretty simple too:


.standardheader, .standardheader div {
border-top: 1px solid [light color];
border-left: 1px solid [light color];
border-right: 1px solid [dark color];
border-bottom: 1px solid [dark color];
}

fatrat
Jan 11th, 2007, 12:52 AM
but, it puts a border around the containing div, including the 3 sub divs.

it needs to be within the containing div, so its dark right border meets the subdivs light left border.

which. i assume means that the image has to be in its an sub div??

VIPStephan
Jan 11th, 2007, 01:05 AM
Ah that's what you mean... I was looking at the "Who's Online" table and there is no right border fo the image cell.
Well, you can add another div with the image inside before the subsection1 and float it to the left. However, there is no way to make it adjust the height automatically (except maybe with JavaScript).

fatrat
Jan 11th, 2007, 01:08 AM
thats what i thought....

thats a big flaw in divs, no auto height expansion.
or maybe its just annoying.

so, do i use the original table...or make do...hmmm

thanks for all the help anyway.

[edit]
i could put a left border on the container, then put a left float in with just a top border.


aaah... i love divs...

VIPStephan
Jan 11th, 2007, 01:13 AM
Well, some time in future when all browsers support it you can make elements display like tables, table cells, etc.
For now you can use a trick: You fake the borders with an image. You would create a two pixel wide and one pixel high image with the left pixel the dark border color and the right pixel the light border color and apply it to the subsection divs and make it repeat vertically (so no actual left border on the divs). Maybe this works for you?

fatrat
Jan 11th, 2007, 01:16 AM
excellent idea, ill just edit the image im using as the background to replicate the borders.

kl, cheers ;)

[edit] damn, ill try with a floating div.

the css file is user custom, so if they change colours, my image wont fit........well, i guess if they gonna mess with the css they can make there own god damned images. ok, kl.