Here goes some work on the wireframe layout.
I didn't know if the Subnavigation was a positioning
error so I placed it above the content. To change it
just change the subnavigation and content to:
#subnavigation {
position:absolute;
width: 850px;
height:300px;
margin-top:680px;
background-color:#FFFFFF;
}
#content {
position:absolute;
width: 850px;
height:680px;
background-color:#808080;
}
|
PHP Code:
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>InspirationKing - Web Design Inspiration and CSS Design Showcase</title>
<meta name="author" content="InspirationKing - Web Design Inspiration and CSS Design Showcase"/>
<meta name="title" content="InspirationKing - Web Design Inspiration and CSS Design Showcase"/>
<meta name="description" content="InspirationKing - Web Design Inspiration and CSS Design Showcase"/>
<meta name="keywords" content="InspirationKing - Web Design Inspiration and CSS Design Showcase"/>
<meta name="identifier" content="http://www.inspirationking.com"/>
<meta name="robots" content="index, follow"/>
<meta name="generator" content="NOTEPAD2"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style type="text/css"/>
<!--
body {
margin:0;
padding:0;
background-color:#444444;
}
#container {
width: 850px;
height:1200px;
margin:0px auto;
}
#container2 {
position:absolute;
width: 850px;
height:1200px;
background-color:#FFFFFF;
}
#header {
position:absolute;
width: 850px;
height:100px;
background-color:#CCCCCC;
}
#navigation {
position:absolute;
width: 850px;
height:50px;
margin-top:100px;
background-color:#666666;
}
#body {
position:absolute;
width: 850px;
height:980px;
margin-top:150px;
background-color:#E1E1E1;
}
#subnavigation {
position:absolute;
width: 850px;
height:300px;
background-color:#FFFFFF;
}
#subnavigation2 {
position:absolute;
width: 280px;
height:300px;
margin:0;
padding:0;
background-color:#FFFFFF;
}
#subnavigation3 {
position:absolute;
width: 283px;
height:300px;
margin-left:285px;
padding:0;
background-color:#959595;
}
#subnavigation4 {
position:absolute;
width: 283px;
height:300px;
margin-left:567px;
padding:0;
background-color:#262626;
}
#content {
position:absolute;
width: 850px;
height:680px;
margin-top:300px;
background-color:#808080;
}
#footer {
position:absolute;
width:850px;
height:90px;
margin-top:1110px;
background-color:#000000;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="container2">
<!-- Header -->
<div id="header"></div>
<!-- Header -->
<!-- Navigation -->
<div id="navigation"></div>
<!-- Navigation -->
<!-- Body -->
<div id="body">
<!-- Subnavigation -->
<div id="subnavigation">
<div id="subnavigation2"></div>
<div id="subnavigation3"></div>
<div id="subnavigation4"></div>
</div>
<!-- Subnavigation -->
<!-- Content -->
<div id="content"></div>
<!-- Content -->
</div>
<!-- Body -->
<!-- Footer -->
<div id="footer"></div>
<!-- Footer -->
</div>
</div>
</body>
</html>
On the style.css from my experience its easier to just keep the
sections in order without seperating all the css content.
.