468,554 Members | 1,891 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,554 developers. It's quick & easy.

change layout from table to div

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;
}
Jun 27 '08 #1
1 2514
In article
<1d**********************************@z66g2000hsc. googlegroups.com>,
rockdale <ro************@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
Jun 27 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

39 posts views Thread by Zak McGregor | last post: by
47 posts views Thread by Neal | last post: by
9 posts views Thread by Peter | last post: by
4 posts views Thread by Spartanicus | last post: by
20 posts views Thread by Tammy | last post: by
11 posts views Thread by SarahMarsden | last post: by
reply views Thread by NPC403 | last post: by
1 post views Thread by UniDue | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.