Need help with header problem
i'm designing webpage , i'm having bit of problem float drop issue ie6 , ie7. fine in ff , ie8. nav portion wants drop. i've set wrapper , still doesn't seem fix problem. can point out in code problem , how fix this.
css
@charset "utf-8";
/* css document */
body {
margin: 0px;
padding: 0px;
}
#header-container {
width: 100%;
height: 204px;
background-color: #0071b2;
}
#header {
background-image: url(header.png);
background-repeat: no-repeat;
width: 1024px;
height: 204px;
margin: auto;
}
#logo{
float: left;
padding-top: 15px;
padding-left: 250px;
}
#slogan {
float: right;
padding-right: 170px;
padding-top: 35px;
}
img {
border: none;
}
#nav {
height: 76px;
width: 1024px;
padding-top: 162px;
padding-left: 48px;
}
#nav ul
{
text-align: left;
margin: auto;
width: 1024px;
}
#nav ul li
{
display: inline;
padding: 0px;
margin: 0px;
}
#footer {
margin: 0; /* zeroing margins of first element in footer avoid possibility of margin collapse - space between divs */
padding: 0px 0; /* padding on element create space, the margin have, without margin collapse issue */
background-color: #999;
}
#wrapper {
width: 100%;
height: 250px;
}
#maincontent {
padding-left: 260px;
}
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" />
<link rel="stylesheet" href="style.css" type="text/css">
<title>the country store - home</title>
</head>
<body>
<div id="wrapper">
<div id="header-container">
<div id="header">
<div id="logo">
<img src="logo.png" />
</div>
<div id="nav">
<ul>
<li><a href="#"><img src="home.png" alt="home" /></a></li>
<li><a href="#"><img src="aboutus.png" alt="about" /></a></li>
<li><a href="#"><img src="contactus.png" alt="services" /></a></li>
<li><a href="#"><img src="products.png" alt="products" /></a></li>
<li><a href="#"><img src="employees.png" alt="employees" /></a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="maincontent">
<h1> main content </h1>
<p>under main content </p>
<h2>sub main heading</h2>
<p>sub main heading content</p>
</div>
<!-- end #maincontent -->
<!-- clearing element should follow #maincontent div in order force #container div contain child floats --><br class="clearfloat" />
<!-- end #container -->
<div id="footer">
<p>copyright</p>
<!-- end #footer --></div>
</body>
</html>
i'm not advanced user means it's harder me work out what's happening without seeing page up. if have on server, link helpful. whilst wait expert chip in have go @ putting:
overflow: hidden;
in css rule for
#header-container
and/or
#header
fingers crossed!
martin
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment