Allen, I am trying to do basically the same thing as above, except I am changing from a full banner to this style. I tried to follow the instructions at Andy's Demo Page, but no images loaded, and my navbar lined up as bullets. I ended up cancelling the changes I tried and left the code alone. I have a lot of customization and am afraid to mess with the code too much. Can you help?
www.amandapair.com (http://www.amandapair.com)
Thanks in advance for any advice you can offer!
Try this
Add the my_header div around the banner and nav in your header.
<div id="my_header">
<div id="my_banner"> </div>
<div id="navcontainer">
<ul>
<li><a href="/">home</a></li>
<li><a href="/gallery/6356179_f4Lbx">portfolio</a></li>
<li><a href="/galleries">galleries</a></li>
<li><a href="/gallery/6652757_rEWvt">pricing</a></li>
<li><a href="/gallery/6819933_KVpTd">about me</a></li>
<li><a href="/gallery/6356249_wamVG">contact</a></li>
</ul>
</div> <!-- closes navcontainer -->
</div> <!-- closes my_header -->
Change/add the red in your CSS
/* ----------------------------- */
/* ---------- HEADER ----------- */
/* ----------------------------- */
#my_header {
height: 55px;
border-bottom: 1px solid #ccc;
margin: 0 40px 15px; /* top right/left bottom*/
padding: 0 10px;
}
#my_banner {
width: 675px;
height: 55px;
margin: 0; /* top/bottom right/left */
background: url(http://amandapair.smugmug.com/photos/431408833_3phgS-S.jpg) no-repeat;
}
/* ----------------------------- */
/* ---------- NAV BAR ---------- */
/* ----------------------------- */
#navcontainer {
float: right;
margin: -20px 0 0; /* top right/left bottom */
}
...
...
#navcontainer ul li a {
text-decoration: none;
padding: .25em .8em; /* spreads out buttons */
color: #928d8d;
background-color: #ffffff;
}