Forum Moderators: not2easy
[edited by: alt131 at 7:36 pm (utc) on Jul 9, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/" type="text/css" media="screen" charset="utf-8">
<style type="text/css" media="screen">
html body {margin: 0; padding: 0; /* don't force a height but do reset */ }
body {background: #444; /* temporary */}
a {text-decoration:none;}
#wrapper {
width: 720px;
margin: 0 auto;
padding: 0;
}
#whitebox{
background: #fff;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
position: relative;
behavior: url(border-radius.htc);
width: 720px; /* for haslayout - width shouldn't be needed as it should be 100% of the wrapper, by default - think maybe it was the behaviour that needed it though it corrected itself once other positioning removed. I left in for safety as haven't tested IE6 */
}
#pink_bg{
position:absolute; /* to the viewport */
left:0;
top: 182px;
height:60px;
width:100%;
background-color:#C01768;
}
#topNav{
text-align: right;
margin-bottom: 15px;
margin-top: 15px;
padding-right: 20px;
}
#logo{
margin-left: 35px;
margin-top: 30px;
margin-bottom: 30px;
}
#logo img {display: block;}
#navigation{}
.nav { /* now a ul */
float: left;
width:100%;
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
float:left;
height:60px;
width:236px; /* 236 x 3 = 708 */
margin-left: 3px; /* 3px x 3 = 9 + 708 width = 717, leaving 3px natural "margin" at the right side */
margin-bottom:5px;
line-height: 60px;
text-align: center;
}
.nav a {
display: block;
width: 100%;
background-color:#c01768;
color: #fff;
}
.nav a:hover{
background-color:#5a5a5a;
}
/* end navigation */
#banner{
width: 715px;
margin: 0 auto;
min-height: 146px;
margin-top: .15em;
margin-bottom: 50px;
}
#mainContent{
margin: 0 75px;
width:570px; /* whole width is 720px - 150px margins = 570px - probably don't need but it will help IE */
padding-bottom: 50px;
}
/* relax the footer! the #footer padding should take care of the spacing */
#footer{
padding-top: 10px;
padding-bottom: 30px;
text-align: center; /* centers the spans and the text in the divs */
background: #dad; /* temp to show footer is now in the flow */
}
.links { /* div */ }
.links span {
display: inline-block;
padding: 1px 15px 1px 11px;
border-right: 1px solid #5a5a5a;
}
.links .last {border:none;}
#copy {/* div */}
#copy p {margin: 0;}
</style>
<body>
<div id="pink_bg"> </div>
<div id="topNav"> <a href="">Login</a> </div>
<div id="wrapper">
<div id="whitebox">
<div id="logo">
<a href="index.html"><img src="img/logo.gif" alt="#" title="#" height="64" width="353" border="0"></a>
</div>
<div id="navigation">
<ul class="nav">
<li class="first"><a href="qm.html">STAR-QM</a></li>
<li><a href="e.html">STAR-E</a></li>
<li class="last"><a href="rm.html">STAR-RM</a></li>
</ul>
</div>
<div id="banner"> <img src="img/banner_img.jpg" alt="#" title="#" height="164" width="715" border="0"> </div>
<div id="mainContent">
<h2>Heading:</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div><!-- end MainContent -->
</div><!--end of div to create white box around main content-->
<div id="footer">
<div class="links">
<span class="first"><a href="about.html">About Us</a></span>
<span class="last"><a href="contact.html">Contact</a></span>
</div>
<div id="copy"><p>© 2011 Copyright</p></div>
</div><!-- end footer -->
</div><!--end wrapper -->
</body>
</html>
