0
Ok. As you can see, the layout here looks terrible.
I want the navigation and affiliates area to be on the left [They are in the "left" div.]
I want the marquee, feature and content areas in the middle [They are in the "middle" div.]
And I want the advertisement on the right [It's in the "advert" div.]
I have the divs set up the way I want, but for whatever reason, they just overlay each other, and the advert div just jumps below the other two. I've tried adjusting widths, but it didn't seem to do anything.
I'll post the code in a sec.
Ok, here it is -
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=iso-8859-1" /> <link rel="stylesheet" href="style.css" /> <title>code6.com - A Need For Speed: Most Wanted fansite</title> </head> <body> <div id="contain"> <div id="title"> Welcome to code6.com - A Need For Speed Most Wanted fansite! </div> <div id="header"></div> <div id="content"> <div id="left"> <div id="navigation"> <div id="navihead">Navigation</div> <div id="navi"> <ul id="navilist"> <li><a href="#" title="Back to the safehouse.">Safehouse (HOME)</a></li> <li><a href="#" title="Gallery">Gallery</a></li> <li><a href="#" title="Game tips and tricks">Hints and Tricks</a></li> <li><a href="#" title="Check out the blacklist">Blacklist Rivals</a></li> <li><a href="#" title="Staff">Staff</a></li> <li><a href="#" title="Custom Cars">Custom Cars</a></li> </ul> </div> <div id="navifoot"></div> </div> <div id="affiliates"> <div id="affhead">Affiliates</div> <div id="affbody"></div> <div id="afffoot"></div> </div> </div> <div id="middle"> <div id="marquee_cont"> <div id="marq_top"></div> <div id="marquee"> <marquee scrolldelay="100" onmouseover="this.stop();" onmouseout="this.start();">New screenshots added to the <a href="#" title="Gallery">gallery</a>!</marquee> </div> <div id="marq_bottom"></div> </div> <div id="featured"> <div id="featurehead">Featured Content</div> <div id="featurebody"> </div> <div id="featurefoot"></div> </div> <div id="main"> <div id="maintop">Header Here</div> <div id="mainbody"> </div> <div id="mainfoot"></div> </div> <div id="advertcont"> <div id="adverttop"></div> <div id="advertbody"></div> <div id="advertbottom"></div> </div> <div class="clr"></div> </div> </div> <div id="footer"> </div> </div> </body> </html>
CSS -
/* code6 CSS */
/* Author: James D. Headrick */
/* Website: http://chaosfyregraphix.exofire.net */
/* E-Mail: chaosfyre.graphix@gmail.com */
/* Classes */
.clr {
clear: both;
}
/* End Classes */
/* Basic Formatting */
body {
margin: 0;
padding: 0;
font-family: Verdana, Tahoma, Arial, "sans serif";
font-size: 62.5%;
}
html {
font-size: 100%;
}
a {
color: #e9e86a;
text-decoration: none;
}
a:hover {
background: #777;
}
/* End basic formatting */
/* Container Div */
#contain {
width: 830px;
margin: 0 auto 0 auto;
padding: 0 30px 0 30px;
}
/* End container div */
/* Top Area/Title Area */
#title {
background: url('images/title_bg.gif');
padding: 12px 0 10px 25px;
width: 815px;
height: 18px;
color: #777;
margin-bottom: 9px;
}
/* End Top Area/Title Area */
/* Header Image */
#header {
background: url('images/head.gif');
width: 840px;
height: 150px;
margin-bottom: 9px;
}
/* End header image */
/* Content Area */
#content {
width: 830px;
margin-bottom: 10px;
}
/* End content area */
/* Left hand content */
#left {
width: 195px;
}
/* End left hand content */
/* Navigation */
#navigation {
width: 195px;
margin-right: 5px;
float: left;
}
#navihead {
width: 175px;
height: 9px;
padding: 10px;
background: url('images/nav_head.gif');
}
#navi {
width: 185px;
background: #2a2924;
padding: 5px;
}
#navifoot {
width: 195px;
height: 10px;
background: url('images/nav_foot.gif');
margin-bottom: 10px;
}
/* End navigation */
/* Navi List */
ul#navilist {
margin: 5px 0 5px 0;
padding: 0;
}
ul#navilist li {
margin-bottom: 5px;
list-style: none;
line-height: 2.3em;
}
ul#navilist li a {
font-size: 1.0em;
color: #777;
text-decoration: none;
display: block;
}
ul#navilist li a:hover {
background: #777;
color: #e9e86a;
}
/* End Navi list */
/* Affiliates */
#affiliates {
width: 195px;
margin-right: 5px;
float: left;
}
#affhead {
width: 175px;
height: 10px;
padding: 10px;
background: url('images/aff_head.gif');
}
#affbody {
width: 185px;
padding: 5px;
background: #2a2924;
}
#afffoot {
width: 195px;
height: 10px;
background: url('images/aff_foot.gif');
}
/* End affiliates */
/* Middle Content */
#middle {
width: 455px;
margin-right: 5px;
}
/* End middle content */
/* Marquee */
#marquee_cont {
width: 455px;
margin-bottom: 10px;
}
#marq_top {
width: 455px;
height: 7px;
background: url('images/marquee_top.gif');
}
#marquee {
background: #2a2924;
width: 445px;
height: 13px;
padding: 5px;
color: #777;
}
#marq_bottom {
width: 455px;
height: 7px;
background: url('images/marquee_bottom.gif');
}
/* End marquee */
/* Featured */
#featured {
width: 455px;
height: 145px;
margin-bottom: 10px;
}
#featurehead {
width: 435px;
height: 8px;
padding: 10px;
background: url('images/feature_top.gif');
}
#featurebody {
width: 445px;
height: 100px;
padding: 5px;
background: #2a2924;
}
#featurefoot {
width: 455px;
height: 7px;
background: url('images/feature_bottom.gif');
}
/* End featured */
/* Main Content */
#main {
width: 455px;
height: 412px;
}
#maintop {
width: 435px;
height: 12px;
background: url('images/main_top.gif');
padding: 10px;
}
#mainbody {
width: 445px;
height: 360px;
padding: 5px;
background: #2a2924;
}
#mainfoot {
width: 455px;
height: 10px;
background: url('images/main_bottom.gif');
}
/* End Main Content */
/* Advert */
#advertcont {
width: 180px;
height: 620px;
}
#adverttop {
width: 180px;
height: 10px;
background: url('images/ad_top.gif');
}
#advertbody {
width: 170px;
height: 601px;
padding-left: 5px;
padding-right: 5px;
background: #2a2924;
}
#advertbottom {
width: 180px;
height: 10px;
background: url('images/ad_bottom.gif');
}
/* End advert */
/* Footer */
#footer {
width: 840px;
height: 36px;
background: url('images/footer.gif');
}
/* End footer */
PLEASE help!
[In both IE and FF.]
