hello! well i’m trying to make the move to total CSS layouts. i’ve gotten a lot of input from people which has been VERY helpfull, and based on that input, i’ve created a rough layout that works (for the most part) in IE6 and netscape7. Even before i validated it, the code seemed bloated and repetitive… but i dont know enough to know WHAT i can delete!! and when i ran it through a validator… **YIKES!! **
can anybody take a look at it, and give me any suggestions? i dont know where to go from here. the code is just a rough layout of colored divs, that i will fill with content later (hopefully after its THINNER and validates!)
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title>CSSP
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
< style type="text/css">
< !-- document styles -->
html,body
{
margin-left:20px;
margin-right:20px;
margin-top:34px;
margin-bottom:0px;
padding:0;
background:#000000;
background-color:#000000;
text-align:center;/* centre for ie5 and 5.5. */
min-width:800px/* for mozilla to stop sliding off the left side */
}
/ *containter and outter divs oh yeah, and strange netscape comment bug here */
#container {
width:781px;/*set the size*/
height:553px;/*my addition*/
margin-left:auto;/* centre for compliant browsers */
margin-right:auto;/* centre for compliant browsers */
background:#FFFFFF;
text-align:left;/*reset text*/
padding: 0px;
}
#section1,
#section2,
#data,
#section4
{
border: 0px;
margin: 0px;
min-height: 553px;
height: 553px;
float:left;
display:inline;/* ie double margin fix*/
}
* html #section1, * html #section2{height:553px}
* html #section2{height:553px}
* html #data{height:553px}
* html #section4{height:553px}/* for ie*/
#section1 { background-color: #E14E62; width: 175px; }
#section2 { background-color: #8E8C20; width: 178px; }
#data { background-color: #D0ECEF; width: 391px; }
#section4 { background-color: #E9AAF4; width: 37px; }
#top,
#nav,
#logo,
#content,
#nonprof,
#nav2,
#bottom
{
border: 0px;
margin: 0px;
min-widtht: 391px;
width: 391px;
float:left;
display:inline;/* ie double margin fix*/
}
* html #top, * html #nav{height:79px}
* html #nav{height:79px}
* html #logo{height:79px}
* html #content{height:79px}
* html #nonprof{height:79px}
* html #nav2{height:79px}
* html #bottom{height:79px}
#top { background-color: #FDEB55; height:79px; }
#nav { background-color: #55EBFD; height:79px; }
#logo { background-color: #F4CAAA; height:79px; }
#content { background-color: #8C289E; height:79px; }
#nonprof { background-color: #8FB42C; height:79px; }
#nav2 { background-color: #515449; height:79px; }
#bottom { background-color: #537103; height:79px; }
< /style>
< /head>
< body>
< div id="container">
< div id="section1">content< /div>
< div id="section2">content< /div>
< div id="data">
< div id="top">top< /div>
< div id="nav">nav< /div>
< div id="logo">logo< /div>
< div id="content">content< /div>
< div id="nonprof">non prof< /div>
< div id="nav2">nav2< /div>
< div id="bottom">bottom< /div>
< /div>
< div id="section4">< /div>
< /div>
< /body>
< /html>
the problems i’ve been able to notice, are that in NS7, the background color (for the body tag) isint showing (but i’m going to use an image eventually, so no biggie) and the margins dont seem to be working properly in NS7 on my 800*600 monitor. and also in NS7, for some reason, the type of comment tags i’m using, seem to be affecting the margins…??? cant figure that one out… FYI, these are problems i can live with though… but i would really like to know how to thin out the code (seems repetitive to me) and get on the road to validation.
thanks for ANY input!!
***[color=red]***ooh… and never mind the extra spaces in some of the tags… i just couldnt get it to show up here in the post properly…***[/color] ***
