Latest code: (also at the website)
CSS
/*
STRUCTURE.CSS
STYLE SHEET FOR
www.flyvifc.org
Contact: david Wilson bluedave62@yahoo.ca
*/
/*validated */
html,body {
/*background: url(../assets/sectional.jpg) no-repeat;*/
background: url(../assets/background.png) repeat-x;
width: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background: url(../assets/wrapperbackground.png) repeat-y;
width: 840px;
text-align: center;
margin: 0 auto;
/*height: 500px;*/
}
.farhar {
padding:0px;
width:190px;
height: 59px;
border-bottom: none;
margin: 0 0 0 0;
text-indent: -5000px;
display: none;
}
#masthead {
padding-top: 0px;
padding-left: 17px;
width: 800px;
height: 200px;
}
/* NAVIGATION SECTION */
#navcontainer {
background: url(../assets/menubar.png) no-repeat;
padding: 0px;
width: 840px;
height: 40px;
}
ul#navigation-1 {
margin:0;
padding: 7px 0 0 7px;
list-style:none;
width:800px;
height:21px;
/*font: 8pt;*/ /*normal*/
}
ul#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:100px;
}
ul#navigation-1 li a:link, ul#navigation-1 li a:visited {
padding:4px 4px;
display:block;
text-align:center;
text-decoration:none;
/*background:#b9121b;*/
color:#ffffff;
width:100px;
height:13px;
}
ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#91918F;
color:#ffffff;
width:100px;
height:13px;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
}
ul#navigation-1 li ul.navigation-2
{
margin:0;
padding:1px 1px 0;
list-style:none;
display:none;
background:#ffffff;
width:100px;
position:absolute;
top:21px;
left:-1px;
border:1px solid #b9121b;
border-top:none;
}
ul#navigation-1 li:hover ul.navigation-2
{
display:block;
}
ul#navigation-1 li ul.navigation-2 li
{
width:100px;
clear:left;
width:100px;
}
ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited
{
clear:left;
background:#9C0001;
padding:4px 0;
width:100px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active, ul#navigation-1 li ul.navigation-2 li a:hover
{
clear:left;
background:#91918F;
padding:4px 0;
width:100px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{
display:none;
margin:0;
padding:0;
list-style:none;
position:absolute;
left:100px;
top:-2px;
padding:1px 1px 0 1px;
border:1px solid #b9121b;
border-left:1px solid #b9121b;
background:#ffffff;
z-index:900;
}
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{
display:block;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{
background:#b9121b;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{
background:#ec454e;
}
ul#navigation-1 li ul.navigation-2 li a span
{
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#fe676f;
}
ul#navigation-1 li ul.navigation-2 li:hover a span, ul#navigation-1 li ul.navigation-2 li a:hover span
{
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#ffffff;
}
/* END NAVIGATION SECTION*/
#content {
margin: 0 auto;
padding: 0px;
width: 800px;
height: 500px;
}
#leftcontent {
position: absolute;
color:#9C0001;
background-color:#CDCDCD;
margin-left: 5px;
padding:0px;
width:550px;
height: 500px;
float:left;
}
#rightcontent {
position: absolute;
color:#9C0001;
background-color:#CDCDCD;
margin-left: 570px;
padding:0px 0 0;
width:220px;
height: 300px;
float:right;
}
#bottomcontent {
position: absolute;
color:#821122;
background-color:#E2CCB6;
margin-left: 5px;
margin-top: 305px;
padding:0px;
width:600px;
height: auto;
float:left;
}
#footer {
clear: both;
margin: 0 auto;
/*padding-left: -20px;*/
background: url(../assets/wrapperbottom.png) center no-repeat;
color: #9c0001; /*burgundy*/
width: 840px;
height: 34px;
}
HTML
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="Microsoft Flight Simulator, Online flying, Virtual flying, International Flying Club, VATSIM, TEAMSPEAK, Group Flight" />
<meta name="description" content=" The Virtual International Flying Club is a different concept of VA that offers to the flight simulation enthusiast the opportunity to enjoy Virtual Flight while making links with people from the whole world" />
<title>Virtual International Flying Club</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="css/lores.css" />
<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(css/style.css);
/* ]]> */
</style>
<!--
<link REL="SHORTCUT ICON" HREF="http://www.flydeervalley.com/favicon.ico">
-->
</head>
<body>
<div id="wrapper">
<div id="masthead">
<img src="assets/banners/rotate.php" />
<span class="farhar">VIFC Logo, The Virtual International Flying Club is a different concept of VA</span>
</div><!--close masthead-->
<div id="navcontainer">
<ul id="navigation-1">
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="About Us">About Us</a>
<ul class="navigation-2">
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="Hubs">Hubs</a></li>
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="SOP">SOP</a></li>
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="Join Us">Join Us</a></li>
</ul>
</li>
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="Pilot Services">Pilot Services</a>
<ul class="navigation-2">
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="PIREP">PIREP</a></li>
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="LOA">LOA</a></li>
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="Pilot Activity">Pilot Activity</a></li>
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="Pilot Log">Pilot Log</a></li>
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="Flight Planning">Flight Planning</a></li>
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="Pilot Roster">Pilot Roster</a></li>
</ul>
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="Downloads">Downloads</a>
<ul class="navigation-2">
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="Fleet">Fleet</a></li>
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="VAPN">VAPN</a></li>
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="Multiplayer Info">Multiplayer Info</a></li>
</ul>
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="Foruma">Forums</a></li>
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="Pilots Online">Pilots Online</a></li>
<li><a href="http://www.flyvifc.org/v2_0/index.html" title="FAQ">FAQ</a></li>
</ul>
</div><!--close navcontainer-->
<div id="content">
<div id="leftcontent">
<p>Main content box<br />and more<br />and more<br />and more</p>
</div><!--close leftcontent-->
<div id="rightcontent">
<p>Second content box<br />and more<br />and more</p>
</div><!--close rightcontent-->
</div><!--close content-->
</div><!--close wrapper-->
<div id="footer">© 2008 VIFC
</div><!--close footer-->
</body>
</html>
