Let's take a few of these steps at a time to get a line under your banner, header and get them lined up with your slideshow. Conceptually, we are putting a new div around all of your header and then we can put a bottom border on it and use it to contain the overall width of the header/navbar combination. We also change how the navbar is positioned so it will respect that new container. I assume that you want the header/navbar to match the width of the stuff below it so it's a fixed width on homepage and categories, but variable width in galleries.
First, change your custom header to this:
<div id="myHeader">
<div id="my_banner"><a href="http://photosbyross.com"><img src="/img/spacer.gif" width="300" border="0" height="100"></a></div>
<div id="navcontainer">
<ul>
<li><a href="/" http:="" photosbyross.com="">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/7335787_bX4Ay">Guestbook</a></li>
</ul>
</div>
</div
Then, replace all of your CSS with this:
#my_banner {
width: 300px;
height: 100px;
margin: 0 left;
background: url(http://photosbyross.com/photos/474266273_sfgLE-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://photosbyross.com/photos/474266273_sfgLE-O.png');
}
#myHeader {border-bottom: solid 1px #777777; margin: 0 auto; width:750px; position:relative;}
.smugmug_ajax #myHeader {width: auto; margin: 0 5px;}
#navcontainer {position:absolute; right: 15px; top:35px;}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 16px;
_font-size: 14px;
font-variant: small-caps;
}
#userBio {text-align: center;}
#bioBox .photo {display: none;}
#bioBox .boxBottom {background: none !important;
border: none !important;
}
.nophotos {display: none;}
.loggedIn .nophotos {display: block;}
.homepage #breadcrumb {display: none;}
#toolbar a.nav {display: none;}
#toolbar {color: #000 !important;}
#header_wrapper, #footer_wrapper, #cobrand_footer, #header,
#smugmug, .smugmug #header, .smugmug #footer {margin-left: 15px;margin-right: 15px;min-width: 755px;
width: auto;
}
h3.title,
#breadcrumb .title,
#lightBoxNav .title,
.homepage .boxTop .title,
.cartbuttons .title,
#comment_header .title {font-weight: normal !important; color: #8cca1e !important;}
#pageNavigation_top, .pageOn, #photoNavTop .title, .miniBox a.nav {font-weight: normal !important;}
#photoBy, .smugmug #caption_bottom {text-align: center; border: none;}
#toolbar {display: none;}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px 3px;
color: #fff;
}
#navcontainer ul li a:hover {
color: #8cca1e;
}
/* FIND PAGE */
.find #bioBox,
.find #categoriesBox,
.find #galleriesBox {
display: none !important;
}
.find #keywordsBox {
display: block !important;
}
.find #datesBox {
display: block !important;
}
.find #mapBox {
display: block !important;
}
#map {height: 500px !important;}
.find #popularPhotos {
display: block !important;
}
.find #findText {display: block !important;}
.homepage #popularPhotos,
.homepage #mapBox,
.homepage #datesBox,
.homepage #findText,
.homepage #keywordsBox {display: none;}
#findText {display: none;
text-align: center;
font-size: 16px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
#my_footer {text-align: center;}
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */
.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}
.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}
.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}
.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}
/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
#feeds {
display:none;
}
p.updated {
display: none;
}
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}
.galleries #bioBox {
display: none;
}
.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}
.loggedIn .homepage #galleriesBox,
.loggedIn .homepage #categoriesBox {
display: block;
}
/* turn off the cart link on the minifooter */
.cartlink_footer {
display: none;
}
For further refinement, I would suggest removing the empty space below your banner graphic, putting that new graphic into your banner CSS and updating the height and width on the banner HTML and banner CSS to match. That will pull the line up close to your graphic.
Then, I would suggest implementing the more modern style picker described in this thread (http://www.dgrin.com/showthread.php?t=111251).
Thank you. Works great so far. I like the style picker. I put a new banner in, and changed the color of the line. However I am having small problem that I just saw. It seems that when I log in, I do not get the owner style. The home page remains as a guest would see it. However, I don't have to log in again, I just have to click on any icon on the home page and it then opens up to the owners view. Any help here would be appreciated.?
I would seriously ask if you have any suggestions?