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_right"></td>
</td>
</tr>
<tr>
<td class="center_left"></td>
<td align="left" bgcolor="#ffffff" valign="top">
CONTENT GOES HERE
</td>
<td class="center_right"></td>
</tr>
<tr>
<td class="bottom_left"></td>
<td class="bottom_mid"></td>
<td class="bottom_right"></td>
</tr>
</tbody>
</table>
and my css
td.top_left
{
background-image: url("images/top_lef_16_32.gif");
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.gif");
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.gif");
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="tabTopLeftCorner"></div><div class="tabTopBorder"></
div><div class="tabTopRightCorner"></div>
<div class="clear"></div>
<div class="tabLeftBorder"></div>
<div>
CONTENT GOES HERE
</div>
<div class="tabrightborder"></div>
<div class="clear"></div>
<div class="tabBottomLeftCorner"></div>
<div class="tabBottomBorder"></div><div class="tabBottomRightCorner"></
div>
<div class="clear"></div>
</div>
</div>
css for my div
.tabTopBorder
{
background-image: url("images/top_mid_16_16.png");
background-repeat: repeat-x;
border: solid 1px red;
height:16px;
width: 858px;
}
.tabBottomBorder
{
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;
}
.tabTopLeftCorner
{
background-image: url("images/top_lef.gif");
background-repeat: no-repeat;
width:16px;
height:32px;
float:left;
}
.tabTopRightCorner
{
background-image: url("images/top_rig.gif");
background-repeat: no-repeat;
width:24px;
height:32px;
float:right;
}
.tabBottomLeftCorner
{
background-image: url("images/bot_lef.gif");
background-repeat: no-repeat;
width:16px;
height:32px;
float:left;
}
.tabBottomRightCorner
{
background-image: url("images/bot_rig.gif");
background-repeat: no-repeat;
width:24px;
height:32px;
float:right;
}
