Banner alignment, Style selection problems

[euchretobin]

My fledgling site: http://euchre.smugmug.com

Having gone through the tutorials and much of the navbar thread, my navbar basically works, yet there are a few problems I can't resolve:


Aligning my banner to the left. The float: left in banner CSS forces it all the way to the page left, as opposed to being left aligned with the boxes below. How do I fix that?
The "Style: " selection lands on top of my navbar in galleries.
Breadcrumbs are to the right of the banner, not below (where I want them)
The Share and Slideshow buttons are too high, would like them below the level of the banner.
For some reason the navbar doesn't work in Visitor view.
Then there's the fact that my logo text really looks awful, and I'm not sure why PS Elements didn't do a better job. But that's a separate problem :dunno

Thank you in advance for help and advice. I'm starting to read the full SM CSS/HTML guide in order to return the favor(s) at some point...

-Paul

[jfriend]

We can fix you up. Change your entire custom header to this:



<div id="myHeader">
<div id="my_banner"> </div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/7360176_5D8w9">About Me</a></li>
<li><a href="/Landscapes">Landscapes</a></li>
<li><a href="/Travel">Travel</a></li>
<li><a href="/galleries">Everything...</a></li>
</ul>
</div>
</div>



Then, change your all your CSS customization to this:



/* Logo setup */

#my_banner {
width: 350px;
height: 100px;
background: url(http://euchre.smugmug.com/photos/475197062_UifGi-O.gif) no-repeat;
}

#myHeader {position:relative;}
.homepage #myHeader, .category #myHeader {width:830px; margin: 0 auto;}

#navcontainer {
position: absolute;
bottom:30px;
right: 15px;
}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 16px;
_font-size: 14px;
font-variant: small-caps;
}


/* CSS from Andy's Demosite How To page
http://andydemo.smugmug.com/gallery/5568786_7mHz6
Modified to show my photo in the Bio, and only show Featured Galleries
on the home page
*/

#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;}
#findText {display: none;
text-align: center;
font-size: 16px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}

/* Homepage setup */
.homepage #popularPhotos,
.homepage #mapBox,
.homepage #datesBox,
.homepage #findText,
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #keywordsBox {display: none;}

/* Galleries page setup */
.galleries #bioBox { display: none; }

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}

/* Remove the euchre's Home homepage title */
/* hides your name (including any 's) */
#userName { display: none; }
/* hides the word home */
#userHome { display: none; }



You should end up with this:
http://content.screencast.com/users/jfriend/folders/Jing/media/8626950a-d787-4c34-b48d-d0fd39dc1e1c/2009-02-16_1907.png

If you're interested in what was wrong, you were using some absolute positioning. When you use that, the object you are positioning no longer takes up any height in the layout of the page. That means that other elements that come after it, maybe able to overlap it because they get positioned as if it was never there.

I changed the layout so that your entire header is enclosed in it's own div. That binds all the header stuff together and your banner image gives the entire header a height so that nothing else will layout into the header space.

Beyond that, I made the header div a centered, fixed width on the homepage and category pages and let it be the full width of the page on gallery pages with banner on the left and navbar on the right.

[euchretobin]

John, that's fantastic, thanks both for the fix and explanation. My code was originally from Andy's demo site. I'll compare your fixes with that code to educate myself a bit more, as clearly I missed something...

-Paul