New Topic/Question
Reply
Css:
@charset "utf-8";
html, body {
background-color: #024cb5;
margin: 0px;
padding: 0px;
}
/*------------------BANNER------------------*/
#banner {
overflow: hidden;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 255px;
background-color: #024cb5;
}
/*----------------NAVIGATION----------------*/
#navigation {
margin: 0 auto;
width: 100%;
height: 37px;
}
#nav-center {
width: 1100px;
height: 37px;
background: url(images/navbar_bg.jpg) repeat-x 0 0;
}
ul.navmenu {
float: left;
position: relative;
margin: 0 0 0 -32px;
list-style: none;
}
ul.navmenu li {
float: left;
}
ul.navmenu li a {
float: left;
display: block;
text-decoration: none;
padding: 10px 18px 7px 16px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #d0ddf7;
font-weight: bold;
}
ul.navmenu li a:hover {
alignment-adjust: middle;
float: inherit;
background: url(images/homebg.jpg) no-repeat 0 0;
}
/*------------------contentcontainer------------------*/
#main-content {
float: center;
width: 1100px;
height: 100%;
}
/*------------------left-bar------------------*/
#left-bar {
margin: 0 auto;
float: left;
height: 100%;
width: 301px;
}
#menu {
height: 100%;
width: 301px;
background: url(images/navbg.jpg) repeat-y 0 0;
}
/*------------------CONTENT------------------*/
#content {
margin: 0 auto;
float: right;
width: 799px;
height: 100%;
background: url(images/bg.jpg) repeat;
}
#content-uploads {
width: 799px;
height: 120px;
}
#content-body {
width: 799px;
height: 100%;
}
/*------------------FOOTER------------------*/
#footer {
vertical-align: bottom;
margin: 0 auto;
width: 100%;
height: 36px;
}
#footer-center {
width: 1100px;
height: 36px;
background: url(images/footerbg.jpg) repeat-x 0 0;
}
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" />
<title>Catchalottafish.com</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner" align="center">
<img src="images/header.jpg">
</div>
<div id="navigation" align="center">
<div id="nav-center" align="center">
<ul class="navmenu">
<li><a href="#" title="Homepage">Home</a></li>
<li><a href="#" title="About Us">About Us</a></li>
<li><a href="#" title="Media">Media</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Links">Links</a></li>
</ul>
</div>
</div>
<div id="main-content">
<div id="left-bar" align="left">
<div id="menu">
<a href="#" title="Game Fish"><img src="images/gamefish.jpg" border="0"></a>
<a href="#" title="Fishing Trips"><img src="images/fishingtrips.jpg" border="0"></a>
<a href="#" title="Rates & Pricing"><img src="images/ratespricing.jpg" border="0"></a>
<a href="#" title="Reservations"><img src="images/reservations.jpg" border="0"></a>
<img src="images/fishingreport.jpg">
<img src="images/sponsors.jpg">
</div>
</div>
<div id="content">
<div id="content-uploads" align="center"></div>
<div id="content-body" align="center"></div>
</div>
</div>
<div id="footer" align="center">
<div id="footer-center" align="center"></div>
</div>
</body>
</html>
my banner, and top navigation bar and footer will center correctly but my main-content area that includes the left nav and right content area stay aligned left? and my footer is directly below my navigation bar and behind my main-content div? any ideas?
MultiQuote
| 