Forum Moderators: not2easy
<table>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<td colspan="2"></td>
</tr>
</table>
This is my first attempt at starting to move away from tables... Is there a better / more efficient way of doing this? (Also another small bug is that the code below will NOT work in dreamweaver.... what i need to achieve if it is possible is a way in which i can use css and move away from tables.. But also have the page be at least viewable through dreamweaver. You may ask WHY? Well, i want people to be able to add content to these pages easily. and going through code isnt easy for some)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.header_text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
line-height: 12pt;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
a.header_text:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
line-height: 12pt;
font-weight: bold;
color: #FF6600;
text-decoration: none;
}
.DarkColor
{
color:#999900;
}
body {
margin:0px 0px; padding:0px;
text-align:center;
}
#Container {
width:750px;
margin:0px auto;
margin-bottom:10px;
padding:0px;
border-top:1px solid #999900;
border-left:1px solid #999900;
border-right:1px solid #999900;
background-color:#FFFFFF;
padding-bottom:1px;
}
#NavSection
{
height:72px;
margin:0px;
padding:0px;
}
#TopBar{
background-color:#FF6600;
height:10px;
padding:0px;
margin:0px;
}
#BottomBar{
background-color:#0033CC;
height:10px;
padding:0px;
margin:0px;
border-bottom:1px solid #999900;
}
#LeftNav{
float:left;
width:499px;
padding:0px;
margin:0px;
background-color:#FFFFFF;
border-right:1px solid #999900;
border-top:1px solid #999900;
height:100%
}
#RightNav{
float:left;
width:250px;
padding:0px;
margin:0px;
background-color:#CCCC00;
border-top:1px solid #999900;
}
html>body #LeftNav {
width: 499px;
/* ie5win fudge ends */
}
html>body #RightNav {
width: 250px;
/* ie5win fudge ends */
}
#ContentSection
{
height:360px;
margin:0px;
padding:0px;
}
#LeftContent{
float:left;
width:499px;
padding:0px;
margin:0px;
background-color:#FFFFFF;
border-right:1px solid #999900;
border-top:1px solid #999900;
height:100%;
}
#RightContent{
float:left;
width:250px;
padding:0px;
margin:0px;
background-color:#FFFFFF;
border-top:1px solid #999900;
height:100%;
}
html>body #LeftContent {
width: 499px;
/* ie5win fudge ends */
}
html>body #RightContent {
width: 250px;
/* ie5win fudge ends */
}
-->
</style>
</head>
<div id="Container">
<div id="TopBar"></div>
<div id="NavSection">
<div id="LeftNav" align="right">Branding Image</div>
<div id="RightNav">
<div style="padding-top:47px;_padding-top:48px; padding-bottom:4px; margin-bottom:1px;">Nav Items</div>
</div>
</div>
<div id="ContentSection">
<div id="LeftContent">left Content</div>
<div id="RightContent">Right Content</div>
</div>
<div id="BottomBar"></div>
</div>
<body>
</body>
</html>
Pretty cool.
I don't think that Macintosh differs too badly. But when it does, it's usually just off by a few pixels so you may want to include some space between your sections of the page.
I found out why it didnt work in dreamweaver anywayz...
simple mistake... actually stupid mistake that i overerlooked.
the start body tag was AFTER all the divs
