New to CSS. getting rid of a table in a loop.

[burgeamon]

Hi guys, im totally new to CSS and have been experementing the past few days.

What I have is a table with a loop wrapped around a table row, this will be database driven eventually but for the time being I just want to get it working.

Is there a way I can produce the same results without a table, and if there are im not totally sure what the benefits are.

Please find the code below.


<div class="newsContent">
<table width="493" border="0" cellspacing="0" cellpadding="8">
<%
dim newsitem
newsitem=1
do until newsitem=6
%>
<tr>
<td width="67" align="left" valign="top"><img src="images/news_thumbnails/card1.jpg" alt="card thumbnail" width="67" height="67" /></td>
<td width="394" align="left" valign="top"><strong>July 31st 2007 - Game tonight in Crediton</strong><br />
There will be prizes for players scoring the most points at the game in the Corner House in Crediton tonight.Good luck!
</td>
</tr>
<%
newsitem = newsitem + 1
loop
%>
</table>
</div>

The CSS.

.centerBox{
margin:0 0 10px 0;
padding:0;
}
.centerBox .newsContent {
background-color:#FFFFFF;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #a70707;
border-left-color: #a70707;
}
Cheers,

Andy

[boogyman]

Hi guys, im totally new to CSS and have been experementing the past few days.

well its good to know that you are interested in learning

Is there a way I can produce the same results without a table, and if there are im not totally sure what the benefits are.

anything that you can produce in a table can be produced without one, and you can do things with css that are hard to do without a lot of nested tables.

<div class="newsContent">
<table width="493" border="0" cellspacing="0" cellpadding="8">
<&#37;
dim newsitem
newsitem=1
do until newsitem=6
%>
<tr>
<td width="67" align="left" valign="top"><img src="images/news_thumbnails/card1.jpg" alt="card thumbnail" width="67" height="67" /></td>
<td width="394" align="left" valign="top"><strong>July 31st 2007 - Game tonight in Crediton</strong><br />
There will be prizes for players scoring the most points at the game in the Corner House in Crediton tonight.Good luck!
</td>
</tr>
<%
newsitem = newsitem + 1
loop
%>
</table>
</div>

becomes

<div class="newsContent">
	  <%
dim newsitem
newsitem=1
do until newsitem=6
%>
<p class="left">
<img src="images/news_thumbnails/card1.jpg" alt="card thumbnail" width="67" height="67" />
</p>

<p class="right">
<strong>July 31st 2007 - Game tonight in Crediton</strong>
<br />
There will be prizes for players scoring the most points at the game in the Corner House in Crediton tonight.Good luck!
</p>
</div>

.centerBox{
margin:0 0 10px 0;
padding:0;
}
.centerBox .newsContent {
background-color:#FFFFFF;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #a70707;
border-left-color: #a70707;
}

becomes

.centerBox{
	margin:0 0 10px 0;
	padding:0;
}
.centerBox .newsContent {
	background-color:#FFFFFF;
 	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-right-color: #a70707;
	border-left-color: #a70707;
        width: 493px;
}
p.left {
    float: left;
    width: __%;
}
p.right {
    float: right;
    width: ___%;
}

[burgeamon]

Thats awesome, thanks very much.

One more question if you would be so kind, how would it differ if you had a 3 columns instead of 2, as I can see how apply float:left and float:right to the left and right columns works, but what would you do to the middle columns to keep them in place?

Thanks

Andy

[Spiritvn]

Center column just need float:left. You can use float:right for test and will know what happen ^^

[boogyman]

Thats awesome, thanks very much.

One more question if you would be so kind, how would it differ if you had a 3 columns instead of 2, as I can see how apply float:left and float:right to the left and right columns works, but what would you do to the middle columns to keep them in place?

Thanks

Andy

you would float the 2 side menus, then you would put a margin on either side of the "center" content

see http://css.maxdesign.com.au/floatutorial/ tutorial 9