Hi,
I can't get a space between my nav bar and my header text. I followed the book
"Bullet Proof Web Design" to create the nav bar, and got the header to sit
below the nav bar only by adding the clear: right; rule to the header text, as
the book recommended. Without this rule they were one on top of the other. Yes,
the header is now below the nav bar, but I'm trying to get a space in between
them.
FYI-- I created the #bodycontainer div to capture all my page content in order
to center my page, and control the width. Then inside of that, I captured
everything except the nav bar in the #container div, so that I could put a
space between everything and the nav bar, by means of a margin. This is what
isn't working. For some odd reason, it does work in IE7 though. What happens is
that in the other browsers it pushes the #content down, but the nav bar stays
stuck to the top of the header.
Below is the css & html for my index page. Can someone offer some advice?
Thanks,
Brian
********************************CSS****************************
body {
margin: 0; padding: 0;
font-size: small;
font-family: Arial,sans-serif;
color: #333;
}
#bodycontainer {
margin: 0 auto;
width: 780px;
text-align: left;
}
#nav {
float: right;
width: 780px;
margin: 10px 0 0 0;
padding: 0;
list-style: none;
}
#nav li {
float: right;
margin: 0 0 0 1px;
padding: 0;
}
#nav a {
float: left;
margin: 0;
padding: 0.11em 1em;
color: #333;
text-decoration: none;
}
#nav a:hover {
color: white;
background: #333;
}
#nav #t-index a {
color: white;
background: #333;
}
/* container so I can push below nav bar. */
#container {
margin: 65px 0 0 0; padding: 0;
}
#header {
clear: right;
margin: 0 0 20px 0; padding: 0.11em 1em;
background: #333;
}
#header h1 {
clear: right;
margin: 0; padding: 0 0 0 0;
font-size: 140%;
color: white;
}
#footer {
clear: both;
margin: 2px 0 0 0; padding: 0;
color: black;
font-size: 80%;
}
***********************************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>
<title>Home : Brian M. Curran</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="bodycontainer">
<ul id="nav">
<li id="t-contact"><a href="contact.html">contact</a></li>
<li id="t-services"><a href="services.html">services</a></li>
<li id="t-portfolio"><a href="portfolio.html">portfolio</a></li>
<li id="t-bio"><a href="bio.html">bio</a></li>
<li id="t-index"><a href="index.html">home</a></li>
</ul>
<!-- container so I can push below nav bar. -->
<div id="container">
<div id="header">
<h1>Brian M. Curran</h1>
</div>
<br />
<br />
<br />
<br />
<br />
<object type="application/x-shockwave-flash" data="Background.swf" width="780"
height="200">
<param name="movie" value="Background.swf" /></object>
<br />
<br />
<br />
<br />
<br />
<div id="footer">
<p>Copyright © 2009 Brian M. Curran. All Rights Reserved.</p>
</div>
<!-- end container -->
</div>
<!-- end bodycontainer -->
</div>
</body>
</html>
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
