change layout from table to div

[rockdale]

Hi, all

I am change my webpage to using div and css for my layout, it was
using table before and I want to get rid of it.
Basically it draws a box around my content using background pictures,
but I can not get the left-border and right-border of the box working
using div. Anybody can help me?


Thanks in advance
-rockdale


here is my layout using table:

<table cellspacing="0" cellpadding="0" width="100%" align="center"
border="0" style="height: 100%">
<tbody>
<tr>
<td class="top_left "></td>
<td class="top_mid" ></td>
<td class="top_righ t"></td>
</td>
</tr>
<tr>
<td class="center_l eft"></td>
<td align="left" bgcolor="#fffff f" valign="top">
CONTENT GOES HERE
</td>
<td class="center_r ight"></td>
</tr>
<tr>
<td class="bottom_l eft"></td>
<td class="bottom_m id"></td>
<td class="bottom_r ight"></td>
</tr>
</tbody>
</table>


and my css

td.top_left
{
background-image: url("images/top_lef_16_32.g if");
background-repeat:no-repeat;
vertical-align: bottom;
height:32px;
width: 16px;
margin-bottom:0px;


}
td.top_right
{
background-image: url("images/top_rig_24_32.g if");
background-repeat:no-repeat;
vertical-align: bottom;
height:32px;
width: 24px;
margin-bottom:0px;


}

td.top_mid
{
background-image: url("images/top_mid_16_32.g if");
background-repeat: repeat-x;
vertical-align: bottom;
margin-bottom:0px;
height:32px;

}

td.center_left
{
background-image: url("images/cen_lef.gif");
width: 16px;
}
td.center_right
{
background-image: url("images/cen_rig.gif");
width: 24px;
}

td.bottom_left
{
background-image: url("images/bot_lef.gif");
background-repeat:no-repeat;
height: 16px;
width: 16px;
}

td.bottom_mid
{
background-image: url("images/bot_mid.gif");
height:16px;
background-repeat: repeat-x;
}

td.bottom_right
{
background-image: url("images/bot_rig.gif");
background-repeat:no-repeat;
height: 16px;
width: 24px;
}


-------------------
my div
<div>
<div class="tabTopLe ftCorner"></div><div class="tabTopBo rder"></
div><div class="tabTopRi ghtCorner"></div>
<div class="clear"></div>
<div class="tabLeftB order"></div>
<div>
CONTENT GOES HERE

</div>
<div class="tabright border"></div>
<div class="clear"></div>
<div class="tabBotto mLeftCorner"></div>
<div class="tabBotto mBorder"></div><div class="tabBotto mRightCorner"></
div>
<div class="clear"></div>
</div>
</div>


css for my div

.tabTopBorder
{
background-image: url("images/top_mid_16_16.p ng");
background-repeat: repeat-x;
border: solid 1px red;
height:16px;
width: 858px;

}


.tabBottomBorde r
{
background-image: url("images/bot_mid.gif");
background-repeat: repeat-x;
border: solid 1px red;
height: 16px;
width: 858px;
}
.tabLeftBorder
{
background-image: url("images/cen_lef.gif");
background-repeat: repeat-y;
width:16px;
float:left;
border: solid 1px red;
height: 100%;

}

.tabRightBorder
{
background-image: url("images/cen_rig.gif");
background-repeat: repeat-y;
width:24px;
float:right;
border: solid 1px red;

}

.tabTopLeftCorn er
{
background-image: url("images/top_lef.gif");
background-repeat: no-repeat;
width:16px;
height:32px;
float:left;
}

.tabTopRightCor ner
{
background-image: url("images/top_rig.gif");
background-repeat: no-repeat;
width:24px;
height:32px;
float:right;
}

.tabBottomLeftC orner
{
background-image: url("images/bot_lef.gif");
background-repeat: no-repeat;
width:16px;
height:32px;
float:left;
}

.tabBottomRight Corner
{
background-image: url("images/bot_rig.gif");
background-repeat: no-repeat;
width:24px;
height:32px;
float:right;
}

[dorayme]

Re: change layout from table to div

In article
<1db8420d-b55a-4d93-8d6e-fe03dbdd23bb@z6 6g2000hsc.googl egroups.com>,
rockdale <rockdale.green @gmail.comwrote :

Hi, all
>
I am change my webpage to using div and css for my layout, it was
using table before and I want to get rid of it.
Basically it draws a box around my content using background pictures,
but I can not get the left-border and right-border of the box working
using div. Anybody can help me?

It would be nice if you had posted a url showing your before and after.
It's not so hard to do...

--
dorayme