Hello millsi80,
That's an interesting approach... I've never done it that way.
I took nav and centered that, have to give it a width to do it - the total width of all your buttons.
Make the background color come from #banner then, by moving it's closing tag down to include the #nav.
Change the margins on #banner h1 so the white background is back...
I didn't have the images so there are some background colors in there. Just copy/paste this whole bit into a new .html document to see it -
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><style type="text/css">
body {
margin:10px;
background: #000 url();
}
* {
margin: 0;
padding: 0;
border: none;
}
#banner {
background:#36384f;
border-top:1px solid #000;
border-right:1px solid #000;
overflow: auto;
}
#banner h1 {
font-size:14px;
padding:10px 10px 0px 10px;
background: #fff url(banner%20copy.jpg);
}
#nav {
height:45px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
width: 920px;
margin: auto;
}
#home, #astro, #iss, #sat, #logo, #csa, #isa, #pic, #bib {
height: 45px;
display: block;
float: left;
}
#home {
background: #f00 url(homebutton.jpg) no-repeat 0 0;
width: 107px
}
#home:hover {
background: #00f url(homebuttonover.jpg) no-repeat 0 0;
width: 107px
}
#astro {
background: url(astro.jpg) no-repeat 0 0;
width: 120px
}
#astro:hover {
background: url(astroover.jpg) no-repeat 0 0;
width: 120px;
}
#iss {
background: url(iss.jpg) no-repeat 0 0;
width: 107px
}
#iss:hover {
background: url(issover.jpg) no-repeat 0 0;
width: 107px;
}
#sat {
background: url(satellites.jpg) no-repeat 0 0;
width: 120px;
}
#sat:hover {
background:url(satellitesover.jpg) no-repeat 0 0;
width: 120px;
}
#csa {
background: url(csa.jpg) no-repeat 0 0;
width: 107px
}
#csa:hover {
background: url(csaover.jpg) no-repeat 0 0;
width: 107px;
}
#isa {
background: url(isa.jpg) no-repeat 0 0;
width: 107px
}
#isa:hover {
background: url(isaover.jpg) no-repeat 0 0;
width: 107px;
}
#pic {
background: url(pic.jpg) no-repeat 0 0;
width: 107px
}
#pic:hover {
background: url(picover.jpg) no-repeat 0 0;
width: 107px;
}
#bib {
background: #00f url(bib.jpg) no-repeat 0 0;
width: 145px
}
#bib:hover {
background: url(bibover.jpg) no-repeat 0 0;
width: 145px;
}
</style>
</head>
<body>
<div id="banner">
<h1>text here</h1>
<div id="nav">
<p>
<a id="home" href="#" title="Home"></a>
<a id="astro" href="#" title="Astronauts"></a>
<a id="csa" href="#" title="Canadian Space Agency"></a>
<a id="isa" href="#" title="International Space Agency"></a>
<a id="iss" href="#" title="International Space Station"></a>
<a id="sat" href="#" title="Satellites"></a>
<a id="pic" href="#" title="Pictures"></a>
<a id="bib" href="#" title="Bibliography"></a>
</p>
<!--end nav--></div>
<!--end banner--></div>
</body>
</html>