Navbar help thread

[Allen]

I want my Nav Bar to look like the one at this site: dschaub.smugmug.com
(http://dschaub.smugmug.com)
Not a copy of the graphic, of course, but a header with a site graphic and the nav bar all on the same "plane". I can't figure out how to put them side by side. I can only figure out how to make a header and put a nav bar under it.

Can anyone help?

Right now I only have my nav bar, no header.

Thank you!
Here's a start, uses text for the banner. An image can be added later if you like.

Replace your whole header with this.

<div id="myHeader">

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/11599661_Kjjke">About MairImages</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">Information</a></li>
</ul>
</div>

<div id="myBanner">MairImages</div>

</div> <!-- closes myHeader -->

Add this to your CSS

#myHeader {
height: 45px;
border-bottom: 1px solid #aaa;
margin: 10px 20px 15px; /* top right/left bottom*/
padding: 0 20px;
}

#myBanner {
font-size: 250%;
font-family: Comic Sans MS
}

#navcontainer {
float: right;
margin: 20px 0 0; /* top right/left bottom */
}

[Maggedy]

Here's a start, uses text for the banner. An image can be added later if you like.

Replace your whole header with this.

<div id="myHeader">

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/11599661_Kjjke">About MairImages</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">Information</a></li>
</ul>
</div>

<div id="myBanner">MairImages</div>

</div> <!-- closes myHeader -->
Add this to your CSS

#myHeader {
height: 45px;
border-bottom: 1px solid #aaa;
margin: 10px 20px 15px; /* top right/left bottom*/
padding: 0 20px;
}

#myBanner {
font-size: 250%;
font-family: Comic Sans MS
}

#navcontainer {
float: right;
margin: 20px 0 0; /* top right/left bottom */
}


That worked great! Thank you!

[JR303]

Well, finally got the dropdown navbar done, but cannot for the life of me get it centered under my banner. Still have to make some pages/links, but wanted to take care of the functionality first.

Also, if anyone can tell me how to make the add to cart button/dropdown hover to the right side, I would appreciate it greatly.

Still trying to make the paypal mini-cart work correctly, just not having much luck yet.

[jfriend]

Well, finally got the dropdown navbar done, but cannot for the life of me get it centered under my banner. Still have to make some pages/links, but wanted to take care of the functionality first.

Also, if anyone can tell me how to make the add to cart button/dropdown hover to the right side, I would appreciate it greatly.

Still trying to make the paypal mini-cart work correctly, just not having much luck yet. We can't help without a link to your site. You should add it to your dgrin signature so it's always there.

[JR303]

We can't help without a link to your site. You should add it to your dgrin signature so it's always there.

Well, it's obvious that I've lost my mind completely. It's turned to mush mostly from css/html/java stuff. Sorry.

Anyway, here's my site:

www.johnreed.smugmug.com (http://www.johnreed.smugmug.com)

Now, I'm having some different strange issues, but maybe we can just get all of this straight and start from there.

[nvrl8]

I have searched for two hours and tried different codes suggested....nothing works for my site. My banner has been the same for years and am just now making a change. It's worked fine all that time, but now iI changed and with that came GUCK. Can someone please tell me how to move my navbar up under MY banner cuz everyone else's solutions don't seem to help? Thanks

www.naturalvisionphoto.com (http://www.naturalvisionphoto.com)

[jfriend]

I have searched for two hours and tried different codes suggested....nothing works for my site. My banner has been the same for years and am just now making a change. It's worked fine all that time, but now iI changed and with that came GUCK. Can someone please tell me how to move my navbar up under MY banner cuz everyone else's solutions don't seem to help? Thanks

www.naturalvisionphoto.com (http://www.naturalvisionphoto.com) Change the height and width in your banner CSS to match your actual image dimensions:

#my_banner {
width: 1000px;
height: 200px;
margin: 0 auto;
background: url(http://www.naturalvisionphoto.com/photos/824094378_iJ3o6-X3.jpg) no-repeat;
}

FYI, there's a lot of empty space on each end of your banner that is not required. That just makes your banner larger and slower to load than is required. You could cut all that empty space off (and then adjust the CSS width to match the new image size) and things would load faster.

[jdgphotoboy]

It seems as though IE8 doesn't like my Navbar too much...the issue was brought to my attention yesterday by a fellow Smugger that took a look at my site and noticed that IE8 is splitting and stacking my navbar on top of itself. I have a Mac and everything looks fine on all of the most current browsers, i.e. Safari, Firefox, Opera, and Chrome...just not IE8 as there is no IE8 browser for the Mac platform.

Would any of you CSS Gods/Godesses know the fix for this?:dunno

[jfriend]

It seems as though IE8 doesn't like my Navbar too much...the issue was brought to my attention yesterday by a fellow Smugger that took a look at my site and noticed that IE8 is splitting and stacking my navbar on top of itself. I have a Mac and everything looks fine on all of the most current browsers, i.e. Safari, Firefox, Opera, and Chrome...just not IE8 as there is no IE8 browser for the Mac platform.

Would any of you CSS Gods/Godesses know the fix for this?:dunnoYour navbar isn't working right in IE7 either. Is there are reason you have <div> and </div> tags inside your menu (around the sub-menus)? That is not how these are normally done.

[nvrl8]

Perfect! Sorry that was such an obvious fix....but according to PS, my banner was 1500x300 which is what I had in there so I couldn't figure out why it wasn't working.....weird.

If I change my banner to have less on the sides, won't it look like a block in the middle of the page instead of extending to the reaches of each side of the screen? That's why I changed it so I would not have a big box....so it would be more continuous. Perhaps there's a way to make it stretchy?

[nvrl8]

I added my website to my signature now.....sorry!!

[Raw Emotion]

Newbie here. I want to make a navbar and followed the directions that Ivar made here. http://dgrin.smugmug.com/gallery/1932803

The directions say "When logged in, click on "control panel" (1)
and in the control panel, in the Customize tab, find the organize & customize section, and click the "customize" link." Comparing my page to the image in the instructions, I can not do what it says.

Has the customize page changed? If so, is there an updated set of instructions that will show me the steps needed to fix my problem?

Thanks for the help!

[jfriend]

Newbie here. I want to make a navbar and followed the directions that Ivar made here. http://dgrin.smugmug.com/gallery/1932803

The directions say "When logged in, click on "control panel" (1)
and in the control panel, in the Customize tab, find the organize & customize section, and click the "customize" link." Comparing my page to the image in the instructions, I can not do what it says.

Has the customize page changed? If so, is there an updated set of instructions that will show me the steps needed to fix my problem?

Thanks for the help! I'm not sure I understand what your question is. If you're just getting started with a navbar, I would highly recommend using the Easy Customizer. This is new since Ivar's tutorial and is a much easier way to get a navbar set up. To get to the Easy Customizer, go to your homepage, select the Tools button and pick Easy Customizer. From there, you should be able to find your way around. Navigation Bar is in the "Header" section.

[jdgphotoboy]

Your navbar isn't working right in IE7 either. Is there are reason you have <div> and </div> tags inside your menu (around the sub-menus)? That is not how these are normally done.
I figured as much with the whole IE line...so again, if anyone has a fix for this issue I would be forever grateful.

As for the <div> tags...those need to stay there because my CSS styles the sub menus and when I went in and removed them it just blew everything apart.

So I have to figure out if the attached html markup with the <!--if ie7...--> tags has any role in how my navbar reacts on IE8, IE7, and IE6.

<div id="menu">

<ul class="level1">
<li class="level1-li"><a class="level1-a" href="/">Home<b></b></a></li>
<li class="level1-li"><a class="level1-a drop" href="/Digital-Art-and-Design/">Portfolio<b></b>

<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

[Raw Emotion]

I'm not sure I understand what your question is. If you're just getting started with a navbar, I would highly recommend using the Easy Customizer. This is new since Ivar's tutorial and is a much easier way to get a navbar set up. To get to the Easy Customizer, go to your homepage, select the Tools button and pick Easy Customizer. From there, you should be able to find your way around. Navigation Bar is in the "Header" section.

Thanks for your reply. I have been using this Easy Customizer currently. However I want to customize it. I am wanting to make a drop down navbar if I can.

For example when I click the navbar buttons for gallery, I want a drop down with more buttons to select weddings, engagement portraits etc. I would rather not have another page come up with the separate galleries listed.

So I am looking for instructions on how to do this. Does that help?

[jfriend]

I figured as much with the whole IE line...so again, if anyone has a fix for this issue I would be forever grateful.

As for the <div> tags...those need to stay there because my CSS styles the sub menus and when I went in and removed them it just blew everything apart.

So I have to figure out if the attached html markup with the <!--if ie7...--> tags has any role in how my navbar reacts on IE8, IE7, and IE6.

<div id="menu">

<ul class="level1">
<li class="level1-li"><a class="level1-a" href="/">Home<b></b></a></li>
<li class="level1-li"><a class="level1-a drop" href="/Digital-Art-and-Design/">Portfolio<b></b>

<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li> The extra <div> tags are causing problems. The styling can be fixed without them. It if IE stuff is also required to make it work in IE at all. Please try removing the <div> tags inside your menu. Nobody else using this menu structure uses those <div> tags and nobody else is having this issue.

[jdgphotoboy]

The extra <div> tags are causing problems. The styling can be fixed without them. It if IE stuff is also required to make it work in IE at all. Please try removing the <div> tags inside your menu. Nobody else using this menu structure uses those <div> tags and nobody else is having this issue.
Okay...I cleaned up the html portion in Dreamweaver and removed a few element tags that shouldn't have been in there. if you take a look at the div tags in the html you'll see that they're styled in the sub-menu portion of the css. So where do you think I should begin? Remove the div style in css and then go after the html div's?

<!--JDG NAVBAR-->

<div id="nav-wrapper">
<div id="container">
<div id="menu">

<ul class="level1">
<li class="level1-li"><a class="level1-a" href="/">Home</a></li>
<li class="level1-li"><a class="level1-a" href="/Digital-Art-and-Design/">Portfolio</a></li>

<li class="level1-li"><a class="level1-a" href="/galleries">Galleries
<!--><!--></a><!--<![endif]-->
<!--><table><tr><td><![endif]-->
<div>
<ul>
<li><a href="/Portraits/">Portraits</a></li>
<li><a href="/Weddings/">Weddings</a></li>
<li><a href="/Events/">Events</a></li>
<li><a href="/Pets/">Pets</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="level1-li"><a class="level1-a" href="/Client-Access/">Client Access</a></li>

<li class="level1-li"><a class="level1-a drop" href="#url">JDG Photography
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul>
<li><a href="http://www.jdgphotography.com/Photography/Photo-Prep/11474172_WLHpc">Preparing for your Shoot</a></li>
<li><a href="/gallery/11270439_ADtvf">Bio</a></li>
<li><a href="/gallery/11270466_E3sCX">Contact Me</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<li class="level1-li left"><a class="level1-a drop" href="#">Pricing
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul>
<li><a href="/gallery/10654356_fMMrM">Weddings</a></li>
<li><a href="http://www.jdgphotography.com/Price-Lists/FamilyandIndividualPortrait/10654348_HewkF">Portraits</a></li>
<li><a href="http://www.jdgphotography.com/Price-Lists/Corporate-Headshots/11507727_r4fuG">Corporate Headshots</a></li>
<li><a href="http://www.jdgphotography.com/Price-Lists/Creative-Headshots/11507759_bRGNs">Creative Headshots</a></li>
<li><a href="/gallery/11270815_R9GCi">Senior Pictures</a></li>
<li><a href="/gallery/11270839_dfxZp">Pet Portraits</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="level1-li"><a class="level1-a drop" href="#url">Prints and Details
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<ul>
<li><a href="http://www.jdgphotography.com/Photography/Placing-Your-Order/11602249_HAmCs">Placing Your Order</a></li>
<li><a href="http://www.jdgphotography.com/Price-Lists/Product-Options/11507790_Zfhip">Prints and More</a></li>
<li><a href="http://jdgphotography.smugmug.com/gallery/11270853_iv68Y">Services</a></li>
<li><a href="http://www.jdgphotography.com/Photography/Our-Guarantee/11601771_xTRsw">Our Print Guarantee</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="level1-li"><a class="level1-a" href="#url">Blog</a></li>
</ul>

</div>
</div>
</div>

<!-- END JDG NAVBAR -->
/*=====Nav-bar=====*/
#container {width:auto}
#menu {height:58px; background:url(http://www.jdgphotography.com/photos/818660495_DFnMa-L.gif) repeat-x; border-top:none;border-bottom:1px solid #777;}
#menu table {border-collapse:collapse; width:0; height:0; margin:-1px;}
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;position:relative;}
#menu ul {float:right;z-index:999;}
#menu ul.level1 {padding-right:2px; background:url(http://www.jdgphotography.com/photos/818660500_36eoo-L.gif) no-repeat right top;}
#menu li {float:left;}
#menu ul div {position:absolute; left:-9999px; top:-32000px;}

#menu a {display:block; font:normal 14px/39px arial,sans-serif; color:#777; height:39px; text-decoration:none;padding:0 14px; text-align:center;}
#menu ul.level1 li.level1-li a.level1-a {float:left; background:url(http://www.jdgphotography.com/photos/818660500_36eoo-L.gif) no-repeat left top;}
#menu ul.level1 li.level1-li a.level1-a:hover {background:url(http://www.jdgphotography.com/photos/818660508_ccTJL-L.gif) no-repeat left top; border:0; color:#fff; position:relative;}
#menu ul.level1 li.level1-li a.level1-a.drop:hover {background:url(http://www.jdgphotography.com/photos/818660508_ccTJL-L.gif) no-repeat left top;}
#menu ul.level1 li.level1-li:hover {position:relative;}
#menu ul.level1 li.level1-li:hover > a {background:url(http://www.jdgphotography.com/photos/818660508_ccTJL-L.gif) no-repeat left top; color:#fff;}

#menu ul.level1 li.level1-li a.level1-a:hover b {display:block; width:1px; height:1px; overflow:hidden; position:absolute; right:-1px; top:38px; background:#111;}
#menu ul.level1 li.level1-li:hover > a b {display:block; width:1px; height:1px; overflow:hidden; position:absolute; right:-1px; top:38px; background:#111;}

#menu ul :hover [I]div {left:0; top:39px; background:#111; border:1px solid #111; border-width:0 1px 1px 1px;}
#menu ul :hover [I]div ul {border:1px solid #444; border-width:0 1px 1px 1px; padding-bottom:5px;}
#menu ul :hover div ul li {float:none; height:25px;}
#menu ul :hover div ul li a {display:block; height:25px; text-align:left; font:normal 13px/25px arial,sans-serif;}
#menu ul :hover div ul li a:hover {color:#fff;}
#menu a {cursor: default;}

/*=======END NAVBAR=======*/


Thanks so much for your help and feedback thus far jfriend... :thumb

[jdgphotoboy]

Perfect! Sorry that was such an obvious fix....but according to PS, my banner was 1500x300 which is what I had in there so I couldn't figure out why it wasn't working.....weird.

If I change my banner to have less on the sides, won't it look like a block in the middle of the page instead of extending to the reaches of each side of the screen? That's why I changed it so I would not have a big box....so it would be more continuous. Perhaps there's a way to make it stretchy?

In most photo editing software it allows you to save images in transparent .png files. If you create a banner with text and a few graphics where the surrounding area of that block is transparent (keep in mind that you have to start out with a transparent layer and build text and graphics layers from there), you can simply "save as" .png without having to flatten the layers. Doing this, only the text and graphics will show and whatever theme/background will show through the transparent area of the box.

[Raw Emotion]

Thanks for your reply. I have been using this Easy Customizer currently. However I want to customize it. I am wanting to make a drop down navbar if I can.

For example when I click the navbar buttons for gallery, I want a drop down with more buttons to select weddings, engagement portraits etc. I would rather not have another page come up with the separate galleries listed.

So I am looking for instructions on how to do this. Does that help?

Surely someone can guide me where to look.

[jdgphotoboy]

Surely someone can guide me where to look.
Hey good morning Raw Emotion...

Wanted to let you know that I am in no way shape or form a CSS and HTML Guru. However, I might be able to steer you in the right direction for you to create a navbar with dropdown menus. The following link: http://www.cssmenumaker.com/drop_down_css_menu.php is fantastic in getting you up and running in a very short time. You really only need to have the basic understanding of CSS and HTML to further customize your Navbar. I recommend mapping out your menu items with their links prior to starting the chain...makes things a little more manageable. This other link: http://www.allen-steve.smugmug.com/ is also very good to get some more ideas and a better understanding in how to create different HTML pages as well as explaining how to create different navbars. :thumb

Good luck...

[jdgphotoboy]

A quick question for those of you that are really good with the CSS stuff... I'm contemplating re-working my Navbar once again due the fact that my current Navbar isn't playing nice with IE6, 7, and now 8.

Question being...Is it absolutely necessary to have the following in my HTML markup?

<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->


Reason being is that I'm not finding it in the markup of other Navbar's with dropdown menu's that I've been looking at.

It was brought to my attention that the <div> tags for the sub-menu's my also be the source of my problem as well.

:dunno

[jfriend]

A quick question for those of you that are really good with the CSS stuff... I'm contemplating re-working my Navbar once again due the fact that my current Navbar isn't playing nice with IE6, 7, and now 8.

Question being...Is it absolutely necessary to have the following in my HTML markup?

<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->


Reason being is that I'm not finding it in the markup of other Navbar's with dropdown menu's that I've been looking at.

It was brought to my attention that the <div> tags for the sub-menu's my also be the source of my problem as well.

:dunnoIf you want this type of drop-down menu to work with IE6, this is required. If you've given up on IE6 (which I have), then these conditionals are not required.

[jdgphotoboy]

If you want this type of drop-down menu to work with IE6, this is required. If you've given up on IE6 (which I have), then these conditionals are not required.
Excellent John! I too have given up on IE6 as well and IE all together for that matter. I now have to figure out how to remove the <div's> from both my HTML and CSS without blowing it up...Which it's doing as soon as I remove just on <div> tag.

I guess it's back to the Navbar drawing board for me.

Thanks for your quick response by the way...:D

[Allen]

Thanks for your reply. I have been using this Easy Customizer currently. However I want to customize it. I am wanting to make a drop down navbar if I can.

For example when I click the navbar buttons for gallery, I want a drop down with more buttons to select weddings, engagement portraits etc. I would rather not have another page come up with the separate galleries listed.

So I am looking for instructions on how to do this. Does that help?
If we had a link to your site it would be easier to see what you have and
how to construct a new nav.

[rosecoloredglasses]

Hi,
I am wondering if I can link my "your bio" to the navibar instead of creating a new gallery for this info. As it stands now, the page for this is a second homepage named "A Bit About Me", so when I attempt to take off the galleries & slideshow, it takes them off the original homepage. & If not, how do I get rid of the "Gallery 1" in the Old Journal Style. Thank you!

www.elementalgalphotography.com (http://www.elementalgalphotography.com)

[Allen]

Hi,
I am wondering if I can link my "your bio" to the navibar instead of creating a new gallery for this info. As it stands now, the page for this is a second homepage named "A Bit About Me", so when I attempt to take off the galleries & slideshow, it takes them off the original homepage. & If not, how do I get rid of the "Gallery 1" in the Old Journal Style. Thank you!

www.elementalgalphotography.com (http://www.elementalgalphotography.com)
Put this in the gallery description of the new about me gallery and you
will have the same look as on the homepage.

<html>
<div class="BioPhoto" style="float: left; padding-right: 20px;">
<img src="http://www.elementalgalphotography.com/photos/818759777_KUf4B-Th.jpg" alt="" class="imgBorder" border="0" height="150" width="150">
</div>
<div id="BioText">I turned 42 in October of ’09. It has been quite a ride. I spent too many of these years with the lights dimmed or off. Around seven years ago, I had my “wake up call”. Back then if you told me that now I’d be chasing butterflies &amp; dragonflies, stalking wildlife &amp; stopping to "smell the roses”, I’d ‘a thought you were nuts. Now I can’t wait to have the next experience revealed. I am indescribably moved by the beauty all around me &amp; I am grateful for &amp; humbled by the opportunity to share a small part of what I now can see.<br>
<br>
I did not pick up a decent camera until ’07. I went on a trip to Nantucket Island with a friend &amp; he brought his manual SLR, yes, film. He was taking a picture of the lighthouse. He was waiting for “the moment”. I waited patiently, but upon our return, I bought myself a good non-SLR digital. I figured if we were going to hang out, I might as well get something for myself. At first I thought it was beginner’s luck, but here I am three years later doing "OK". And now I am chomping at the bit for bigger &amp; better gear. (I also got myself a passport &amp; will travel.)<br>
<br>
The big crashes of ’07 &amp; ’08 – My computer had a total crash in ’07. I was devastated! Lots of stuff was gone, &amp; that’s really all it was, stuff. But my pics were gone, &amp;, well, those are not stuff! I found some software that managed to get back most of what I lost. You’d think I would have learned. Nope! Again in ’08, same thing. Now I take all kinds of measures to ensure my treasure’s safety. If you are looking to buy, you may have noticed some particularly small pics. These are most likely the victims of these crashes. Although I did manage to retrieve most, many of these were in their cropped form. I still felt they needed to be on here as they are all part of the journey.<br>
<br>
A special thanks to all who have tirelessly encouraged &amp; prayed for me through-out these years!<br>
<br>
Feel free to <a href="mailto:kristi@elementalgalphotography.com">Email me</a> with any thoughts, suggestions, requests. Enjoy! Live the life you love!
</div>
</html>

[rosecoloredglasses]

Awesome! Thank you! It's never enough though, is it? Can I get rid of the "this gallery needs photos" on the bottom?

[Allen]

Awesome! Thank you! It's never enough though, is it? Can I get rid of the "this gallery needs photos" on the bottom?
Post a link to the gallery and we'll help you clean it up some.


CSS
.notLoggedIn .gallery_xxxxxxxxx .emptyGallery {display: none;}

[rosecoloredglasses]

http://www.elementalgalphotography.com/A-Bit-About-Me/Your-Bio/11685939_oTqFP

[Allen]

http://www.elementalgalphotography.com/A-Bit-About-Me/Your-Bio/11685939_oTqFP
Looks like this is all you need. Add to CSS

.notLoggedIn .gallery_11685939 .emptyGallery {display: none;}

[rosecoloredglasses]

Thank you so much! Now I'll have to find how to make it look like the other two pages. That is probably for another thread though. But you have helped put the finishing touches on a day of progress.

[chandswu]

The Navbar (and banner) is only showing on a select few of my galleries. How do I get it to show on all galleries?

Thanks.

http://www.bradkehrphotography.com

[jfriend]

The Navbar (and banner) is only showing on a select few of my galleries. How do I get it to show on all galleries?

Thanks.

http://www.bradkehrphotography.com You make it easier for the helpers if, when you're asking a question about only some of your site, you give us a link to a representative gallery/category/etc... In this case, I'm guessing that you need to make sure that your gallery settings have:

Hide Owner = No
Appearance = Custom

If either one of those are not set this way, you will get the generic Smugmug header.

[Raw Emotion]

Hey good morning Raw Emotion...

Wanted to let you know that I am in no way shape or form a CSS and HTML Guru. However, I might be able to steer you in the right direction for you to create a navbar with dropdown menus. The following link: http://www.cssmenumaker.com/drop_down_css_menu.php is fantastic in getting you up and running in a very short time. You really only need to have the basic understanding of CSS and HTML to further customize your Navbar. I recommend mapping out your menu items with their links prior to starting the chain...makes things a little more manageable. This other link: http://www.allen-steve.smugmug.com/ is also very good to get some more ideas and a better understanding in how to create different HTML pages as well as explaining how to create different navbars. :thumb

Good luck...

YES YES YES! This is exactly what I needed. Thanks a bajillion. :ivar

[Rather27]

So just a few questions here....

I'd like to have my navbar to be on the same level as my banner, but to the far right....

I'd like the letters to be medium gray and hover to white with no box around each tab as it is now

I'd like a thin white line to divide each tab (not essential)

I'd like a thin white line to stretch across the entire page right below the banner

Any help or suggestions would be greatly appreciated...I'm not too confident with the codes aspect and once I add a couple I get lost in which one does what..

Thanks!

[Allen]

So just a few questions here....

I'd like to have my navbar to be on the same level as my banner, but to the far right....

...

...

I'd like a thin white line to stretch across the entire page right below the banner

Any help or suggestions would be greatly appreciated...I'm not too confident with the codes aspect and once I add a couple I get lost in which one does what..

Thanks! This is what I use from my notes as a basic starting point to put the
banner and nav on same line. Ref: threads here.
http://www.dgrin.com/showthread.php?p=903302#post903302
http://www.dgrin.com/showpost.php?p=899409&postcount=2411

HTML

<div id="my_header">

<div id="navcontainer">
...
</div> <!-- closes navcontainer -->

<div id="my_banner"> </div>

</div> <!-- closes my_header -->

CSS

#my_header {
height: 40px; /* usually same as banner or slightly more */
border-bottom: 1px solid #ccc;
margin: 0 40px 15px; /* top right/left bottom*/
padding: 0 20px; /* adds space to each end inside bottom border */
}

#my_banner {
width: 300px; /* actual photo width and height */
height: 40px;
margin: 0; set to zero
background: url(http://nickname.smugmug.com/photos/XXXXXXXXX_xxxxx-O.jpg) no-repeat;
}
/* the top margin in this pushes nav up and down to position.*/
#navcontainer {
float: right;
margin: 60px 0 0; /* top right/left bottom */
}
If you have blank space around your banner image it is recommended to crop it off.

If you use a transparent png instead of a jpg you should see this for
your banner, set the margin to zero.

#my_banner {
width: 750px;
height: 100px;
margin: 0;
background: url(/photos/xxxxxxxx_xxxxx-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/xxxxxxxx_xxxxx-O.png');
}

btw, your banner is huge width wise, side by side might not look good on small screens.

[Allen]

...

I'd like the letters to be medium gray and hover to white with no box around each tab as it is now

I'd like a thin white line to divide each tab (not essential)

...
HTML header - Vertical lines

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/gallery/XXXXXXX_YYYYY">Contact</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/galleries">Galleries</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/gallery/XXXXXXX_YYYYY">Prints</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/gallery/XXXXXXX_YYYYY">Guestbook</a></li>
</ul>
</div>

CSS - Nav colors

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #ccc;
background: none;
}

#navcontainer ul li a:hover {
color: #fff;
background: none;
}

[Rather27]

HTML header - Vertical lines

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/gallery/XXXXXXX_YYYYY">Contact</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/galleries">Galleries</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/gallery/XXXXXXX_YYYYY">Prints</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/gallery/XXXXXXX_YYYYY">Guestbook</a></li>
</ul>
</div>

CSS - Nav colors

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #ccc;
background: none;
}

#navcontainer ul li a:hover {
color: #fff;
background: none;
}



Great! got the colors looking right and the vertical lines! Thanks:clap

Can I move the navigation titles a little closer together to tighten it up a bit?:scratch

[Rather27]

btw, your banner is huge width wise, side by side might not look good on small screens.

I do use a png for my banner. If I did want to put the banner and the navbar on the same line, what size would be ideal if I recreate one?

[Allen]

Great! got the colors looking right and the vertical lines! Thanks:clap

Can I move the navigation titles a little closer together to tighten it up a bit?:scratch
Change the right/left padding in this.

#navcontainer ul li a {
text-decoration: none;
padding: .2em .2em; /* top/bottom R/L */
color: #ccc;
background-color: none;
}

[Rather27]

Change the right/left padding in this.

#navcontainer ul li a {
text-decoration: none;
padding: .2em .2em; /* top/bottom R/L */
color: #ccc;
background-color: none;
}


change to what you have in red? I don't have /* top/bottom R/L */ after mine? do I add it also?

sorry still a little timid with the code:huh
thanks Allen!

[Allen]

I do use a png for my banner. If I did want to put the banner and the navbar on the same line, what size would be ideal if I recreate one?
How wide do you want the banner and nav at minimum separation? The
nav could side under the bottom of the banner if window is too narrow.

Not sure how easy it would be to do with your banner created with ECZ though.

[sportshotz]

I copied and pasted the CSS code into the CSS section, and copied and pasted the HTML code into the Custom Header section (to avoid typos) from "FIND YOUR WAY: ADDING A NAVIGATION BAR TO YOUR SITE." The navbar doesn't have blue boxes like the example. Instead, it produces a bulleted vertical list with underscored titles. The references are correct ... if I select "Sport Shotz", it takes me to the sports galleries, etc., so the code in the Custom Header section seems to be working properly. I've spent a couple hours reading in this thread, and didn't see anyone with the same problem. Please note that I added my banner to my site using the Easy Customization feature, so there isn't any other code in the CSS or Custom Header sections.

[jfriend]

I copied and pasted the CSS code into the CSS section, and copied and pasted the HTML code into the Custom Header section (to avoid typos) from "FIND YOUR WAY: ADDING A NAVIGATION BAR TO YOUR SITE." The navbar doesn't have blue boxes like the example. Instead, it produces a bulleted vertical list with underscored titles. The references are correct ... if I select "Sport Shotz", it takes me to the sports galleries, etc., so the code in the Custom Header section seems to be working properly. I've spent a couple hours reading in this thread, and didn't see anyone with the same problem. Please note that I added my banner to my site using the Easy Customization feature, so there isn't any other code in the CSS or Custom Header sections. Those that could help need a link to your site to see what isn't working.

[Allen]

change to what you have in red? I don't have /* top/bottom R/L */ after mine? do I add it also?

sorry still a little timid with the code:huh
thanks Allen!
That is just a comment I added to the line so you know what each does.
You can leave that part off.
The .2em in red is the right/left padding that spreads your nav buttons.

[AmyBooo]

I just realized my Nav Bar doesn't work on Safari on a Mac. I have a PC so it's hard for me to test this problem. Please help!!!

www.powderphoto.com

[jfriend]

I just realized my Nav Bar doesn't work on Safari on a Mac. I have a PC so it's hard for me to test this problem. Please help!!!

www.powderphoto.com (http://www.powderphoto.com) Where do you want your navbar? It doesn't work for me in Firefox, IE or Safari on Windows because it's behind your homepage image in all three browsers.

If you want it under your image just on the homepage, it's much better to put a copy of the navbar (with a different ID and corresponding CSS) actually in the biobox under your image and let the browser lay out the position properly rather than use relative positioning to try to force the other one down there. Force a position like you are has all sorts of consequences - it doesn't take up space in the page layout in the right place, it doesn't get out of the way of other things, if anything else changes size, it won't be in the right place, etc...

[AmyBooo]

Where do you want your navbar? It doesn't work for me in Firefox, IE or Safari on Windows because it's behind your homepage image in all three browsers.

If you want it under your image just on the homepage, it's much better to put a copy of the navbar (with a different ID and corresponding CSS) actually in the biobox under your image and let the browser lay out the position properly rather than use relative positioning to try to force the other one down there. Force a position like you are has all sorts of consequences - it doesn't take up space in the page layout in the right place, it doesn't get out of the way of other things, if anything else changes size, it won't be in the right place, etc...

Hey John, thanks for the reply. I actually don't want my navbar on the homepage. What I should have said was that it's not appearing on the galleries pages. When you enter my website by clicking the main image on the homepage, it directs you to a gallery. The navbar should appear on the upper right side. It is not appearing in safari though :/

[jfriend]

Hey John, thanks for the reply. I actually don't want my navbar on the homepage. What I should have said was that it's not appearing on the galleries pages. When you enter my website by clicking the main image on the homepage, it directs you to a gallery. The navbar should appear on the upper right side. It is not appearing in safari though :/ The HTML/CSS isn't quite right for your banner/navbar which can cause differences among browsers.

I would suggest you change the way you lay out your header. First, put the navbar before the banner in your HTML. Then, remove the float: left from your banner in all circumstances in your CSS. You don't want your banner to be float. This will position your navbar to the right edge, then your banner will naturally fall on the left and the banner will properly define the height of your header.

Then, add this CSS to properly hide your navbar on the homepage:

.homepage #navcontainer {display: none;}

After you make this change to your header, you may find that some other position things are off because you may have compensated for the faulty header design with other CSS. Those will be easy to fix.

Then, move the <link href="..favicon.ico" ..> code to the HEAD section of customization. That's where it properly belongs - it does not belong in your custom header.

After you've done these things, we can look at other pages and see how they are working.

FYI, I think it's kind of cryptic to make your viewer guess that they have to click on the main image to go anywhere in your site. That was not obvious to me.

[elc]

I'm feeling like the village idiot of smugmug - lots of directions have been posted, and yet I still can't seem to find the path.

Like a lot of folks here, I'm trying to get an integrated custom header/logo with navbar, like.... wait for it..... Moon River.

I followed the directions on dgrin for creating a custom header and navbar. You can see the results on my site - www.eclecticlightcompany.com.

But when I tried to follow the directions to create the integrated logo and navbar on a single horizontal line, at http://dgrin.com/showthread.php?t=48349&page=479, I couldn't find any part of my CSS and HTML that seemed to match the parts that seem to be the starting point for the changes.

For example, here is my CSS stuff:
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: #000;
}
.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;
}
.galleries #slideshowBox {display: none;}

And here is my stuff for custom header:

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/Other/aboutme/11636994_mn3Kx">About Me</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/Other/Contact-and-Comment/11637132_a9up3">Contact and Comment</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">Clients</a></li>
</ul>
</div>

So what I can't understand is where to start the changes, because my code stuff doesn't follow what has been written here.

Help.... please.....

www.eclecticlightcompany.com

[jfriend]

I'm feeling like the village idiot of smugmug - lots of directions have been posted, and yet I still can't seem to find the path.

It looks like you have a logo image in easy customizer and a navbar that's not in easy customizer. It's very simple to put logo and navbar on the same line if you just do everything in easy customizer. You can't mix and match and have them on the same line. In easy customizer, ll you have to do is pick the drop-down that says you want the navbar to the right of the banner. I'd suggest you go that way. Your banner image will need to be significantly smaller in order to fit properly. Remove your current navbar and make a new one in easy customizer.

[AmyBooo]

The HTML/CSS isn't quite right for your banner/navbar which can cause differences among browsers.

I would suggest you change the way you lay out your header. First, put the navbar before the banner in your HTML. Then, remove the float: left from your banner in all circumstances in your CSS. You don't want your banner to be float. This will position your navbar to the right edge, then your banner will naturally fall on the left and the banner will properly define the height of your header.

Then, add this CSS to properly hide your navbar on the homepage:

.homepage #navcontainer {display: none;}

After you make this change to your header, you may find that some other position things are off because you may have compensated for the faulty header design with other CSS. Those will be easy to fix.

Then, move the <link href="..favicon.ico" ..> code to the HEAD section of customization. That's where it properly belongs - it does not belong in your custom header.

After you've done these things, we can look at other pages and see how they are working.

FYI, I think it's kind of cryptic to make your viewer guess that they have to click on the main image to go anywhere in your site. That was not obvious to me.

Hey John,

I made all of those changes and now my site is really messed up. I took your advice by putting the navbar on the homepage, but I don't want it to be so far off to the right. What should I do next?

[jfriend]

Hey John,

I made all of those changes and now my site is really messed up. I took your advice by putting the navbar on the homepage, but I don't want it to be so far off to the right. What should I do next? You probably want a containing div around both banner and navbar like this:

<div id="myHeader">
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/7520152_NVBtP">About</a></li>
<li><a href="/gallery/7535517_Ui7Lq/1/554833299_sj3VS">People</a></li>
<li><a href="/gallery/8887855_wHT4c/1/589315579_9Upci">Snow</a></li>
<li><a href="/gallery/8442700_SAtv4/1/561923465_GdYQs">Environment</a></li>
<li><a href="/gallery/7522029_Xyqhj">Contact</a></li>
<li><a href="/gallery/10376133_bvgMe/">Prints &amp; Proofs</a></li>
</ul>
</div>
<div id="my_banner"> </div>
</div>


Then, change all your CSS to this:

#myHeader {width: 950px; margin: 0 auto;}

#my_banner {
width: 430px;
height: 75px;
background: url(http://www.powderphoto.com/photos/831149769_zb7No-O.jpg) no-repeat;
}

#navcontainer {
float: right;
margin-top: 34px;
}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}


#navcontainer ul li a {
text-decoration: none;
font-weight: bold;
padding: .2em 0.4em;
color: #58bdda;
border-right: outset #fff 1px;
background-color: none;
font-style: bold;

}

#navcontainer ul li a:hover {
font-weight: bold;
color: #58bdda;
background-color: none;
border-top: dotted #fff 2px;
border-bottom: dotted #fff 2px;
}


.category_Other #my_banner {
height: 75px;
background: url(http://www.powderphoto.com/photos/831149769_zb7No-O.jpg) no-repeat;
}

.category_Weddings #my_banner {
height: 75px;
background: url(http://www.powderphoto.com/photos/797155931_GQXDb-O.jpg) no-repeat;
}
.category_People #my_banner {
height: 75px;
background: url(http://www.powderphoto.com/photos/831149769_zb7No-O.jpg) no-repeat;
}

.category_Vacation #my_banner {
height: 75px;
background: url(http://www.powderphoto.com/photos/831149769_zb7No-O.jpg) no-repeat;
}

.category_Snowboarding #my_banner {
height: 75px;
background: url(http://www.powderphoto.com/photos/831149769_zb7No-O.jpg) no-repeat;
}

#homepage,
#bioBox {
margin: 0 auto;
width: 850px;
height: 500px;
}

#bioBox .photo {
display: none;
}

#bioBox .boxTop {display:none !important;}
.homepage #breadcrumb {display:none;}

.homepage .boxBottom {
background: #000 !important;

}

#userBio {
text-align: center !important;
}

.title {
color: #58bdda;
}

#userHome {
display: none;
}

#userName {
display: none;
}


.homepage #my_banner {
display: block;
}

#bioText {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;
}


#breadCrumbTrail {display:none;}

#feeds {
display:none;
}

/* turn off the login link on the minifooter */
.loginLink {
display: none;
}

/* turn off the cart link on the minifooter */
.cartlink_footer {
display: none;
}

#photoKeywords {
display: none;
}

/* removes the full-screen slideshow buttons */
.play_slideshow {
display: none;
}

.notLoggedIn #shareButton {display:none;}

/* hide album navigation from About page */
.gallery_7520152 .albumNav {display:none;}

/* hide album navigation from Snow page */
.gallery_8887855 .albumNav {display:none;}

/* hide album navigation from About page */
.gallery_8442700 .albumNav {display:none;}

/* hide album navigation from About page */
.gallery_7535517 .albumNav {display:none;}

/* hide album navigation from Contact page */
.gallery_7522029 .albumNav {display:none;}

/* hide album navigation from Prints page */
.gallery_10376133 .albumNav {display:none;}

/* hide album navigation from Prints page */
.gallery_10397217 .albumNav {display:none;}


That will give you this on the homepage:

http://content.screencast.com/users/jfriend/folders/Jing/media/5e7cde6c-013b-4745-9d6a-e68b51da1914/2010-04-09_1331.png

[AmyBooo]

You probably want a containing div around both banner and navbar like this:

<div id="myHeader">
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/7520152_NVBtP">About</a></li>
<li><a href="/gallery/7535517_Ui7Lq/1/554833299_sj3VS">People</a></li>
<li><a href="/gallery/8887855_wHT4c/1/589315579_9Upci">Snow</a></li>
<li><a href="/gallery/8442700_SAtv4/1/561923465_GdYQs">Environment</a></li>
<li><a href="/gallery/7522029_Xyqhj">Contact</a></li>
<li><a href="/gallery/10376133_bvgMe/">Prints &amp; Proofs</a></li>
</ul>
</div>
<div id="my_banner"> </div>
</div>


Then, change all your CSS to this:

#myHeader {width: 950px; margin: 0 auto;}

#my_banner {
width: 430px;
height: 75px;
background: url(http://www.powderphoto.com/photos/831149769_zb7No-O.jpg) no-repeat;
}

#navcontainer {
float: right;
margin-top: 34px;
}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}


#navcontainer ul li a {
text-decoration: none;
font-weight: bold;
padding: .2em 0.4em;
color: #58bdda;
border-right: outset #fff 1px;
background-color: none;
font-style: bold;

}

#navcontainer ul li a:hover {
font-weight: bold;
color: #58bdda;
background-color: none;
border-top: dotted #fff 2px;
border-bottom: dotted #fff 2px;
}


.category_Other #my_banner {
height: 75px;
background: url(http://www.powderphoto.com/photos/831149769_zb7No-O.jpg) no-repeat;
}

.category_Weddings #my_banner {
height: 75px;
background: url(http://www.powderphoto.com/photos/797155931_GQXDb-O.jpg) no-repeat;
}
.category_People #my_banner {
height: 75px;
background: url(http://www.powderphoto.com/photos/831149769_zb7No-O.jpg) no-repeat;
}

.category_Vacation #my_banner {
height: 75px;
background: url(http://www.powderphoto.com/photos/831149769_zb7No-O.jpg) no-repeat;
}

.category_Snowboarding #my_banner {
height: 75px;
background: url(http://www.powderphoto.com/photos/831149769_zb7No-O.jpg) no-repeat;
}

#homepage,
#bioBox {
margin: 0 auto;
width: 850px;
height: 500px;
}

#bioBox .photo {
display: none;
}

#bioBox .boxTop {display:none !important;}
.homepage #breadcrumb {display:none;}

.homepage .boxBottom {
background: #000 !important;

}

#userBio {
text-align: center !important;
}

.title {
color: #58bdda;
}

#userHome {
display: none;
}

#userName {
display: none;
}


.homepage #my_banner {
display: block;
}

#bioText {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;
}


#breadCrumbTrail {display:none;}

#feeds {
display:none;
}

/* turn off the login link on the minifooter */
.loginLink {
display: none;
}

/* turn off the cart link on the minifooter */
.cartlink_footer {
display: none;
}

#photoKeywords {
display: none;
}

/* removes the full-screen slideshow buttons */
.play_slideshow {
display: none;
}

.notLoggedIn #shareButton {display:none;}

/* hide album navigation from About page */
.gallery_7520152 .albumNav {display:none;}

/* hide album navigation from Snow page */
.gallery_8887855 .albumNav {display:none;}

/* hide album navigation from About page */
.gallery_8442700 .albumNav {display:none;}

/* hide album navigation from About page */
.gallery_7535517 .albumNav {display:none;}

/* hide album navigation from Contact page */
.gallery_7522029 .albumNav {display:none;}

/* hide album navigation from Prints page */
.gallery_10376133 .albumNav {display:none;}

/* hide album navigation from Prints page */
.gallery_10397217 .albumNav {display:none;}


That will give you this on the homepage:

http://content.screencast.com/users/jfriend/folders/Jing/media/5e7cde6c-013b-4745-9d6a-e68b51da1914/2010-04-09_1331.png

Thanks so much! Looks so much better. Last question: is there a way that I can move the copyright stuff on the homepage below the main image? Thanks.

Amy

[jfriend]

Thanks so much! Looks so much better. Last question: is there a way that I can move the copyright stuff on the homepage below the main image? Thanks.

Amy I don't understand your question. The copyright stuff is showing for me below the main image on the homepage. Are you not seeing that? Or am I not understanding what you're asking about.

Also, can you please add a link to your site to your dgrin signature so it's in every post. Each time I want to help you, I have to scroll back in this long thread to try to find a link to your site.

[Squeb31]

I've been working on customizing my site (and thank you to everyone who writes CSS/html- I've found a lot of great things on the DGrin forum).

My problem is with the nav bar on my site- it displays correctly in Firefox, and Safari, but it's completely wrong on IE (both 7 and 8).

My website is http://www.sunbeamimages.com/ And if you launch the site with IE compared to firefox you'll immediately be able to see the difference.

I'm trying to fix the CSS so that the nav bar will display the same way in IE as it does in firefox/safari (i.e. a single horizontal bar, not the crazy table that IE shows).

Any and all help will be appreciated!
thanks

[jfriend]

I've been working on customizing my site (and thank you to everyone who writes CSS/html- I've found a lot of great things on the DGrin forum).

My problem is with the nav bar on my site- it displays correctly in Firefox, and Safari, but it's completely wrong on IE (both 7 and 8).

My website is http://www.sunbeamimages.com/ And if you launch the site with IE compared to firefox you'll immediately be able to see the difference.

I'm trying to fix the CSS so that the nav bar will display the same way in IE as it does in firefox/safari (i.e. a single horizontal bar, not the crazy table that IE shows).

Any and all help will be appreciated!
thanks First off, change all occurrences of this:

[if IE 7]

to this:

[if gte IE 7]

[Squeb31]

First off, change all occurrences of this:

[if IE 7]

to this:

[if gte IE 7]


Wow, that was fast! Making that change restored the nav bar to the proper layout, but I am still missing the "contact" box (the last box on the nav bar)in IE.

Thanks for your help with this.

[jfriend]

Wow, that was fast! Making that change restored the nav bar to the proper layout, but I am still missing the "contact" box (the last box on the nav bar)in IE.

Thanks for your help with this. Quite a few misplaced tags. Replace your navbar with this:

<div align="center">
<div class="menu">
<ul>
<li><a href="http://www.sunbeamimages.com" title="Sunbeam Images">Home</a></li>
<li><a href="http://www.sunbeamimages.com/People/People/11784495" title="People">People</a></li>
<li><a class="drop" href="http://www.sunbeamimages.com/Places/" title="Places">Places »<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.sunbeamimages.com/Places/Lake-Winnipesaukee/11773749">Lake Winnipesaukee</a></li>
<li><a href="http://www.sunbeamimages.com/Places/Tempe-AZ/8610237">Tempe AZ</a></li>
<li><a href="http://www.sunbeamimages.com/Places/England/8569377">England</a></li>
<li><a href="http://www.sunbeamimages.com/Places/Ireland/8245177">Ireland</a></li>
<li><a href="http://www.sunbeamimages.com/Places/Cape-Cod/8263723">Cape Cod</a></li>
<li><a href="http://www.sunbeamimages.com/Places/Everywhere-Else/11773744">Everywhere Else</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.sunbeamimages.com/Things/Things/11784600" title="Things">Things</a></li>
<li><a href="http://www.sunbeamimages.com/Bio/About-The-Photographer/11815193" title="About the photographer">The Photographer</a></li>
<li><a href="http://www.sunbeamimages.com/" title="Contact the photographer">Contact</a>
</ul>
</div>
</div>

[Squeb31]

Quite a few misplaced tags. Replace your navbar with this:

<div align="center">
<div class="menu">
<ul>
<li><a href="http://www.sunbeamimages.com" title="Sunbeam Images">Home</a></li>
<li><a href="http://www.sunbeamimages.com/People/People/11784495" title="People">People</a></li>
<li><a class="drop" href="http://www.sunbeamimages.com/Places/" title="Places">Places »<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.sunbeamimages.com/Places/Lake-Winnipesaukee/11773749">Lake Winnipesaukee</a></li>
<li><a href="http://www.sunbeamimages.com/Places/Tempe-AZ/8610237">Tempe AZ</a></li>
<li><a href="http://www.sunbeamimages.com/Places/England/8569377">England</a></li>
<li><a href="http://www.sunbeamimages.com/Places/Ireland/8245177">Ireland</a></li>
<li><a href="http://www.sunbeamimages.com/Places/Cape-Cod/8263723">Cape Cod</a></li>
<li><a href="http://www.sunbeamimages.com/Places/Everywhere-Else/11773744">Everywhere Else</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.sunbeamimages.com/Things/Things/11784600" title="Things">Things</a></li>
<li><a href="http://www.sunbeamimages.com/Bio/About-The-Photographer/11815193" title="About the photographer">The Photographer</a></li>
<li><a href="http://www.sunbeamimages.com/" title="Contact the photographer">Contact</a>
</ul>
</div>
</div>


Thanks so much- that fixed the problem. I'd like to say I won't have any more questions... but I'm sure I will eventually. I appreciate the help!

[jdgphotoboy]

Good evening everyone...

It's been a couple of weeks since I've been on but I am now in the process of amp'n my website, namely my navbar that will include javascript. I have it all put together for the most part but am wondering how I integrate it into the Smugmug advanced customization section without jackin' it all up.

Question(s)....Where do I put the script? Do I include with the HTML coding or in the CSS section?

So any of you Script muggers know how I can do this effectively and help me out it would be appreciated.... :barb

[jfriend]

Good evening everyone...

It's been a couple of weeks since I've been on but I am now in the process of amp'n my website, namely my navbar that will include javascript. I have it all put together for the most part but am wondering how I integrate it into the Smugmug advanced customization section without jackin' it all up.

Question(s)....Where do I put the script? Do I include with the HTML coding or in the CSS section?

So any of you Script muggers know how I can do this effectively and help me out it would be appreciated.... :barbIt's a bit hard to answer without seeing what you have. The general answer is that CSS (and only CSS) goes into the CSS section of the site-wide-customization. Javascript (and only Javascript) goes into the bottom javascript section of the site-wide-customization. In the custom header field, you would put the HTML for your navbar and you could optionally include javascript (in script tags) and CSS (in style tags), though it's generally more efficient to put them in their own sections (because then it can be cached more efficiently).

[iSYTE]

The text in my Nav Bar is not spacing equally across. Also, when I click to another page the text sometimes wraps to another line. What the heck is happening?

www.isyteimages.com

Thanks!

[jfriend]

The text in my Nav Bar is not spacing equally across. Also, when I click to another page the text sometimes wraps to another line. What the heck is happening?

www.isyteimages.com (http://www.isyteimages.com)

Thanks! Your navbar is declared to have uniform width items rather than uniform spacing between items. To change it to uniform spacing, go to this block of CSS and remove the red lines and add the green line:

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 11pt; /* main buttons */
color: #e55202; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 72px; /* main box width */
height: 20px; /* main box height */
border: 0px solid red; /* start your design with borders on, easier to position DD's & FO's */
border-width: 0px 0px 0px 0px;
background: #000000; /* main button color */
padding-left: 8px;
padding: 0 10px;
line-height: 20px; /* positions text up/down in box */
}


You can adjust the 10px to your liking.

[Squeb31]

I'm not sure what I changed, but my nav bar is now split into separate buttons and there is no space below it so everything practically overlaps.

http://www.sunbeamimages.com

What I'd like is for the nav bar buttons to be connected in a continuous bar (which they used to be...) and to add some spacing below the bar so everything doesn't look so crowded.

Since I'm not sure how I broke this, I don't want to start randomly changing things and make it worse. Help is appreciated!
thanks
Deb

[jfriend]

I'm not sure what I changed, but my nav bar is now split into separate buttons and there is no space below it so everything practically overlaps.

http://www.sunbeamimages.com

What I'd like is for the nav bar buttons to be connected in a continuous bar (which they used to be...) and to add some spacing below the bar so everything doesn't look so crowded.

Since I'm not sure how I broke this, I don't want to start randomly changing things and make it worse. Help is appreciated!
thanks
Deb Get rid of the line in red below:

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none;
color:#282828;
width:100px; /* Defines the main box dimensions. */
height:30px; /*How tall your cells are*/
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#758279;
padding-left:10px;
line-height:29px; /*Adjust this to vertically center your text in each cell.
Should be about the same as height. */

z-index:99;
}

You can set the width for the a tag or the li tag, but not both or you get the behavior you saw. You also have a width for the li tag set to 125px.

[Squeb31]

Get rid of the line in red below:

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none;
color:#282828;
width:100px; /* Defines the main box dimensions. */
height:30px; /*How tall your cells are*/
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#758279;
padding-left:10px;
line-height:29px; /*Adjust this to vertically center your text in each cell.
Should be about the same as height. */

z-index:99;
}
You can set the width for the a tag or the li tag, but not both or you get the behavior you saw. You also have a width for the li tag set to 125px.

Thank you- that fixed it. I didn't realize I had set the width in two places.

The breadcrumb text and buttons (share, slideshow) still show up with no (or very little) space between that line and the nav bar. Where in the code can I add additional space between those two lines?

As always... thanks for your help!

[jfriend]

Thank you- that fixed it. I didn't realize I had set the width in two places.

The breadcrumb text and buttons (share, slideshow) still show up with no (or very little) space between that line and the nav bar. Where in the code can I add additional space between those two lines?

As always... thanks for your help! Because the menu items are all float, the menu needs an appropriately declared height that matches it's contents. Add the line in red:

.menu ul {
padding:0px;
margin:0;
list-style-type:none;
height: 31px;
}
If that's too much separation below the navbar, then reduce this margin number (shown in red):

.menu {
margin: auto;
padding:2px 0px 15px 0px;
position:relative; /*Make the container moveable*/
width:750px; /*Main bar total width*/
font-size:1.0em;
font-family: Comic Sans MS, verdana;
color: #282828
padding-bottom:45px; /*Padding between the bottom of your mainbar and the rest
of your page */
}

[Squeb31]

Because the menu items are all float, the menu needs an appropriately declared height that matches it's contents. Add the line in red:

.menu ul {
padding:0px;
margin:0;
list-style-type:none;
height: 31px;
}
If that's too much separation below the navbar, then reduce this margin number (shown in red):

.menu {
margin: auto;
padding:2px 0px 15px 0px;
position:relative; /*Make the container moveable*/
width:750px; /*Main bar total width*/
font-size:1.0em;
font-family: Comic Sans MS, verdana;
color: #282828
padding-bottom:45px; /*Padding between the bottom of your mainbar and the rest
of your page */
}

Perfect- I assumed it was a padding value that needed to be set/changed but I wasn't sure which one to change.

One final question- the photo viewing size for all my images is defaulting to medium- is there a way to set that default to large?
I've seen the instructions for stretching (which doesn't seem to be having any effect) and how it's done if using the smugmug style- but since I am not that option isn't available.

Actually, since this is no longer a nav bar question let me know if I should post this question in the general customization forum and I'll create a new thread there.

thanks!

[jfriend]

Perfect- I assumed it was a padding value that needed to be set/changed but I wasn't sure which one to change.

One final question- the photo viewing size for all my images is defaulting to medium- is there a way to set that default to large?
I've seen the instructions for stretching (which doesn't seem to be having any effect) and how it's done if using the smugmug style- but since I am not that option isn't available.

Actually, since this is no longer a nav bar question let me know if I should post this question in the general customization forum and I'll create a new thread there.

thanks! If you're talking about the filmstrip view which I saw in one of your galleries, it only comes in one size and is not customizable. If you're asking about a different view, please be more specific and include a link to that gallery. Smugmug is no longer enhancing that view and has not updated it to show larger images.

[Squeb31]

If you're talking about the filmstrip view which I saw in one of your galleries, it only comes in one size and is not customizable. If you're asking about a different view, please be more specific and include a link to that gallery. Smugmug is no longer enhancing that view and has not updated it to show larger images.

It's all galleries- for example http://www.sunbeamimages.com/Travel/Ireland/8245177_EN5Rx

Switching the drop-down "photo viewing sizes" to large for each gallery seems to have solved the problem. I just thought I had done that before and that it wasn't sticky, but Ive closed and opened the browser and it seems to be remaining set to large.

Thanks again for the quick responses.

[jfriend]

It's all galleries- for example http://www.sunbeamimages.com/Travel/Ireland/8245177_EN5Rx

Switching the drop-down "photo viewing sizes" to large for each gallery seems to have solved the problem. I just thought I had done that before and that it wasn't sticky, but Ive closed and opened the browser and it seems to be remaining set to large.

Thanks again for the quick responses. Just so you know, the drop-down only changes it in your browser, not in your viewer's browsers. Your viewers would also have to change it to see large.

[Squeb31]

Just so you know, the drop-down only changes it in your browser, not in your viewer's browsers. Your viewers would also have to change it to see large.

Doh, I knew that seemed too simple to be the answer. I guess I'll have to look into other view options (and just when I was almost "done" too... isn't that always the way!)

Out of curiosity- do you have any idea why the filmstrip view is no longer being supported/updated? It seems like that would be a popular view to use and so odd that it's being dropped.

[jfriend]

Out of curiosity- do you have any idea why the filmstrip view is no longer being supported/updated? It seems like that would be a popular view to use and so odd that it's being dropped.I don't know.

[Cujo]

Hello, having a problem linking my galleries page from the nav bar, can you take a look see?

Thanks!

www.garyesmanphotography.com

[jfriend]

Hello, having a problem linking my galleries page from the nav bar, can you take a look see?

Thanks!

www.garyesmanphotography.com (http://www.garyesmanphotography.com) The proper link is:

<li><a href="/galleries">Galleries</a></li>

not:

<li><a href="/garyesmanphotography.com/galleries">Galleries</a></li>



And, then you need to enable your gallery display in the Homepage Layout button.

[Cujo]

The proper link is:

<li><a href="/galleries">Galleries</a></li>

not:

<li><a href="/garyesmanphotography.com/galleries">Galleries</a></li>



And, then you need to enable your gallery display in the Homepage Layout button.



Thank you John! That was a quick and easy fix!

[vbetz]

Hoping someone could help me with my nav bar, please.
My website is www.valeriebetzphotography.com (http://www.valeriebetzphotography.com)

So I am finally attempting the highly sought-after drop down nav bar. I would like for it to be left justified in-line with my header much like the SM Nav Bar builder in easy-customizer created(currently seen on page top left).

The only drop down I want is under Galleries - three menu options Lifetimes, Love Stories, and Serendipity (in that order). Solid black no background color changes when highlighted etc and text(#93A843).

I used the CSS found on page 1 of this thread and modified it as I saw fit.

Now the result of the code place is good links and great color but;
- placement and organization are pretty far off
- and I am hoping I can add lines or dots between menu options for separation like I have now

I would greatly appreciate any suggestion for how to fix my code.

[Allen]

Hoping someone could help me with my nav bar, please.
My website is www.valeriebetzphotography.com (http://www.valeriebetzphotography.com)

So I am finally attempting the highly sought-after drop down nav bar. I would like for it to be left justified in-line with my header much like the SM Nav Bar builder in easy-customizer created(currently seen on page top left).

The only drop down I want is under Galleries - three menu options Lifetimes, Love Stories, and Serendipity (in that order). Solid black no background color changes when highlighted etc and text(#93A843).

I used the CSS found on page 1 of this thread and modified it as I saw fit.

Now the result of the code place is good links and great color but;
- placement and organization are pretty far off
- and I am hoping I can add lines or dots between menu options for separation like I have now

I would greatly appreciate any suggestion for how to fix my code. IE is messed up which means you have some errors in your html.
Take a look at the html in this page. All levels are repetitive so each should look the same.
http://allen-steve.smugmug.com/gallery/2327835
Some troubleshooting hints in this post.
http://www.dgrin.com/showpost.php?p=1302836&postcount=4386

I would also recommend using this CSS, seems to be easier to set it all up.

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto 20px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:500px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:130px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:auto; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12pt;
text-decoration:none;
color:#444;
background:#eee;
border:1px solid #222;
border-width:1px 1px 1px 1px;
font-family: Comic Sans MS, verdana, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 10px;
min-width: 100px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:130px; w\idth:130px;}

/* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#eee;} /* w/3rd */

/* style the second level hover */
.menu ul ul a.drop:hover {background:#eee;}
.menu ul ul :hover > a.drop {background:#eee;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#eee;} /* not FF */

/* style the third level hover */
.menu ul ul ul a:hover {background:#999;}
.menu ul ul ul :hover > a {background:#999;} /* 3rd (w/o 4th) 4th hover */

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:100px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* position the third level flyout menu */
.menu ul ul ul {
left:122px;
top:0;
width:140px;
}

/* position the fourth level flyout menu */
.menu ul ul ul ul {
left:132px;
top:0;
width:100px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#444;
background:#eee;
height:25px;
line-height:25px;
width:100px;
}

.menu ul ul :hover > a.drop {background:#999;} /* 2nd w/3rd */

/* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
color:#444; /* hover 2nd > 3rd & 4th */
background:#eee; /* hover 3rd > 4th */
height:25px;
line-height:25px;
width:110px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:120px; w\idth:120px;}

/* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
color:#444;
background:#999;
}

/* main hover */
.menu :hover > a, .menu ul ul :hover > a {
color:#444;
background:#999;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul {visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul {visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */
On lines with no drop, end them with </a></li>
<li><a href="http://www.valeriebetzphotography.com/Other/ContactMe/11673591_ucNWs" title="About">About Me<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li> like this
<li><a href="http://www.valeriebetzphotography.com/Other/ContactMe/11673591_ucNWs" title="About">About Me</a></li>

[Cujo]

Hello, can you take a peek at my site and see how I can raise the nav bar up with keeping it on the right. Must have done something wrong with the coding, Would like it lined up with the banner. Thanks!

www.garyesmanphotography.com

[Allen]

Hello, can you take a peek at my site and see how I can raise the nav bar up with keeping it on the right. Must have done something wrong with the coding, Would like it lined up with the banner. Thanks!

www.garyesmanphotography.com (http://www.garyesmanphotography.com)
Remove the banner/logo from Easy Customizer and change these like this.

#my_banner {
width: 400px;
height: 37px;
margin: 0;
background: url(http://www.garyesmanphotography.com/photos/840928949_LsUWD-O.jpg) no-repeat;
}

#my_header {
border-bottom: 1px solid #CCC;
margin: 5px 20px 15px; /* top right/left bottom*/
padding: 0 20px;
}

/*Navbar*/
#navcontainer {
float: right;
margin-top: 10px;
}

[vbetz]

IE is messed up which means you have some errors in your html.
Take a look at the html in this page. All levels are repetitive so each should look the same.
http://allen-steve.smugmug.com/gallery/2327835
Some troubleshooting hints in this post.
http://www.dgrin.com/showpost.php?p=1302836&postcount=4386

I would also recommend using this CSS, seems to be easier to set it all up.

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto 20px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:500px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:130px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:auto; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12pt;
text-decoration:none;
color:#444;
background:#eee;
border:1px solid #222;
border-width:1px 1px 1px 1px;
font-family: Comic Sans MS, verdana, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 10px;
min-width: 100px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:130px; w\idth:130px;}

/* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#eee;} /* w/3rd */

/* style the second level hover */
.menu ul ul a.drop:hover {background:#eee;}
.menu ul ul :hover > a.drop {background:#eee;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#eee;} /* not FF */

/* style the third level hover */
.menu ul ul ul a:hover {background:#999;}
.menu ul ul ul :hover > a {background:#999;} /* 3rd (w/o 4th) 4th hover */

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:100px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* position the third level flyout menu */
.menu ul ul ul {
left:122px;
top:0;
width:140px;
}

/* position the fourth level flyout menu */
.menu ul ul ul ul {
left:132px;
top:0;
width:100px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#444;
background:#eee;
height:25px;
line-height:25px;
width:100px;
}

.menu ul ul :hover > a.drop {background:#999;} /* 2nd w/3rd */

/* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
color:#444; /* hover 2nd > 3rd & 4th */
background:#eee; /* hover 3rd > 4th */
height:25px;
line-height:25px;
width:110px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:120px; w\idth:120px;}

/* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
color:#444;
background:#999;
}

/* main hover */
.menu :hover > a, .menu ul ul :hover > a {
color:#444;
background:#999;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul {visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul {visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */

On lines with no drop, end them with </a></li><li><a href="http://www.valeriebetzphotography.com/Other/ContactMe/11673591_ucNWs" title="About">About Me<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
like this<li><a href="http://www.valeriebetzphotography.com/Other/ContactMe/11673591_ucNWs" title="About">About Me</a></li>
Thanks Allen!

I'm wondering if you could also direct me to the line(s) which would help me move the nav bar up to the top in lign with my header but right justified?

I tried adjusting a few of the size, spacing lines but nothing I've done thus far seemed to alter the location of the nav bar.

Your help is so much appreciated!

[Allen]

Thanks Allen!

I'm wondering if you could also direct me to the line(s) which would help me move the nav bar up to the top in lign with my header but right justified?

I tried adjusting a few of the size, spacing lines but nothing I've done thus far seemed to alter the location of the nav bar.

Your help is so much appreciated!
Remove the banner/logo from Easy Customizer and change your header html to this.

<div id="my_header">

<div class="menu">
<ul>
<li><a href="/">HOME</a></li>
<li><a class="drop" href="/Galleries">Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Galleries/Lifetimes">Lifetimes</a></li>
<li><a href="/Galleries/Love-Stories">Love Stories</a></li>
<li><a href="/Galleries/Serendipity">Serendipity</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/11675395_pErCy">Services</a></li>
<li><a href="/Clients">Clients</a></li>
<li><a href="/gallery/11673591_ucNWs">About</a></li>
</ul>
</div>

<div id="my_banner"></div>

</div> <!-- closes my_header -->

btw, changed the links to relative links. It leaves off the red part and starts with the /.
http://www.valeriebetzphotography.com/whatever is here

Add these to your CSS

#my_banner {
width: 450px;
height: 52px;
margin: 0;
background: url(http://photos.smugmug.com/photos/824003016_HbMmZ-O.jpg) no-repeat;
}

#my_header {
border-bottom: 1px solid #444; /* optional - can remove */
margin: 5px 20px 15px; /* top right/left bottom*/
padding: 0 20px;
}
Change this existing rule to like this.

/* style the outer div to give it width */
.menu {
float: right;
margin-top: 15px;
position: relative;
z-index:99;
width:620px; /* Main bar total width, minimize to center */
} /* and not wrap to two lines */

[vbetz]

Remove the banner/logo from Easy Customizer and change your header html to this.

<div id="my_header">

<div class="menu">
<ul>
<li><a href="/">HOME</a></li>
<li><a class="drop" href="/Galleries">Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Galleries/Lifetimes">Lifetimes</a></li>
<li><a href="/Galleries/Love-Stories">Love Stories</a></li>
<li><a href="/Galleries/Serendipity">Serendipity</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/11675395_pErCy">Services</a></li>
<li><a href="/Clients">Clients</a></li>
<li><a href="/gallery/11673591_ucNWs">About</a></li>
</ul>
</div>

<div id="my_banner"></div>

</div> <!-- closes my_header -->

btw, changed the links to relative links. It leaves off the red part and starts with the /.
http://www.valeriebetzphotography.com/whatever is here

Add these to your CSS

#my_banner {
width: 450px;
height: 52px;
margin: 0;
background: url(http://photos.smugmug.com/photos/824003016_HbMmZ-O.jpg) no-repeat;
}

#my_header {
border-bottom: 1px solid #444; /* optional - can remove */
margin: 5px 20px 15px; /* top right/left bottom*/
padding: 0 20px;
}
Change this existing rule to like this.

/* style the outer div to give it width */
.menu {
float: right;
margin-top: 15px;
position: relative;
z-index:99;
width:620px; /* Main bar total width, minimize to center */
} /* and not wrap to two lines */


Allen your prompt, complete, and instructive reply was awesome. My nav bar looks great. and I appreciate the tip on the relative links as I didn't know that was an option!

One last thing I want to adjust is the margin on the right. I tried to adjust what is currently labeled as auto and also tried adjusting the html to match the margin of the banner but didn't get the results I am looking for. I love the margin/position of the nav bar and want that to reflect symetrically on the right.

[Allen]

Allen your prompt, complete, and instructive reply was awesome. My nav bar looks great. and I appreciate the tip on the relative links as I didn't know that was an option!

One last thing I want to adjust is the margin on the right. I tried to adjust what is currently labeled as auto and also tried adjusting the html to match the margin of the banner but didn't get the results I am looking for. I love the margin/position of the nav bar and want that to reflect symetrically on the right.


/* style the outer div to give it width */
.menu {
float: right;
margin-top: 15px;
position: relative;
z-index:99;
width:450px; /* Main bar total width, minimize to center */
} /* and not wrap to two lines */

[Cujo]

Remove the banner/logo from Easy Customizer and change these like this.

#my_banner {
width: 400px;
height: 37px;
margin: 0;
background: url(http://www.garyesmanphotography.com/photos/840928949_LsUWD-O.jpg) no-repeat;
}

#my_header {
border-bottom: 1px solid #CCC;
margin: 5px 20px 15px; /* top right/left bottom*/
padding: 0 20px;
}





/*Navbar*/
#navcontainer {
float: right;
margin-top: 10px;
}



PERFECT! Thank you so much! Once again you rock! Gary.

[dperrault]

I used the online tutorial to create a Nav Bar. I would like to have each item in the nav bar menu linked to an empty unlisted Gallery.

1, Nav Bar Questions
1. How do I add formated text to the gallery (i.e contact info)
2. How do I remove the message "This gallery has no photos yet"

http://www.dphoton.org/gallery/11167728_Co7T9

2. Title - How can I add a title underneth my Banner


Sincerely

Don

www.dphoton.org

[gemgirl]

I've made a navbar to the best of my ability, but there are a couple of quirks that I can't seem to fix. (bjkuterbach.smugmug.com). First of all, on a couple of the navbar titles, I see round dots next to the navbar title (on my computer, they are next to the "Photography" and "Galleries" links; on my iphone, they are next to the "Galleries" and "About Me" links). Please let me know if this shows up on all computers, and what I can do to fix.

Also, I've noticed some "hover" issues with my drop down menus on the navbar. Sometimes I have difficulty getting the hover to stick to a specific drop down item. I hope that makes sense! How can I fix this?

Lastly, is there anyway to make the background of the drop down items transparent? I don't like that the lines show on the sides of the items, and that the black hits the slideshow.

Let me know if I need to copy/paste my current CSS codes.

Thanks!

[Cujo]

Hello, can someone forward the best link with instructions for building a drop down nav bar? Thanks, Gary.

www.garyesmanphotography.com

[jdgphotoboy]

Hello, can someone forward the best link with instructions for building a drop down nav bar? Thanks, Gary.

www.garyesmanphotography.com (http://www.garyesmanphotography.com)

This was a link that I used to begin learning how to create a drop-down menu bar. Give this a shot... I'm also going to find the link that's really user friendly and creates a pretty cool looking navbar for you.

[jdgphotoboy]

This was a link that I used to begin learning how to create a drop-down menu bar. Give this a shot... I'm also going to find the link that's really user friendly and creates a pretty cool looking navbar for you.

Would help if I added the links to those sites. I did in fact find the link to the site that creates css menus with drop-downs. Pretty cool stuff...

http://www.cssmenumaker.com

http://www.allen-steve.smugmug.com

[Cujo]

Thanks John appreciate your time! Will give these a try. Gary.

[Allen]

I've made a navbar to the best of my ability, but there are a couple of quirks that I can't seem to fix. (bjkuterbach.smugmug.com). First of all, on a couple of the navbar titles, I see round dots next to the navbar title (on my computer, they are next to the "Photography" and "Galleries" links; on my iphone, they are next to the "Galleries" and "About Me" links). Please let me know if this shows up on all computers, and what I can do to fix.

Also, I've noticed some "hover" issues with my drop down menus on the navbar. Sometimes I have difficulty getting the hover to stick to a specific drop down item. I hope that makes sense! How can I fix this?

Lastly, is there anyway to make the background of the drop down items transparent? I don't like that the lines show on the sides of the items, and that the black hits the slideshow.

Let me know if I need to copy/paste my current CSS codes.

Thanks!
Change the header nav html to this, fixes some errors. See this page (http://allen-steve.smugmug.com/gallery/2327835) for
reference. Looking at your CSS next, will be back.

<!-- CSS Dropdown Nav Bar -->
<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited by me for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->
<div class="menu">
<ul>
<!-- First Main Menu Item -->
<li><a href="/" title="BJK|Photography">Home</a></li>

<!-- Next Main Menu Item -->
<li><a class="drop" href="/Portfolio" title="Portfolio">Portfolio
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Weddings/Wedding/11174250_9pY46" title="Weddings">Weddings</a></li>
<li><a href="/People/Couples/11222735_AUJ87" title="Couples">Couples</a></li>
<li><a href="/Children/Kids/11262768_kKBPf" title="Children">Children</a></li>
<li><a href="/Portfolio/People/10545331_dPsVL" title="People">People</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->
<li><a class="drop" href="/Photography" title="Photography">Photography
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Nature/Scenery/11226656_r8xxp" title="Scenery">Scenery</a></li>
<li><a href="/Travel/Travel/11226724_kuKqz" title="Travels">Travels</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->
<li><a href="/galleries" title="Galleries">Galleries</a></li>

<!-- Next Main Menu Item -->
<li><a href="/gallery/11222461_KRkHG" title="About the photographer">About Me</a></li>

</ul>
</div>
<!-- End Navbar Code -->

btw, add comment tags around these in your CSS.

/* ABOUT ME */
/* CONTACT */

[Allen]

I've made a navbar to the best of my ability, but there are a couple of quirks that I can't seem to fix. (bjkuterbach.smugmug.com). First of all, on a couple of the navbar titles, I see round dots next to the navbar title (on my computer, they are next to the "Photography" and "Galleries" links; on my iphone, they are next to the "Galleries" and "About Me" links). Please let me know if this shows up on all computers, and what I can do to fix.

Also, I've noticed some "hover" issues with my drop down menus on the navbar. Sometimes I have difficulty getting the hover to stick to a specific drop down item. I hope that makes sense! How can I fix this?

Lastly, is there anyway to make the background of the drop down items transparent? I don't like that the lines show on the sides of the items, and that the black hits the slideshow.

Let me know if I need to copy/paste my current CSS codes.

Thanks!
Change your nav CSS to this. Used a slightly different version that seems
to be easier to format. Worked in all your colors, etc.

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto 10px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:710px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:100px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:140px; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12pt;
text-decoration:none;
text-align: center;
color:#fff;
background:#000;
border:1px solid #fff;
border-width:0 1px 0 1px;
font-family: Segoe Script, Comic Sans MS;
width:140px; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 ;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:140px; w\idth:140px;}

/* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#000;} /* w/3rd */

/* style the second level hover */
.menu ul ul a.drop:hover {background:#000;}
.menu ul ul :hover > a.drop {background:#000;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#000;} /* not FF */

/* style the third level hover */
.menu ul ul ul a:hover {background:#000;}
.menu ul ul ul :hover > a {background:#000;} /* 3rd (w/o 4th) 4th hover */

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:140px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* position the third level flyout menu */
.menu ul ul ul {
left:122px;
top:0;
width:140px;
}

/* position the fourth level flyout menu */
.menu ul ul ul ul {
left:132px;
top:0;
width:140px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#fff;
background:#000;
height:25px;
line-height:25px;
width:119px;
}


.menu ul ul :hover > a.drop {background:#999;} /* 2nd w/3rd */

/* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
color:#fff; /* hover 2nd > 3rd & 4th */
background:#000; /* hover 3rd > 4th */
height:25px;
line-height:25px;
width:140px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:140px; w\idth:140px;}

/* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
color:#AB113F;
background:#000;
}

/* main hover */
.menu :hover > a, .menu ul ul :hover > a {
color:#AB113F;
background:#000;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul {visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul {visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */

[squeener]

Something has broke and I can't figure out how to fix it. I had a separate "search page" that displayed a search box, image tags, etc. But it's went away. I didn't make any changes to it....just noticed it today.

Please help.

http://www.queenerfamily.com/mysearchpage

[Allen]

Something has broke and I can't figure out how to fix it. I had a separate "search page" that displayed a search box, image tags, etc. But it's went away. I didn't make any changes to it....just noticed it today.

Please help.

http://www.queenerfamily.com/mysearchpage I would remove this from your footer. It might be running before the
function is defined in the javascript.
<script>
if (hasPath("mysearchpage"))
YD.addClass(document.body, "mysearchpage");
</script>
And add it like this below the function hasPath in your bottom javascript.
function hasPath(sPath)
{
re = new RegExp("\/" + sPath + "(\/|$)");
return re.test(window.location)
}

if (hasPath("mysearchpage"))
YD.addClass(document.body, "mysearchpage");

[rinkshots]

I just replaced my navbar as part of a site upgrade, and now I can't recall how to get it centered. It is on http://www.rinkshots.com. Any ideas would be appreciated.

Thanks,

Scott

[evilluckycharms]

hi,
i just tweaked my site a bit and now the dropdown navbar disappears every time i move my mouse down to select an option. how can i fix this? i realize a person a few posts above me asked this as well, but someone posted the coding to fix all of his problems at once, and i don't know which part of that coding pertains to the dropdown issue. Thanks in advance :)

site: www.photographybyalanahawker.com

[tuningpeg6]

hi,
i just tweaked my site a bit and now the dropdown navbar disappears every time i move my mouse down to select an option. how can i fix this? i realize a person a few posts above me asked this as well, but someone posted the coding to fix all of his problems at once, and i don't know which part of that coding pertains to the dropdown issue. Thanks in advance :)

site: www.photographybyalanahawker.com

I'm at kenquachphotography.com

My navbar is too wide for my liking. The words are so spread out and there's a lot of space in between.

How do I make it so that the words come closer. As you can see some such as CONTACT and BLOG are just too far apart, others as well.

thanks!

[Allen]

I'm at kenquachphotography.com

My navbar is too wide for my liking. The words are so spread out and there's a lot of space in between.

How do I make it so that the words come closer. As you can see some such as CONTACT and BLOG are just too far apart, others as well.

thanks!
Change width to min-width. Play with the min-width and R/L padding.

/*define the top menu hover style*/
.menu li a, .menu li a:visited {
margin-right:1px;
display:block;
text-decoration:none;
text-align:center;
min-width: 60px;
padding: 0 5px; /* top/bottom R/L */
color:#ffffff;
background: #000000;
float:left;
height:20px;
line-height:20px;
border:1px solid;
border-color: #000000 #000000 #080808 #000000;
font-weight:bold;
outline:none;
}

Re-adjust the width to center the nav.

/*1.2.1_Configure the Navbar Size and Position*/
#navcontainer {
z-index: 999;
width: 710px;
margin: 10px auto;
_margin-bottom:-15px;
padding: 0px;
position: relative;
top: -8px;
left: 5px;
background: transparent;
}

[Allen]

hi,
i just tweaked my site a bit and now the dropdown navbar disappears every time i move my mouse down to select an option. how can i fix this? i realize a person a few posts above me asked this as well, but someone posted the coding to fix all of his problems at once, and i don't know which part of that coding pertains to the dropdown issue. Thanks in advance :)

site: www.photographybyalanahawker.com (http://www.photographybyalanahawker.com)
Change the top in this to 30px and see if the gap disappears. If not try 29 > 28 > ...

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:100px; /* Size of the daughter cells */
}

[Allen]

I just replaced my navbar as part of a site upgrade, and now I can't recall how to get it centered. It is on http://www.rinkshots.com. Any ideas would be appreciated.

Thanks,

Scott
I'm not familiar with the nav code you're using, maybe someone else has an idea.

btw, remove this javascript from your CSS and put it in your bottom javascript.
Also looks like an extra } at the end, might check that.

// fix the pesky pipes

YE.onAvailable("cobrand_footer", function() {this.innerHTML = this.innerHTML.replace(/\||what are feeds\?/gi, '');});
}

[marchex]

For my navbar I'm using the easy customizer tool, for what I wanted to do I was just told to use the easy customizer... anyways in the easy customizer I tried adding a flickr tab, but for the linking I put in my flickr url... but for the linking it just stays on my homepage but it just adds on the url on the end of mlech.com -->

look here and click on the flickr tab for example:
www.mlech.com (http://www.mlech.com)











http://img708.imageshack.us/img708/8061/flickrtab.jpg


So if that can be done I might as well ask this. Just like in the picture posted above if possible can I change the color? I just quickly added it on in photoshop to give an example of what I'm looking for.


thanks to anyone who can help!

[jfriend]

For my navbar I'm using the easy customizer tool, for what I wanted to do I was just told to use the easy customizer... anyways in the easy customizer I tried adding a flickr tab, but for the linking I put in my flickr url... but for the linking it just stays on my homepage but it just adds on the url on the end of mlech.com -->

look here and click on the flickr tab for example:
www.mlech.com (http://www.mlech.com)











http://img708.imageshack.us/img708/8061/flickrtab.jpg


So if that can be done I might as well ask this. Just like in the picture posted above if possible can I change the color? I just quickly added it on in photoshop to give an example of what I'm looking for.


thanks to anyone who can help!put http:// in front of the URL.

[marchex]

Oh that works now... didn't realize that was missing.


anyway I can change the color like I posted above?

thanks a lot!

[jfriend]

Oh that works now... didn't realize that was missing.


anyway I can change the color like I posted above?

thanks a lot!I don't know how to change the color of one item when using easy customizer.

[jdgphotoboy]

What's going on Smugs?! Question for ya and maybe this isn't the right thread for this question. However, How do I code the navbar and my accordian slider in the body of my page to adjust and center itself to the to the different sizes of the users monitors? I'm not sure if I really fully understand the z-index and the repeat-x, y, z, and none quite yet...

Thanks in advance for your help....





/* |||||||||||||||||||||||| */
/* NAVBAR */
/* |||||||||||||||||||||||| */



div#menu {
top:165px;
left:0px;
width:100%;
padding-left:220px; /* ALIGNS MENU BAR */
padding-bottom:30px; /* ALLOWS GIF TO SHOW */
}

/* menu::base */
div#menu {
background: transparent url(http://jdgphotography.smugmug.com/photos/845659702_metqx-L.png) repeat-x scroll 0 0;
position:inherit;
top: 0;
left: 0;
color: #646464;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 150%;
}

ul.menu {
clear: both;
float: none;
cursor: pointer;
z-index: 1;
position: relative;
}

div#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
float: left;
z-index: 2;
position: relative;
}

div#menu li {
position: relative;
margin: 0px;
padding: 0px;
display: block;
overflow: visible;
float: left;
height: 30px;
z-index: 3;
}
/* menu::level1 */
div#menu li a {
height: 30px;
display: block;
float: left;
line-height: 30px;
text-decoration: none;
color: #646464;
overflow: hidden;
z-index: 4;
position: relative;
}

div#menu li span {
color: #646464;
display: block;
padding: 0 15px;
background-repeat: no-repeat;
background-position: 95% 0px;
z-index: 6;
position: relative;
}

div#menu li span.bg {
display: block;
background: transparent url('http://www.jdgphotography.com/photos/838224867_9EXMQ-L-1.png') repeat-x scroll 0pt 100%;
padding: 0;
height: 30px;
z-index: 5;
position: relative;
float: left;
}

div#menu li.current {
font-weight: bold;
}

div#menu li.current ul {
font-weight: normal;
}

/* menu::level2 */
div#menu ul.menu ul {
padding: 0px 0px 10px;
background: transparent url('http://www.jdgphotography.com/photos/838224863_v6XK8-L-1.png') no-repeat scroll 0pt 100%;
_background: transparent url('http://www.jdgphotography.com/photos/838224861_YgK9W-L-1.gif') no-repeat scroll 0pt 100%;
left: -999em;
width: 165px;
position: absolute;
top: 30px;
}

div#menu li:hover ul, div#menu li.sfhover ul {
left: 0px;
z-index: 100;
visibility: visible;
}

div#menu li li {
width: 100%;
text-indent: 0px;
float: none;
height: auto;
}

div#menu li li a, div#menu li li span.separator {
margin: 0px 1px;
padding: 0px;
background: url('http://www.jdgphotography.com/photos/838224869_gHD48-L-1.gif') no-repeat scroll 100% bottom;
height: auto;
float: none;
display: block;
line-height: 25px;
width: 163px;
}

div#menu li li a.parent {
background: url('http://www.jdgphotography.com/photos/838224878_3DsSX-L-1.gif') no-repeat scroll 100% bottom;
}

/* menu::level3 */
div#menu li ul ul {
margin: -31px 0 0 164px;
}

div#menu li:hover ul ul, div#menu li.sfhover ul ul {
border-top: 1px solid #1E1E1E;
}

div#menu li:hover ul ul, div#menu li.sfhover ul ul, div#menu li:hover ul ul ul, div#menu li.sfhover ul ul ul, div#menu li:hover ul ul ul ul, div#menu li.sfhover ul ul ul ul {
left: -999em;
}
div#menu li li:hover ul, div#menu li li.sfhover ul, div#menu li li li:hover ul, div#menu li li li.sfhover ul, div#menu li li li li:hover ul, div#menu li li li li.sfhover ul { left: 0pt; z-index: 100; }

div#menu a:hover {
color: #FFFFFF;
}
div#menu span:hover {
color: #FFFFFF;
}
div#menu li ul span:hover {
color: #FFFFAA;
}

/* |||||||||||||||||||||||| */
/* HOMEPAGE ACCORDIAN */
/* |||||||||||||||||||||||| */

/*CSS for Accordion #hc1*/

#hc1 li{
margin:0 1px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 0; /*Padding inside each content*/
background:url(http://www.jdgphotography.com/photos/845418558_c7ykA-L.png) no-repeat;
}


#hc1 p {
margin-left:125px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#517479;
font-size:16px;
font-style:normal;
}

#hc1 a{
color:#517479;
text-decoration:none;


}

#hc1 {
text-align:left;
margin-top:20px;
width:100%;
}





.haccordion{
margin-left:275px;
padding: 0;
}

.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*leave as is*/
}


.haccordion li{
margin: 0;
padding: 0;
display: block; /*leave as is*/
width: 100%; /*For users with JS disabled: Width of each content*/
height: 400px; /*For users with JS disabled: Height of each content*/
overflow: hidden; /*leave as is*/
float: left; /*leave as is*/
}

.haccordion li .hpanel{
width: 100%; /*For users with JS disabled: Width of each content*/
height: 200px; /*For users with JS disabled: Height of each content*/
}

[jdgphotoboy]

What's going on Smugs?! Question for ya and maybe this isn't the right thread for this question. However, How do I code the navbar and my accordian slider in the body of my page to adjust and center itself to the to the different sizes of the users monitors? I'm not sure if I really fully understand the z-index and the repeat-x, y, z, and none quite yet...

Thanks in advance for your help....





/* |||||||||||||||||||||||| */
/* NAVBAR */
/* |||||||||||||||||||||||| */



div#menu {
top:165px;
left:0px;
width:100%;
padding-left:220px; /* ALIGNS MENU BAR */
padding-bottom:30px; /* ALLOWS GIF TO SHOW */
}

/* menu::base */
div#menu {
background: transparent url(http://jdgphotography.smugmug.com/photos/845659702_metqx-L.png) repeat-x scroll 0 0;
position:inherit;
top: 0;
left: 0;
color: #646464;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 150%;
}

ul.menu {
clear: both;
float: none;
cursor: pointer;
z-index: 1;
position: relative;
}

div#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
float: left;
z-index: 2;
position: relative;
}

div#menu li {
position: relative;
margin: 0px;
padding: 0px;
display: block;
overflow: visible;
float: left;
height: 30px;
z-index: 3;
}
/* menu::level1 */
div#menu li a {
height: 30px;
display: block;
float: left;
line-height: 30px;
text-decoration: none;
color: #646464;
overflow: hidden;
z-index: 4;
position: relative;
}

div#menu li span {
color: #646464;
display: block;
padding: 0 15px;
background-repeat: no-repeat;
background-position: 95% 0px;
z-index: 6;
position: relative;
}

div#menu li span.bg {
display: block;
background: transparent url('http://www.jdgphotography.com/photos/838224867_9EXMQ-L-1.png') repeat-x scroll 0pt 100%;
padding: 0;
height: 30px;
z-index: 5;
position: relative;
float: left;
}

div#menu li.current {
font-weight: bold;
}

div#menu li.current ul {
font-weight: normal;
}

/* menu::level2 */
div#menu ul.menu ul {
padding: 0px 0px 10px;
background: transparent url('http://www.jdgphotography.com/photos/838224863_v6XK8-L-1.png') no-repeat scroll 0pt 100%;
_background: transparent url('http://www.jdgphotography.com/photos/838224861_YgK9W-L-1.gif') no-repeat scroll 0pt 100%;
left: -999em;
width: 165px;
position: absolute;
top: 30px;
}

div#menu li:hover ul, div#menu li.sfhover ul {
left: 0px;
z-index: 100;
visibility: visible;
}

div#menu li li {
width: 100%;
text-indent: 0px;
float: none;
height: auto;
}

div#menu li li a, div#menu li li span.separator {
margin: 0px 1px;
padding: 0px;
background: url('http://www.jdgphotography.com/photos/838224869_gHD48-L-1.gif') no-repeat scroll 100% bottom;
height: auto;
float: none;
display: block;
line-height: 25px;
width: 163px;
}

div#menu li li a.parent {
background: url('http://www.jdgphotography.com/photos/838224878_3DsSX-L-1.gif') no-repeat scroll 100% bottom;
}

/* menu::level3 */
div#menu li ul ul {
margin: -31px 0 0 164px;
}

div#menu li:hover ul ul, div#menu li.sfhover ul ul {
border-top: 1px solid #1E1E1E;
}

div#menu li:hover ul ul, div#menu li.sfhover ul ul, div#menu li:hover ul ul ul, div#menu li.sfhover ul ul ul, div#menu li:hover ul ul ul ul, div#menu li.sfhover ul ul ul ul {
left: -999em;
}
div#menu li li:hover ul, div#menu li li.sfhover ul, div#menu li li li:hover ul, div#menu li li li.sfhover ul, div#menu li li li li:hover ul, div#menu li li li li.sfhover ul { left: 0pt; z-index: 100; }

div#menu a:hover {
color: #FFFFFF;
}
div#menu span:hover {
color: #FFFFFF;
}
div#menu li ul span:hover {
color: #FFFFAA;
}

/* |||||||||||||||||||||||| */
/* HOMEPAGE ACCORDIAN */
/* |||||||||||||||||||||||| */

/*CSS for Accordion #hc1*/

#hc1 li{
margin:0 1px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 0; /*Padding inside each content*/
background:url(http://www.jdgphotography.com/photos/845418558_c7ykA-L.png) no-repeat;
}


#hc1 p {
margin-left:125px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#517479;
font-size:16px;
font-style:normal;
}

#hc1 a{
color:#517479;
text-decoration:none;


}

#hc1 {
text-align:left;
margin-top:20px;
width:100%;
}





.haccordion{
margin-left:275px;
padding: 0;
}

.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*leave as is*/
}


.haccordion li{
margin: 0;
padding: 0;
display: block; /*leave as is*/
width: 100%; /*For users with JS disabled: Width of each content*/
height: 400px; /*For users with JS disabled: Height of each content*/
overflow: hidden; /*leave as is*/
float: left; /*leave as is*/
}

.haccordion li .hpanel{
width: 100%; /*For users with JS disabled: Width of each content*/
height: 200px; /*For users with JS disabled: Height of each content*/
}

Also...How do I get rid of the border around of accordian sliders in the body of my page? They are links and I tried using the {text-decoration:none;} but they're showing up in the color teal...though it looks nice, they're just not supposed to be there...

[jdgphotoboy]

Also...How do I get rid of the border around of accordian sliders in the body of my page? They are links and I tried using the {text-decoration:none;} but they're showing up in the color teal...though it looks nice, they're just not supposed to be there...

I guess I could provide the HTML markup to see what I'm working with...

<div id="hc1" class="haccordion">
<ul>

<li>
<div class="hpanel">
<span id="hc1"><a href="http://www.jdgphotography.com/Client-Access/"><img src="/photos/845533272_fKkBF-L.png" style=" vertical-align:center; text-align:center width:497px; height:297px" /></a>
</span></div>
</li>

<li>
<div class="hpanel">
<span id="hc1"><a href="http://www.jdgphotography.com/Photography/Sessions/11629260_aS9nN"><img src="http://jdgphotography.smugmug.com/photos/845418636_nGsBM-L.png" style=" vertical-align:center; text-align:center width:497px; height:297px" /></a>
</span></div>
</li>

<li>
<div class="hpanel">
<span id="hc1"><a href="http://www.jdgphotography.com/gallery/11270853_iv68Y"><img src="http://jdgphotography.smugmug.com/photos/845418594_U4Nn8-L.png" style=" vertical-align:center; text-align:center width:497px; height:297px" /></a>
</span></div>
</li>

<li>
<div class="hpanel">
<span id="hc1"><a href="http://www.jdgphotography.com/Photography/Contact-Me/11270466_E3sCX"><img src="http://jdgphotography.smugmug.com/photos/845418570_WwAdk-L.png" style=" vertical-align:center; text-align:center width:497px; height:297px" /></a>
</span></div>
</li>

<li>
<div class="hpanel">
<span id="hc1"><a href="http://www.jdgphotography.com/Photography/Guestbook/11619548_6KgAR"><img src="http://jdgphotography.smugmug.com/photos/845418579_Q2jYf-L.png" style=" vertical-align:center; text-align:center width:497px; height:297px" /></a>
</span></div>
</li>

</ul>

<p><span id="hc1"><a href="javascript:haccordion.expandli('hc1', 0)"> Client Access</a> | <a href="javascript:haccordion.expandli('hc1', 1)">Photography Sessions</a> | <a href="javascript:haccordion.expandli('hc1', 2)">Services</a> | <a href="javascript:haccordion.expandli('hc1', 3)">Contact</a> | <a href="javascript:haccordion.expandli('hc1', 4)">Raves</a></span></p>

</div>

[Allen]

What's going on Smugs?! Question for ya and maybe this isn't the right thread for this question. However, How do I code the navbar and my accordian slider in the body of my page to adjust and center itself to the to the different sizes of the users monitors? I'm not sure if I really fully understand the z-index and the repeat-x, y, z, and none quite yet...

Thanks in advance for your help....
... No need to post code.

Looks like everything on your homepage is a set width/graphic. I'd use repeat
across of a small vertical sliver for the top and bottom graphics. Make your
banner text one div with only the text and place a div behind it using a
background repeating across the part with the green.

Your nav and other content can be assigned a width and centered using an
auto R/L margin. Then add position relative to nav and banner parts and
use left: -80px; to move off center to left if you don't want them centered.

[rinkshots]

I used to have multiple nav bars on my web site, and only one would display depending on which category, gallery, etc. I would like to repeat that again, but am unsure how to go about it. Here's my page:

http://www.rinkshots.com (http://www.rinkshots.com/)

I remember that I had to make a separate div for each menu, if I recall, and then make a property in the CSS to hide the menus that I did not want displayed. What I can't remember is if I need to make additional CSS for each nav bar also.

Thanks.

[TPI]

I think I am posting this in the right area. Forgive me if it's not. I am new here and to Smugmug. I have a question? I have my page set up from reading hours of customization threads. But I am now trying to set up a drop down for my Pricing-menu. Here is my page http://thomasphotoimagery.com/

When I set up my header box and css box the menus do not drop down they just spread out like the other menu boxes. I Think I may have mess up in the CSS box. So I have given up all together and settled on the simple menu for now. Is there anyone who can help me set up the drop down menu for my pricing menu? Please. This is how I would like it to go.

Pricing
Standard Portraits
Senior Portraits
Furry Children
Events

Any help is greatly appreciated.
Thanks in Advance.

[Allen]

I think I am posting this in the right area. Forgive me if it's not. I am new here and to Smugmug. I have a question? I have my page set up from reading hours of customization threads. But I am now trying to set up a drop down for my Pricing-menu. Here is my page http://thomasphotoimagery.com/

When I set up my header box and css box the menus do not drop down they just spread out like the other menu boxes. I Think I may have mess up in the CSS box. So I have given up all together and settled on the simple menu for now. Is there anyone who can help me set up the drop down menu for my pricing menu? Please. This is how I would like it to go.

Pricing
Standard Portraits
Senior Portraits
Furry Children
Events

Any help is greatly appreciated.
Thanks in Advance.
Can't troubleshoot without seeing your new nav. You can add the html and
CSS and hide it from your visitors.

Add something like this to your CSS assuming the div name is .menu

.notLoggedIn .menu {display: none;}

Using WebDev we can disable that CSS and see the menu and help.

[bachamp]

What I want to do is have a drop down for the gallery link in the navbar.

It one of the links in the Navbar is "Galleries"
If you clicked on that it would take you to a galleries (shows all categories) page.
If you hover your mouse over the "Galleries" it drops down with links to all the Categories.

Now what do I need to do to to have something like this. I don't have any experience with website coding, so please be nice.

Thanks
Ben

[Allen]

What I want to do is have a drop down for the gallery link in the navbar.

It one of the links in the Navbar is "Galleries"
If you clicked on that it would take you to a galleries (shows all categories) page.
If you hover your mouse over the "Galleries" it drops down with links to all the Categories.

Now what do I need to do to to have something like this. I don't have any experience with website coding, so please be nice.

Thanks
Ben
See the "Menu with dropdown" section on this page (http://allen-steve.smugmug.com/gallery/2327835) for your header html.

Throw this CSS in for starters, it can then be tweaked however you want
the navbar to look. The first rule will hide it from everyone but you logged
in, it will be deleted when you're ready to go live.

.notLoggedIn .menu {display: none;} /* temporary hide navbar */

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto 20px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:500px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:130px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:auto; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12pt;
text-decoration:none;
color:#444;
background:#eee;
border:1px solid #222;
border-width:1px 1px 1px 1px;
font-family: Comic Sans MS, verdana, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 10px;
min-width: 100px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:130px; w\idth:130px;}

/* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#eee;} /* w/3rd */

/* style the second level hover */
.menu ul ul a.drop:hover {background:#eee;}
.menu ul ul :hover > a.drop {background:#eee;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#eee;} /* not FF */

/* style the third level hover */
.menu ul ul ul a:hover {background:#999;}
.menu ul ul ul :hover > a {background:#999;} /* 3rd (w/o 4th) 4th hover */

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:100px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* position the third level flyout menu */
.menu ul ul ul {
left:122px;
top:0;
width:140px;
}

/* position the fourth level flyout menu */
.menu ul ul ul ul {
left:132px;
top:0;
width:100px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#444;
background:#eee;
height:25px;
line-height:25px;
width:100px;
}


.menu ul ul :hover > a.drop {background:#999;} /* 2nd w/3rd */

/* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
color:#444; /* hover 2nd > 3rd & 4th */
background:#eee; /* hover 3rd > 4th */
height:25px;
line-height:25px;
width:110px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:120px; w\idth:120px;}

/* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
color:#444;
background:#999;
}

/* main hover */
.menu :hover > a, .menu ul ul :hover > a {
color:#444;
background:#999;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul {visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul {visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */

[TPI]

Can't troubleshoot without seeing your new nav. You can add the html and
CSS and hide it from your visitors.

Add something like this to your CSS assuming the div name is .menu

.notLoggedIn .menu {display: none;}

Using WebDev we can disable that CSS and see the menu and help.


Hello

I added .notLoggedIn .navcontainer {display: none;}
and my new nav bar is still showing up when I am not logged in.

I can not figure out what I did wrong. But everything just spreads out instead of dropping down. I might have screwed up in the CSS part. Help Please....LOL..I think I have been looking at this stuff too long.

This is the way I would like it.
Pricing
Standard Portraits
Senior Portraits
Furry Children
Events

[Allen]

Hello

I added .notLoggedIn .navcontainer {display: none;}
and my new nav bar is still showing up when I am not logged in.

I can not figure out what I did wrong. But everything just spreads out instead of dropping down. I might have screwed up in the CSS part. Help Please....LOL..I think I have been looking at this stuff too long.

This is the way I would like it.
Pricing
Standard Portraits
Senior Portraits
Furry Children
Events
Div ID's use a # in CSS. Div classes using a period. In your CSS change all the .navcontainer to #navcontainer.

<div id="navcontainer">

.navcontainer {...
like this
#navcontainer {...

[Allen]

Hello

I added .notLoggedIn .navcontainer {display: none;}
and my new nav bar is still showing up when I am not logged in.

I can not figure out what I did wrong. But everything just spreads out instead of dropping down. I might have screwed up in the CSS part. Help Please....LOL..I think I have been looking at this stuff too long.

This is the way I would like it.
Pricing
Standard Portraits
Senior Portraits
Furry Children
Events Change your nav header html to this.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
....

Repaste in the CSS posted above.

Minimize the width to center nav and not to wrap to two lines. 610 works in Firefox.

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto 20px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:610px; /* Main bar total width, minimize to center */
}

Add the missing closing } here, it's disabling the CSS below it.
Also remove all the gallery keys from the gallery number. _47Huf They are
only used in links, like a banner background.

.gallery_11783488 .nophotos h3 {display: none;}
.notLoggedIn .nophotos {
display: none;
}
.gallery_11783488_47Huf .pageNav {
display: none;
}

[TPI]

Change your nav header html to this.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
....

Repaste in the CSS posted above.

Minimize the width to center nav and not to wrap to two lines. 610 works in Firefox.

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto 20px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:610px; /* Main bar total width, minimize to center */
}

Add the missing closing } here, it's disabling the CSS below it.
Also remove all the gallery keys from the gallery number. _47Huf They are
only used in links, like a banner background.

.gallery_11783488 .nophotos h3 {display: none;}
.notLoggedIn .nophotos {
display: none;
}
.gallery_11783488_47Huf .pageNav {
display: none;
}



Hello I have change all my

.navcontainer {...
to
#navcontainer {...
and I also change my CSS around but something is still messed up. Now all of my boxes are gone and my tabs are all to the left of the screen.

Here is my CSS/* removes the full-screen slideshow buttons */
.play_slideshow {
display: none;
}
#caption_top {
display: block;
}
#caption_bottom {
display: none;
}
.homepage #galleryTitle {
display: none;
}
#categoriesBox .boxTop {
display: none;
}
.notLoggedIn #breadCrumbTrail {display: none;}
#bioBox {border: none;
}
#bioBox {background: none;}
#userBio {text-align: center !important;}
.homepage {
background-color: 000000;
}
.gallery_11783488 .nophotos h3 {display: none;}
.notLoggedIn .nophotos {
display: none;

.gallery_11783488_47Huf .pageNav {
display: none;
}
gallery_11910975 #breadcrumb {display: none;}
.loggedIn .gallery_11910975 #breadcrumb {display: block;}
#catalogTitle {text-align: center; font-size: 20px; }

/* START gallery 11783488 */

.gallery_11783488 #albumDescription {
margin-top: 40px; /* gap from navbar at top */
background: #ccc; /* background of description box */
padding: 20px 40px 40px 40px; /* top right bottom left */
} /* spacing inside box from edges */

.gallery_11783488 .myPhoto {
float: left; /* allows the text to flow to the right */
padding: 0 30px 10px 0; /* top right bottom left */
} /* spacing of text around photo */

.gallery_11783488 .myPhoto img {
border: 4px ridge #444; /* add border around photo */
}

.gallery_11783488 .myTitle {
font-family: Comic Sans MS, verdana;
font-size: 150%;
color: #444;
font-weight: bold;
text-align: center;
margin: 0 auto 30px auto; /* top right bottom left */
}

.gallery_11783488 .myText {
font-family: Comic Sans MS, verdana;
font-size: 100%;
color: #444;
font-weight: normal;
text-align: justify;
}

.gallery_11783488 .myEmail {color: #444;}
.gallery_11783488 .myEmail:hover {color: red;}

/* things you can hide on page */
.gallery_11783488 .nophotos h3, /* if no photos in gallery */
.gallery_11783488 #albumNav_top,
.gallery_11783488 #albumNav_bottom,
.notLoggedIn .gallery_11783488 .journal_entry, /* hides photos in gallery */
.notLoggedIn .gallery_11783488 #breadcrumb {display: none;}

/* END gallery 11783488 */



.notLoggedIn .navcontainer {display: none;} /* temporary hide navbar */

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
#navcontainer {
z-index:99;
margin: 0 auto 20px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:610px; /* Main bar total width, minimize to center */
}

.gallery_11783488 .nophotos h3 {display: none;}
.notLoggedIn .nophotos {
display: none;
}
.gallery_11783488_ .pageNav {
display: none;
}

/* remove all the bullets, borders and padding from the default list styling */
#navcontainer ul {
padding:.2em 1em;
margin:0;
list-style-type:none;
}

#navcontainer ul ul {
width:130px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#navcontainer li {
float:left;
text-align:center;
width:auto; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
#navcontainer a, .navcontainer a:visited {
display:block;
font-size:12pt;
text-decoration:none;
color:#444;
background:#eee;
border:1px solid #222;
border-width:1px 1px 1px 1px;
font-family: Comic Sans MS, verdana, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 10px;
min-width: 100px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html #navcontainer a, * html #navcontainer a:visited
{width:130px; w\idth:130px;}

/* style the second level background non-hover */
#navcontainer ul ul a.drop, #navcontainer ul ul a.drop:visited {background:#eee;} /* w/3rd */

/* style the second level hover */
#navcontainer ul ul a.drop:hover {background:#eee;}
#navcontainer ul ul :hover > a.drop {background:#eee;}

/* style the third level background */
#navcontainer ul ul ul a, #navcontainer ul ul ul a:visited {background:#eee;} /* not FF */

/* style the third level hover */
#navcontainer ul ul ul a:hover {background:#999;}
#navcontainer ul ul ul :hover > a {background:#999;} /* 3rd (w/o 4th) 4th hover */

/* hide the sub levels and give them a positon absolute so that they take up no room */
#navcontainer ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:100px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html #navcontainer ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* position the third level flyout menu */
#navcontainer ul ul ul {
left:122px;
top:0;
width:140px;
}

/* position the fourth level flyout menu */
#navcontainer ul ul ul ul {
left:132px;
top:0;
width:100px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
#navcontainer table {position:absolute; top:0; left:0;}

/* style the second level links */
#navcontainer ul ul a, #navcontainer ul ul a:visited {
color:#444;
background:#eee;
height:25px;
line-height:25px;
width:100px;
}


#navcontainer ul ul :hover > a.drop {background:#999;} /* 2nd w/3rd */

/* style the third level links */
#navcontainer ul ul ul a, #navcontainer ul ul ul a:visited {
color:#444; /* hover 2nd > 3rd & 4th */
background:#eee; /* hover 3rd > 4th */
height:25px;
line-height:25px;
width:110px;
}

/* yet another hack for IE5.5 */
* html .navcontainer ul ul a
{width:120px; w\idth:120px;}

/* main hover ?IE? */
#navcontainer a:hover, #navcontainer ul ul a:hover {
color:#444;
background:#999;
}

/* main hover */
#navcontainer :hover > a, #navcontainer ul ul :hover > a {
color:#444;
background:#999;
}

/* make the second level visible when hover on first level list OR link */
#navcontainer ul :hover ul {visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
#navcontainer ul :hover ul ul {visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
#navcontainer ul :hover ul :hover ul ul {visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
#navcontainer ul :hover ul :hover ul {visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
#navcontainer ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */

And here is my HTML
<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a class="drop" href="/gallery/11783488">Pricing
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/11783488_47Huf">Standard Portraits</a></li>
<li><a href="Link">Senior Portraits</a></li>
<li><a href="Link">Furry Children</a></li>
<li><a href="Link">Events</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://thomasphotoimagery.com/See-Your-Images">Your Images</a></li>
<li><a href="/gallery/11911822_m8ix8">Gift Items</a></li>
<li><a href="/gallery/11910975_sAgcZ">Contact Me</a></li>

</ul>
</div>

I think I am completely off track now.
If I did not say it before Thanks again for your help. All of this HTML and CSS is very new to me. Please be patient with me.

[rinkshots]

I used to have multiple nav bars on my web site, and only one would display depending on which category, gallery, etc. I would like to repeat that again, but am unsure how to go about it. Here's my page:

http://www.rinkshots.com (http://www.rinkshots.com/)

I remember that I had to make a separate div for each menu, if I recall, and then make a property in the CSS to hide the menus that I did not want displayed. What I can't remember is if I need to make additional CSS for each nav bar also.

Thanks.

I have not been able to make any progress on this yet. Are there any suggestions out there?

Thanks.

[Allen]

Hello I have change all my

.navcontainer {...
to
#navcontainer {...
and I also change my CSS around but something is still messed up. Now all of my boxes are gone and my tabs are all to the left of the screen.

Here is my CSS
...
.notLoggedIn .navcontainer {display: none;} /* temporary hide navbar */

...

/* style the links for the top level */
#navcontainer a, .navcontainer a:visited {
display:block;
font-size:12pt;
text-decoration:none;
color:#444;
background:#eee;
border:1px solid #222;
border-width:1px 1px 1px 1px;
font-family: Comic Sans MS, verdana, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 10px;
min-width: 100px;
}

...

/* yet another hack for IE5.5 */
* html .navcontainer ul ul a
{width:120px; w\idth:120px;}
...
And here is my HTML

<div class="menu">
<ul>
...

I think I am completely off track now.
If I did not say it before Thanks again for your help. All of this HTML and CSS is very new to me. Please be patient with me. In your header html change
<div class="menu">
to
<div id="navcontainer">

You missed changing three .navcontainer to #navcontainer See quote above.

You did not do any of the CSS below this line in post 4868. It's mandatory to get your CSS to work.
Minimize the width to center nav and not to wrap to two lines. 610 works in Firefox.
(Actually, width:640px; now works for Firefox, you must of added another button.)

[gemgirl]

Change your nav CSS to this. Used a slightly different version that seems
to be easier to format. Worked in all your colors, etc.

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto 10px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:710px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:100px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:140px; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12pt;
text-decoration:none;
text-align: center;
color:#fff;
background:#000;
border:1px solid #fff;
border-width:0 1px 0 1px;
font-family: Segoe Script, Comic Sans MS;
width:140px; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 ;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:140px; w\idth:140px;}

/* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#000;} /* w/3rd */

/* style the second level hover */
.menu ul ul a.drop:hover {background:#000;}
.menu ul ul :hover > a.drop {background:#000;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#000;} /* not FF */

/* style the third level hover */
.menu ul ul ul a:hover {background:#000;}
.menu ul ul ul :hover > a {background:#000;} /* 3rd (w/o 4th) 4th hover */

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:140px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* position the third level flyout menu */
.menu ul ul ul {
left:122px;
top:0;
width:140px;
}

/* position the fourth level flyout menu */
.menu ul ul ul ul {
left:132px;
top:0;
width:140px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#fff;
background:#000;
height:25px;
line-height:25px;
width:119px;
}


.menu ul ul :hover > a.drop {background:#999;} /* 2nd w/3rd */

/* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
color:#fff; /* hover 2nd > 3rd & 4th */
background:#000; /* hover 3rd > 4th */
height:25px;
line-height:25px;
width:140px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:140px; w\idth:140px;}

/* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
color:#AB113F;
background:#000;
}

/* main hover */
.menu :hover > a, .menu ul ul :hover > a {
color:#AB113F;
background:#000;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul {visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul {visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */



Thank you so much for fixing it! It definitely works better now, and looks cleaner. I appreciate it very much!

[zibi72]

Hi. I need little help moving my navbar to the right upper corner.
My site http://zibi.smugmug.com/.
Thanks Ziggy

[Allen]

Hi. I need little help moving my navbar to the right upper corner.
My site http://zibi.smugmug.com/.
Thanks Ziggy
Remove the red div from your header. There is no closing div to remove, should of been.

<div align="center">
<div class="menu">

Change this CSS rule like this. You used EZC for your banner so had to play
with margins to position the nav.
/* style the outer div to give it width */
.menu {
float: right;
z-index:99;
margin: -60px 20px 60px 0;
}

[blanaru]

Seems that folks are doing navbars left and right. Cool! These are advanced features, that thankfully, a few members of our community are really helping out with! All navbar help issues should go here :)

Thanks!
I have made a custom navbar, but right now I am using buttons with images located on another site. Now that I created this account, I see that there are many tutorials, but I still don`t see where can I stick a PNG image to a link button. To be more precise, I can paste the code and see if I skip something:

<a href="http://www.blanaru.net/" title="Mihai Blanaru Photography"><img src="http://www.blanaru.net/templates/darkmatter/img/logo_white.png" border="0" alt="Mihai Blanaru Photography" onmouseover="this.src='http://www.blanaru.net/templates/darkmatter/img/logo_red.png';" onmouseout="this.src='http://www.blanaru.net/templates/darkmatter/img/logo_white.png';"></a>

now, I have already created an unlisted gallery with new PNG files, but the linkage won`t work. The link to this button must be this one:

http://blanaru.smugmug.com/Other/site-stuff/11957575_5pMMD#847126148_NwRUx

thanks in advance guys!

[jfriend]

I have made a custom navbar, but right now I am using buttons with images located on another site. Now that I created this account, I see that there are many tutorials, but I still don`t see where can I stick a PNG image to a link button. To be more precise, I can paste the code and see if I skip something:

<a href="http://www.blanaru.net/" title="Mihai Blanaru Photography"><img src="http://www.blanaru.net/templates/darkmatter/img/logo_white.png" border="0" alt="Mihai Blanaru Photography" onmouseover="this.src='http://www.blanaru.net/templates/darkmatter/img/logo_red.png';" onmouseout="this.src='http://www.blanaru.net/templates/darkmatter/img/logo_white.png';"></a>

now, I have already created an unlisted gallery with new PNG files, but the linkage won`t work. The link to this button must be this one:

http://blanaru.smugmug.com/Other/site-stuff/11957575_5pMMD#847126148_NwRUx

thanks in advance guys!Enable easy sharing in your gallery and use the Share button to obtain the direct link to the image and then use that link in the HTML.

[blanaru]

Enable easy sharing in your gallery and use the Share button to obtain the direct link to the image and then use that link in the HTML.
oh! forgot about the easy sharing!! thanks again! :ivar

[zibi72]

Remove the red div from your header. There is no closing div to remove, should of been.

<div align="center">
<div class="menu">

Change this CSS rule like this. You used EZC for your banner so had to play
with margins to position the nav.
/* style the outer div to give it width */
.menu {
float: right;
z-index:99;
margin: -60px 20px 60px 0;
}

Thanks a lot Al.
Ziggy

[TPI]

In your header html change
<div class="menu">
to
<div id="navcontainer">

You missed changing three .navcontainer to #navcontainer See quote above.

You did not do any of the CSS below this line in post 4868. It's mandatory to get your CSS to work.
Minimize the width to center nav and not to wrap to two lines. 610 works in Firefox.
(Actually, width:640px; now works for Firefox, you must of added another button.)


Thank so much for your help. This is still very new to me. I did not realize I was missing some info. I have everything set now. I think. But I cannot seem to get the the menus to drop down. It is set right now that if you hover over Pricing the menus drop down and out to the right. I just want them to drop straight down. Also My Standard Portraits Menu and Senior Portraits Menu are not all in one box. The words portraits show up under the box without my backround color and my hover color. I have tried to enter info to change but I came up with nothing. Do I need to make the boxes/margins bigger? If so how do I do that?

Thanks again so much. This is what I have in my CSS box.

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #666666;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}
}
/* removes the full-screen slideshow buttons */
.play_slideshow {
display: none;
}
#caption_top {
display: block;
}
#caption_bottom {
display: none;
}
.homepage #galleryTitle {
display: none;
}
#categoriesBox .boxTop {
display: none;
}
.notLoggedIn #breadCrumbTrail {display: none;}
#bioBox {border: none;
}
#bioBox {background: none;}
#userBio {text-align: center !important;}
.homepage {
background-color: 000000;
}
.gallery_11783488 .nophotos h3 {display: none;}
.notLoggedIn .nophotos {
display: none;
}
.gallery_11783488.pageNav {
display: none;
}
gallery_11910975 #breadcrumb {display: none;}
.loggedIn .gallery_11910975 #breadcrumb {display: block;}
#catalogTitle {text-align: center; font-size: 20px; }
}
/* START gallery 11783488 */

.gallery_11783488 #albumDescription {
margin-top: 40px; /* gap from navbar at top */
background: #ccc; /* background of description box */
padding: 20px 40px 40px 40px; /* top right bottom left */
} /* spacing inside box from edges */

.gallery_11783488 .myPhoto {
float: left; /* allows the text to flow to the right */
padding: 0 30px 10px 0; /* top right bottom left */
} /* spacing of text around photo */

.gallery_11783488 .myPhoto img {
border: 4px ridge #444; /* add border around photo */
}

.gallery_11783488 .myTitle {
font-family: Comic Sans MS, verdana;
font-size: 150%;
color: #444;
font-weight: bold;
text-align: center;
margin: 0 auto 30px auto; /* top right bottom left */
}

.gallery_11783488 .myText {
font-family: Comic Sans MS, verdana;
font-size: 100%;
color: #444;
font-weight: normal;
text-align: justify;
}

.gallery_11783488 .myEmail {color: #444;}
.gallery_11783488 .myEmail:hover {color: red;}

/* things you can hide on page */
.gallery_11783488 .nophotos h3, /* if no photos in gallery */
.gallery_11783488 #albumNav_top,
.gallery_11783488 #albumNav_bottom,
.notLoggedIn .gallery_11783488 .journal_entry, /* hides photos in gallery */
.notLoggedIn .gallery_11783488 #breadcrumb {display: none;}

/* END gallery 11783488 */

.notLoggedIn #navcontainer {display: none;} /* temporary hide navbar */

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
#navcontainer {
z-index:99;
margin: 0 auto 10px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:610px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
#navcontainer ul {
padding:0;
margin:0;
list-style-type:none;
}

#navcontainer ul ul {
width:150px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#navcontainer li {
float:left;
text-align:center;
width:115px; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
#navcontainer a, #navcontainer a:visited {
display:block;
font-size:12pt;
text-decoration:none;
text-align: center;
color:#fff;
background: #666666;
border:1px solid #fff;
border-width:0 1px 0 1px;
font-family: Segoe Script, Comic Sans MS;
width:110px; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 ;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html #navcontainer a, * html #navcontainer a:visited
{width:140px; w\idth:140px;}

/* style the second level background non-hover */
#navcontainer ul ul a.drop, #navcontainer ul ul a.drop:visited {background:#6666;} /* w/3rd */

/* style the second level hover */
#navcontainer ul ul a.drop:hover {background:#fff;}
#navcontainer ul ul :hover > a.drop {background:#369;}

/* style the third level background */
#navcontainer ul ul ul a, #navcontainer ul ul ul a:visited {background:#666666;} /* not FF */

/* style the third level hover */
#navcontainer ul ul ul a:hover {background:#fff;}
#navcontainer ul ul ul :hover > a {background:#369;} /* 3rd (w/o 4th) 4th hover */

/* hide the sub levels and give them a positon absolute so that they take up no room */
#navcontainer ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:610px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html #navcontainer ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* position the third level flyout menu */
#navcontainer ul ul ul {
left:122px;
top:0;
width:140px;
}

/* position the fourth level flyout menu */
#navcontainer ul ul ul ul {
left:132px;
top:0;
width:140px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
#navcontainer table {position:absolute; top:0; left:0;}

/* style the second level links */
#navcontainer ul ul a, #navcontainer ul ul a:visited {
color:#fff;;
background:#66666;
height:25px;
line-height:25px;
width:119px;
}


#navcontainer ul ul :hover > a.drop {background:#369;} /* 2nd w/3rd */

/* style the third level links */
#navcontainer ul ul ul a, #navcontainer ul ul ul a:visited {
color:#fff; /* hover 2nd > 3rd & 4th */
background:#666666; /* hover 3rd > 4th */
height:25px;
line-height:25px;
width:140px;
}

/* yet another hack for IE5.5 */
* html #navcontainer ul ul a
{width:140px; w\idth:140px;}

/* main hover ?IE? */
#navcontainer a:hover, #navcontainer ul ul a:hover {
color:#fff;
background:#6666;
}

/* main hover */
#navcontainer :hover > a, #navcontainer ul ul :hover > a {
color:#fff;
background:#6666;
}

/* make the second level visible when hover on first level list OR link */
#navcontainer ul :hover ul {visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
#navcontainer ul :hover ul ul {visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
#navcontainer ul :hover ul :hover ul ul {visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
#navcontainer ul :hover ul :hover ul {visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
#navcontainer ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */

[Allen]

Thank so much for your help. This is still very new to me. I did not realize I was missing some info. I have everything set now. I think. But I cannot seem to get the the menus to drop down. It is set right now that if you hover over Pricing the menus drop down and out to the right. I just want them to drop straight down. Also My Standard Portraits Menu and Senior Portraits Menu are not all in one box. The words portraits show up under the box without my background color and my hover color. I have tried to enter info to change but I came up with nothing. Do I need to make the boxes/margins bigger? If so how do I do that?

Thanks again so much. This is what I have in my CSS box.

Replace your whole CSS with this and see if everything works better.

/* removes the full-screen slideshow buttons */
.play_slideshow {display: none;}

#caption_top,
#caption_bottom {display: none;}

.homepage #galleryTitle {display: none;}

#categoriesBox .boxTop { display: none;}

.notLoggedIn #breadCrumbTrail {display: none;}

#bioBox {border: none; background: none;}

#userBio {text-align: center !important;}

.homepage {background-color: #000;}

.notLoggedIn .emptyGallery {display: none;}



.gallery_11910975 #breadcrumb {display: none;}

.loggedIn .gallery_11910975 #breadcrumb {display: block;}

#catalogTitle {text-align: center; font-size: 20px; }

/* START gallery 11783488 */

.gallery_11783488 #albumDescription {
margin-top: 40px; /* gap from navbar at top */
background: #ccc; /* background of description box */
padding: 20px 40px 40px 40px; /* top right bottom left */
} /* spacing inside box from edges */

.gallery_11783488 .myPhoto {
float: left; /* allows the text to flow to the right */
padding: 0 30px 10px 0; /* top right bottom left */
} /* spacing of text around photo */

.gallery_11783488 .myPhoto img {
border: 4px ridge #444; /* add border around photo */
}

.gallery_11783488 .myTitle {
font-family: Comic Sans MS, verdana;
font-size: 150%;
color: #444;
font-weight: bold;
text-align: center;
margin: 0 auto 30px auto; /* top right bottom left */
}

.gallery_11783488 .myText {
font-family: Comic Sans MS, verdana;
font-size: 100%;
color: #444;
font-weight: normal;
text-align: justify;
}

.gallery_11783488 .myEmail {color: #444;}
.gallery_11783488 .myEmail:hover {color: red;}

/* things you can hide on page */
.gallery_11783488 .nophotos h3, /* if no photos in gallery */
.gallery_11783488 .pageNav,
.gallery_11783488 #albumNav_top,
.gallery_11783488 #albumNav_bottom,
.notLoggedIn .gallery_11783488 .journal_entry, /* hides photos in gallery */
.notLoggedIn .gallery_11783488 #breadcrumb {display: none;}

/* END gallery 11783488 */





/* ***** temporary hide navbar ***** */
.notLoggedIn #navcontainer {display: none;} /* temporary hide navbar */

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
#navcontainer {
z-index:99;
margin: 0 auto 10px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:550px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
#navcontainer ul {
padding:0;
margin:0;
list-style-type:none;
}

#navcontainer ul ul {
width:110px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#navcontainer li {
float:left;
text-align:center;
width:110px; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
#navcontainer a, #navcontainer a:visited {
display:block;
font-size:12pt;
text-decoration:none;
text-align: center;
color:#fff;
background: #666;
border:1px solid #fff;
border-width:0 1px 0 1px;
font-family: Segoe Script, Comic Sans MS;
width:110px; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html #navcontainer a, * html #navcontainer a:visited
{width:140px; w\idth:140px;}

/* style the second level background non-hover */
#navcontainer ul ul a.drop, #navcontainer ul ul a.drop:visited {background:#666;} /* w/3rd */

/* style the second level hover */
#navcontainer ul ul a.drop:hover {background:#666;}
#navcontainer ul ul :hover > a.drop {background:#666;}

/* style the third level background */
#navcontainer ul ul ul a, #navcontainer ul ul ul a:visited {background:#666;} /* not FF */

/* style the third level hover */
#navcontainer ul ul ul a:hover {background:#666;}
#navcontainer ul ul ul :hover > a {background:#666;} /* 3rd (w/o 4th) 4th hover */

/* hide the sub levels and give them a positon absolute so that they take up no room */
#navcontainer ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:100px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html #navcontainer ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* style the table so that it takes no ppart in the layout - required for IE to work */
#navcontainer table {position:absolute; top:0; left:0;}

/* style the second level links */
#navcontainer ul ul a, #navcontainer ul ul a:visited {
color:#fff;;
background:#666;
height:25px;
line-height:25px;
width:109px;
}

#navcontainer ul ul :hover > a.drop {background:#369;} /* 2nd w/3rd */

/* yet another hack for IE5.5 */
* html #navcontainer ul ul a
{width:110px; w\idth:110px;}

/* main hover ?IE? */
#navcontainer a:hover, #navcontainer ul ul a:hover {
color:#ddd;
background:#666;
}

/* main hover */
#navcontainer :hover > a, #navcontainer ul ul :hover > a {
color:#ddd;
background:#666;
}

/* make the second level visible when hover on first level list OR link */
#navcontainer ul :hover ul {visibility:visible;}

/* End Navbar Code */

[hvining]

I am trying to change the background color of my drop down menu, the color it turns when you hover and the color of the lettering. Also I have many different galleries and for some reason the gallery drop down menu wont let me scroll down and click on a gallery. Thanks!

Heidi

www.ourpeacockflock.com (http://www.ourpeacockflock.com)

[Allen]

I am trying to change the background color of my drop down menu, the color it turns when you hover and the color of the lettering. Also I have many different galleries and for some reason the gallery drop down menu wont let me scroll down and click on a gallery. Thanks!

Heidi

www.ourpeacockflock.com (http://www.ourpeacockflock.com)
What colors do you want? The drops are probably disappearing if you're
using IE, a background is required. It don't sense anything when there is none.

[Allen]

I am trying to change the background color of my drop down menu, the color it turns when you hover and the color of the lettering. Also I have many different galleries and for some reason the gallery drop down menu wont let me scroll down and click on a gallery. Thanks!

Heidi

www.ourpeacockflock.com (http://www.ourpeacockflock.com)
Start with this and if you can't find how to change something fire back here. Worked in these colors
text non-hover #444
text hover darkred
bg #C9F0C9

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
margin: 0 auto;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 600px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
_width: 620px;
margin: 0 auto;
}

.galleries .menu,
.homepage .menu {
padding: 0px 0px 50px 0px;
_padding: 0px 0px 30px 0px;
}

.menu ul {
padding: 10px 0px 10px 0px; /* this effects menu centering if too big */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

.menu ul li {
margin: 0 3px 0 3px; /* adds space between menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative;
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1.1em; /* main buttons */
color: #444; /* main buttons text non-hover*/
text-decoration: none;
font-weight: bold;
text-align: center; /* centers text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
border: 30px solid tan;
border-width: 5px 5px 5px 5px;
background: none; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
width: 104px; w\idth: 104px; /* IE main button */
}

.menu ul li ul {
display: none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: darkred; /* main when hover DD */
background: none; /* main when hover DD */
}

.menu ul li:hover ul {
display: block;
position: absolute;
top: -3px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: -2px; /* FF DD right left */
width: 135px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display: block;
background: #C9F0C9; /* DD FO non-hover */
color: #444; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 135px; /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #C9F0C9; /* DD FO hover */
color: darkred; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 136px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 135px; /* FF FO box width */
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
color: darkred; /* main hover */
background: none; /* main hover */
_text-decoration: none;
}

.menu ul li a:hover ul {
display: block;
position: absolute;
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
font-weight: normal;
font-size: 90%
}

.menu ul li a:hover ul li a {
display: block;
background: #C9F0C9; /* IE DD color non-hover */
color: #444; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 135px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: #C9F0C9; /* DD FO */
color: darkred; /* DD FO */
}

.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #444; /* unknown */
left: 132px; /* FO right left */
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 135px;
w\idth: 135px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a {
width: 135px; /* unknown */
w\idth: 135px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

/* ==== END NAVBAR CODE ==== */

[TPI]

Replace your whole CSS with this and see if everything works better.

/* removes the full-screen slideshow buttons */
.play_slideshow {display: none;}

#caption_top,
#caption_bottom {display: none;}

.homepage #galleryTitle {display: none;}

#categoriesBox .boxTop { display: none;}

.notLoggedIn #breadCrumbTrail {display: none;}

#bioBox {border: none; background: none;}

#userBio {text-align: center !important;}

.homepage {background-color: #000;}

.notLoggedIn .emptyGallery {display: none;}



.gallery_11910975 #breadcrumb {display: none;}

.loggedIn .gallery_11910975 #breadcrumb {display: block;}

#catalogTitle {text-align: center; font-size: 20px; }

/* START gallery 11783488 */

.gallery_11783488 #albumDescription {
margin-top: 40px; /* gap from navbar at top */
background: #ccc; /* background of description box */
padding: 20px 40px 40px 40px; /* top right bottom left */
} /* spacing inside box from edges */

.gallery_11783488 .myPhoto {
float: left; /* allows the text to flow to the right */
padding: 0 30px 10px 0; /* top right bottom left */
} /* spacing of text around photo */

.gallery_11783488 .myPhoto img {
border: 4px ridge #444; /* add border around photo */
}

.gallery_11783488 .myTitle {
font-family: Comic Sans MS, verdana;
font-size: 150%;
color: #444;
font-weight: bold;
text-align: center;
margin: 0 auto 30px auto; /* top right bottom left */
}

.gallery_11783488 .myText {
font-family: Comic Sans MS, verdana;
font-size: 100%;
color: #444;
font-weight: normal;
text-align: justify;
}

.gallery_11783488 .myEmail {color: #444;}
.gallery_11783488 .myEmail:hover {color: red;}

/* things you can hide on page */
.gallery_11783488 .nophotos h3, /* if no photos in gallery */
.gallery_11783488 .pageNav,
.gallery_11783488 #albumNav_top,
.gallery_11783488 #albumNav_bottom,
.notLoggedIn .gallery_11783488 .journal_entry, /* hides photos in gallery */
.notLoggedIn .gallery_11783488 #breadcrumb {display: none;}

/* END gallery 11783488 */





/* ***** temporary hide navbar ***** */
.notLoggedIn #navcontainer {display: none;} /* temporary hide navbar */

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
#navcontainer {
z-index:99;
margin: 0 auto 10px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:550px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
#navcontainer ul {
padding:0;
margin:0;
list-style-type:none;
}

#navcontainer ul ul {
width:110px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#navcontainer li {
float:left;
text-align:center;
width:110px; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
#navcontainer a, #navcontainer a:visited {
display:block;
font-size:12pt;
text-decoration:none;
text-align: center;
color:#fff;
background: #666;
border:1px solid #fff;
border-width:0 1px 0 1px;
font-family: Segoe Script, Comic Sans MS;
width:110px; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html #navcontainer a, * html #navcontainer a:visited
{width:140px; w\idth:140px;}

/* style the second level background non-hover */
#navcontainer ul ul a.drop, #navcontainer ul ul a.drop:visited {background:#666;} /* w/3rd */

/* style the second level hover */
#navcontainer ul ul a.drop:hover {background:#666;}
#navcontainer ul ul :hover > a.drop {background:#666;}

/* style the third level background */
#navcontainer ul ul ul a, #navcontainer ul ul ul a:visited {background:#666;} /* not FF */

/* style the third level hover */
#navcontainer ul ul ul a:hover {background:#666;}
#navcontainer ul ul ul :hover > a {background:#666;} /* 3rd (w/o 4th) 4th hover */

/* hide the sub levels and give them a positon absolute so that they take up no room */
#navcontainer ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:100px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html #navcontainer ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* style the table so that it takes no ppart in the layout - required for IE to work */
#navcontainer table {position:absolute; top:0; left:0;}

/* style the second level links */
#navcontainer ul ul a, #navcontainer ul ul a:visited {
color:#fff;;
background:#666;
height:25px;
line-height:25px;
width:109px;
}

#navcontainer ul ul :hover > a.drop {background:#369;} /* 2nd w/3rd */

/* yet another hack for IE5.5 */
* html #navcontainer ul ul a
{width:110px; w\idth:110px;}

/* main hover ?IE? */
#navcontainer a:hover, #navcontainer ul ul a:hover {
color:#ddd;
background:#666;
}

/* main hover */
#navcontainer :hover > a, #navcontainer ul ul :hover > a {
color:#ddd;
background:#666;
}

/* make the second level visible when hover on first level list OR link */
#navcontainer ul :hover ul {visibility:visible;}

/* End Navbar Code */




Thank you, Thank you. It works great. But now I have a few other issues. I had to change the font size to 9pt in order to get Senior Portraits and Standard Portraits to fit in the drop down boxes. Is there another way to fit them into the boxes? I would like to have the words just a little bit bigger.

The other issue is I notice I now have a white add description box on my Standard Portrait page that was not there before. This is there when I am logged in as administrator. But when I go to visitor view there is no information coming up for Standard Portriats The other galleries I started to set up for my drop down menus don't have the white add description box when I am logged in.

I have also taken my /* ***** temporary hide navbar ***** */ out of the CSS box.
if you need to see what I mean. www.thomasphotoimagery.com

Also Thank you again so much, You have been a great help. I start school in a week. And between work. I am cramming this in. Thank you Allen for your help.

Here is my CSS
/* removes the full-screen slideshow buttons */
.play_slideshow {display: none;}

#caption_top,
#caption_bottom {display: none;}

.homepage #galleryTitle {display: none;}

#categoriesBox .boxTop { display: none;}

.notLoggedIn #breadCrumbTrail {display: none;}

#bioBox {border: none; background: none;}

#userBio {text-align: center !important;}

.homepage {background-color: #000;}

.notLoggedIn .emptyGallery {display: none;}

#caption_top {
display: block;
}

.gallery_11910975 #breadcrumb {display: none;}

.loggedIn .gallery_11910975 #breadcrumb {display: block;}

#catalogTitle {text-align: center; font-size: 20px; }

/* START gallery 11783488 */

.gallery_11783488 #albumDescription {
margin-top: 40px; /* gap from navbar at top */
background: #ccc; /* background of description box */
padding: 20px 40px 40px 40px; /* top right bottom left */
} /* spacing inside box from edges */

.gallery_11783488 .myPhoto {
float: left; /* allows the text to flow to the right */
padding: 0 30px 10px 0; /* top right bottom left */
} /* spacing of text around photo */

.gallery_11783488 .myPhoto img {
border: 4px ridge #444; /* add border around photo */
}

.gallery_11783488 .myTitle {
font-family: Comic Sans MS, verdana;
font-size: 150%;
color: #444;
font-weight: bold;
text-align: center;
margin: 0 auto 30px auto; /* top right bottom left */
}

.gallery_11783488 .myText {
font-family: Comic Sans MS, verdana;
font-size: 100%;
color: #444;
font-weight: normal;
text-align: justify;
}

.gallery_11783488 .myEmail {color: #444;}
.gallery_11783488 .myEmail:hover {color: red;}

/* things you can hide on page */
.gallery_11783488 .nophotos h3, /* if no photos in gallery */
.gallery_11783488 .pageNav,
.gallery_11783488 #albumNav_top,
.gallery_11783488 #albumNav_bottom,
.notLoggedIn .gallery_11783488 .journal_entry, /* hides photos in gallery */
.notLoggedIn .gallery_11783488 #breadcrumb {display: none;}

/* END gallery 11783488 */






/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
#navcontainer {
z-index:99;
margin: 0 auto 10px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:550px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
#navcontainer ul {
padding:0;
margin:0;
list-style-type:none;
}

#navcontainer ul ul {
width:110px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#navcontainer li {
float:left;
text-align:center;
width:110px; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
#navcontainer a, #navcontainer a:visited {
display:block;
font-size:9pt;
text-decoration:#fff;
text-align: center;
color:#0000;
background: #0000;
border:1px solid #none;
border-width:0 1px 0 1px;
font-family: Segoe Script, Comic Sans MS;
width:110px; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html #navcontainer a, * html #navcontainer a:visited
{width:140px; w\idth:140px;}

/* style the second level background non-hover */
#navcontainer ul ul a.drop, #navcontainer ul ul a.drop:visited {background:#000;} /* w/3rd */

/* style the second level hover */
#navcontainer ul ul a.drop:hover {background:#369;}
#navcontainer ul ul :hover > a.drop {background:#369;}

/* style the third level background */
#navcontainer ul ul ul a, #navcontainer ul ul ul a:visited {background:#369;} /* not FF */

/* style the third level hover */
#navcontainer ul ul ul a:hover {background:#369;}
#navcontainer ul ul ul :hover > a {background:#369;} /* 3rd (w/o 4th) 4th hover */

/* hide the sub levels and give them a positon absolute so that they take up no room */
#navcontainer ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:100px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html #navcontainer ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* style the table so that it takes no ppart in the layout - required for IE to work */
#navcontainer table {position:absolute; top:0; left:0;}

/* style the second level links */
#navcontainer ul ul a, #navcontainer ul ul a:visited {
color:000;
background:000;
height:25px;
line-height:25px;
width:109px;
}

#navcontainer ul ul :hover > a.drop {background:#369;} /* 2nd w/3rd */

/* yet another hack for IE5.5 */
* html #navcontainer ul ul a
{width:110px; w\idth:110px;}

/* main hover ?IE? */
#navcontainer a:hover, #navcontainer ul ul a:hover {
color:#369;
background:#369;
}

/* main hover */
#navcontainer :hover > a, #navcontainer ul ul :hover > a {
color:#369;
background:none;
}

/* make the second level visible when hover on first level list OR link */
#navcontainer ul :hover ul {visibility:visible;}

/* End Navbar Code */
***************



Here is my HTML
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a class="drop" href="/gallery/11783488">Pricing
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/11783488_47Huf">Standard Portraits</a></li>
<li><a href="/gallery/11989966_At8wk">Senior Portraits</a></li>
<li><a href="/gallery/11990221_SCcQM">Furry Children</a></li>
<li><a href="/gallery/11990263_L2aJ5">Events</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://thomasphotoimagery.com/See-Your-Images">Your Images</a></li>
<li><a href="/gallery/11911822_m8ix8">Gift Items</a></li>
<li><a href="/gallery/11910975_sAgcZ">Contact Me</a></li>

</ul>
</div>

[Allen]

...
A couple tweaks before diggin in deeper.

IE requires a background for the drops, otherwise elements show thru and
interfere with the mouse.

Only color names don't get a #. You need to add a # in front of every color number.

color:000;
background:000;

like this

color:#000;
background:#000;

Color numbers are 6 figures or three if dupped.
#000000 or #000

You have some of these
color:#0000;
background: #0000;

These can only be none, underline, overline, etc. Color doesn't belong here.
text-decoration:#fff;
See this site
http://www.w3schools.com/css/css_reference.asp

The width is this will widen the drop.

/* style the second level links */
#navcontainer ul ul a, #navcontainer ul ul a:visited {
color:000;
background:000;
height:25px;
line-height:25px;
width:129px;
}

[goDonato]

How do I center the text in a nav bar? Center as in keep the words in the middle of the screen (horizontally). Check out my page. Everything is now on the left side. http://www.goDonato.com/

I found a nav bar on the web. I think I figured it out. If anything is broken, please let me know.

Thanks,

-dMR

[Allen]

How do I center the text in a nav bar? Center as in keep the words in the middle of the screen (horizontally). Check out my page. Everything is now on the left side. http://www.goDonato.com/

I found a nav bar on the web. I think I figured it out. If anything is broken, please let me know.

Thanks,

-dMR
See if changing this

#menunav ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;}

like this works

#menunav ul{
margin:0 auto;
padding:0;
list-style-type:none;
width:680px;
}

[goDonato]

See if changing this

#menunav ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;}

like this works

#menunav ul{
margin:0 auto;
padding:0;
list-style-type:none;
width:680px;
}
That did it, thanks!
I think my buttons are too wide now. It's breaking the bar up into 2 lines.
Any ideas?

[goDonato]

That did it, thanks!
I think my buttons are too wide now. It's breaking the bar up into 2 lines.
Any ideas?
I got it. I shortened the title "more photos" to just "photos". I added "more" there so people would have something to see after the slide show, but the title seems a little weird if you didn't see the slide show.

Thanks again!
-dMR

[RLD1979]

OK, I need some mega help... I've been trying to get a navbar on my site for some time now... I have 'something' of a navbar but it doesnt link to anything, looks horrible, and I dont even know how to create the pages to link to... if you haven't guessed yet, I know NOTHING about HTML... can anyone help me in the easiest way possible (i.e. step by step, easy to understand instructions)? I have so much code on my site that I don't even know which thread goes to which thing. Thanks in advance...www.rebeccacotephotography.com (http://www.rebeccacotephotography.com)

[Allen]

OK, I need some mega help... I've been trying to get a navbar on my site for some time now... I have 'something' of a navbar but it doesnt link to anything, looks horrible, and I dont even know how to create the pages to link to... if you haven't guessed yet, I know NOTHING about HTML... can anyone help me in the easiest way possible (i.e. step by step, easy to understand instructions)? I have so much code on my site that I don't even know which thread goes to which thing. Thanks in advance...www.rebeccacotephotography.com (http://www.rebeccacotephotography.com)
First thing is add the missing }, it's disabling your CSS below it and
effecting your nav.

.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;}

[Allen]

OK, I need some mega help... I've been trying to get a navbar on my site for some time now... I have 'something' of a navbar but it doesnt link to anything, looks horrible, and I dont even know how to create the pages to link to... if you haven't guessed yet, I know NOTHING about HTML... can anyone help me in the easiest way possible (i.e. step by step, easy to understand instructions)? I have so much code on my site that I don't even know which thread goes to which thing. Thanks in advance...www.rebeccacotephotography.com (http://www.rebeccacotephotography.com)
Replace this part of your CSS. Added colors and border to go with your banner.

#navcontainer ul {
margin: 8px 0 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
color: #000;
background-color: #FECCFF;
border: 3px solid #000;
font-family: Comic Sans MS, verdana;
font-size: 12pt;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}

[RLD1979]

Thanks, Allen! I found some other code that seemed to help center things and I appreciate the colors you gave me! Do you know where I can find a tutorial to complete my About, Info. and Guestbook pages?? Again, THANK YOU!!!!

[Allen]

Thanks, Allen! I found some other code that seemed to help center things and I appreciate the colors you gave me! Do you know where I can find a tutorial to complete my About, Info. and Guestbook pages?? Again, THANK YOU!!!!
See if you like this. Adds a background and border on your galleries page.

.galleries #categoriesBox {border: 4px solid #000; background: #FECCFF;}
.galleries #categoriesBox .boxTop {background: #FECCFF;}

The easiest way is to use the journal (old) style with one photo uploaded and
add your info in the caption. There are many other ways using the gallery
description. I have one shown here.
http://allen-steve.smugmug.com/gallery/3819841


This will also do the sub-cats

#galleriesBox {border: 4px solid #000; background: #FECCFF;}
#galleriesBox .boxTop {background: #FECCFF;}

Instead of both above, if you like them, use this one combo instead.

#galleriesBox,
#categoriesBox {border: 4px solid #000; background: #FECCFF;}
#galleriesBox .boxTop,
#categoriesBox .boxTop {background: #FECCFF;}

[RLD1979]

Thank you again, I'm getting there!

[Allen]

Thank you again, I'm getting there!
I thought I had picked the pinkish color in your banner.

Might change all these #F6CCDA to #FECCFF if you want that color.

[RLD1979]

Thanks, I'm going to be changing my banner to match the pink in the background... I like it better... just working on my logo now!

[TPI]

A couple tweaks before diggin in deeper.

IE requires a background for the drops, otherwise elements show thru and
interfere with the mouse.

Only color names don't get a #. You need to add a # in front of every color number.

color:000;
background:000;

like this

color:#000;
background:#000;

Color numbers are 6 figures or three if dupped.
#000000 or #000

You have some of these
color:#0000;
background: #0000;

These can only be none, underline, overline, etc. Color doesn't belong here.
text-decoration:#fff;
See this site
http://www.w3schools.com/css/css_reference.asp

The width is this will widen the drop.

/* style the second level links */
#navcontainer ul ul a, #navcontainer ul ul a:visited {
color:000;
background:000;
height:25px;
line-height:25px;
width:129px;
}

Thank you very much the link it helped. I have that all set. But some how I lost my information that I have set on my Standard Pricing page. It shows up when I am logged in. But under the visiter view its not there. I think the problem might be in the HTML box with the gallery links. I have the pricing and the standard portriats gallery as the same thing. I am just not sure, because I can see the info when I am logged in. I don't want to mess it. Should I have another link # for pricing. I tried it with no link and nothing happen. My HTML box is still the same as it was in the last post I posted.

Thank you again. Especially for the link. I will Read up on it some more.

[Allen]

Thank you very much the link it helped. I have that all set. But some how I lost my information that I have set on my Standard Pricing page. It shows up when I am logged in. But under the visiter view its not there. I think the problem might be in the HTML box with the gallery links. I have the pricing and the standard portriats gallery as the same thing. I am just not sure, because I can see the info when I am logged in. I don't want to mess it. Should I have another link # for pricing. I tried it with no link and nothing happen. My HTML box is still the same as it was in the last post I posted.

Thank you again. Especially for the link. I will Read up on it some more.
You are hiding all the info for this gallery (http://thomasphotoimagery.com/gallery/11783488_47Huf). Remove the red.
/* things you can hide on page */
.gallery_11783488 .nophotos h3, /* if no photos in gallery */
.gallery_11783488 .pageNav,
.gallery_11783488 #albumNav_top,
.gallery_11783488 #albumNav_bottom,
.notLoggedIn .gallery_11783488 .journal_entry, /* hides photos in gallery */
.notLoggedIn .gallery_11783488 #breadcrumb {display: none;}
The whole CSS for this gallery is not needed except for the few things you want to hide above.
/* START gallery 11783488 */
... (SNIP) ...
/* END gallery 11783488 */

[TPI]

You are hiding all the info for this gallery (http://thomasphotoimagery.com/gallery/11783488_47Huf). Remove the red.
/* things you can hide on page */
.gallery_11783488 .nophotos h3, /* if no photos in gallery */
.gallery_11783488 .pageNav,
.gallery_11783488 #albumNav_top,
.gallery_11783488 #albumNav_bottom,
.notLoggedIn .gallery_11783488 .journal_entry, /* hides photos in gallery */
.notLoggedIn .gallery_11783488 #breadcrumb {display: none;}
The whole CSS for this gallery is not needed except for the few things you want to hide above.
/* START gallery 11783488 */
... (SNIP) ...
/* END gallery 11783488 */

Thank you Allen I can not believe I missed that. I have one more question and I think I will be done. Is there a way to make it where my pricing tab is not clickable? I just want my drop downs to be clickable. Right now if you click Pricing it takes you to a black screen.
www.thomasphotoimagery.com

Thanks again for your help. I really appreciate it.

[Allen]

Thank you Allen I can not believe I missed that. I have one more question and I think I will be done. Is there a way to make it where my pricing tab is not clickable? I just want my drop downs to be clickable. Right now if you click Pricing it takes you to a black screen.
www.thomasphotoimagery.com (http://www.thomasphotoimagery.com)

Thanks again for your help. I really appreciate it.
Add a # in front and it won't be pickable. Any text will do or just a #.

<li><a class="drop" href="#nopick">Pricing
<li><a class="drop" href="#">Pricing
<li><a class="drop" href="#Pricing">Pricing

[TPI]

Add a # in front and it won't be pickable. Any text will do or just a #.

<li><a class="drop" href="#nopick">Pricing
<li><a class="drop" href="#">Pricing
<li><a class="drop" href="#Pricing">Pricing

It work. Thank you sir for all of your help. I am sure I will be on here more reading as I want to tweak some more later, I am just glad I have it up and running decent now. Until next time friend.

[crystallized]

Gah, I feel really dumb but I just can't figure this out.

SO if I want to make more pages, ie, Home | Portfolio | Pricing | ETC I need to create a new gallery and then create a category name for it? This is the only way I was able to create another page and then it tells me to fill it with photos...NOT what I want to do =[ How do I simply create a new page and then fill it with whatever I want? I'll keep it simple now and be pleased a text field and image holder =/ Does SmugMug offer a service to design a page for Pro accounts? I thought I read that before but now I cant find where...

Please help me! I'm going mad!

[TPI]

Gah, I feel really dumb but I just can't figure this out.

SO if I want to make more pages, ie, Home | Portfolio | Pricing | ETC I need to create a new gallery and then create a category name for it? This is the only way I was able to create another page and then it tells me to fill it with photos...NOT what I want to do =[ How do I simply create a new page and then fill it with whatever I want? I'll keep it simple now and be pleased a text field and image holder =/ Does SmugMug offer a service to design a page for Pro accounts? I thought I read that before but now I cant find where...

Please help me! I'm going mad!

Check this link out might help.http://allen-steve.smugmug.com/gallery/3819841
I am new at this as well,hope it helps.

[JR303]

Well, I've added several more options to my navbar, but the spacing is all messed up. I've tried tons of stuff, but none of it has worked. So, if anyone has any way of checking my numbers for me, I would appreciate it greatly.

www.johnreed.smugmug.com (http://www.johnreed.smugmug.com)


Do still have 2 more pages to fill up (order info and guestbook) just waiting for the spacing to be correct before I add the links.

Thank You,
John Reed

[jfriend]

Well, I've added several more options to my navbar, but the spacing is all messed up. I've tried tons of stuff, but none of it has worked. So, if anyone has any way of checking my numbers for me, I would appreciate it greatly.

www.johnreed.smugmug.com (http://www.johnreed.smugmug.com)


Do still have 2 more pages to fill up (order info and guestbook) just waiting for the spacing to be correct before I add the links.

Thank You,
John Reed Your HTML is messed up and you are missing a bunch of tags. Change your navbar HTML to this:

<div class="menu">
<ul>
<li><a href="http://johnreed.smugmug.com/">Home</a></li>
<li><a href="http://johnreed.smugmug.com/XXXXX">Ordering Information</a></li>
<li><a href="http://johnreed.smugmug.com/Business/Order-Form/12036667_GAjGT">Order Form</a></li>
<li><a href="http://johnreed.smugmug.com/galleries">My Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Portfolio">Portfolio</a></li>
<li><a href="/Sessions">Clients</a></li>
<li><a href="/Reed-Family-Galleries">Reed Family Galleries</a></li>
<li><a href="Nature">Nature Photography</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/Sessions">Clients</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">Guestbook</a></li>
<li><a href="http://johnreed.smugmug.com/Business/Contact-me/12024225_gu2YP">Contact Me</a></li>
</ul>
</div>

[JR303]

Ahhh, thanks, John. I didn't change much of that, not sure how I screwed that up..

That worked perfectly, Thank you.

I have one other question, is there a way to make a link (the order form link) open in a new window so viewers can keep my site up when using the form in case they need to move around for file numbers?

I'm sure there is, but after this little frustration experiment, I'm a little hesitant.

Thanks, again.

John

Your HTML is messed up and you are missing a bunch of tags. Change your navbar HTML to this:

<div class="menu">
<ul>
<li><a href="http://johnreed.smugmug.com/">Home</a></li>
<li><a href="http://johnreed.smugmug.com/XXXXX">Ordering Information</a></li>
<li><a href="http://johnreed.smugmug.com/Business/Order-Form/12036667_GAjGT">Order Form</a></li>
<li><a href="http://johnreed.smugmug.com/galleries">My Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Portfolio">Portfolio</a></li>
<li><a href="/Sessions">Clients</a></li>
<li><a href="/Reed-Family-Galleries">Reed Family Galleries</a></li>
<li><a href="Nature">Nature Photography</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/Sessions">Clients</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">Guestbook</a></li>
<li><a href="http://johnreed.smugmug.com/Business/Contact-me/12024225_gu2YP">Contact Me</a></li>
</ul>
</div>

[jfriend]

Ahhh, thanks, John. I didn't change much of that, not sure how I screwed that up..

That worked perfectly, Thank you.

I have one other question, is there a way to make a link (the order form link) open in a new window so viewers can keep my site up when using the form in case they need to move around for file numbers?

I'm sure there is, but after this little frustration experiment, I'm a little hesitant.

Thanks, again.

JohnAdd the part in red:
<li><a href="http://johnreed.smugmug.com/Business/Order-Form/12036667_GAjGT (http://www.dgrin.com/view-source:http://johnreed.smugmug.com/Business/Order-Form/12036667_GAjGT)" target="_blank">Order Form</a></li>

[JR303]

Add the part in red:
<li><a href="http://johnreed.smugmug.com/Business/Order-Form/12036667_GAjGT (http://www.dgrin.com/view-source:http://johnreed.smugmug.com/Business/Order-Form/12036667_GAjGT)" target="_blank">Order Form</a></li>



Perfect! Thanks John. You're a huge help here every single time.

John

[Synapped]

I hope I'm doing this right. I'm not very familiar with posting in threads :rolleyes

I'm working on a navbar. I need it off my homepage and in the individual galleries. So far it's only showing on the homepage and in the Galleries Categories pages, which is redundant. I'd love to get it out of the Categories pages too, but that's minor...

Thanks! Renae

[Allen]

I hope I'm doing this right. I'm not very familiar with posting in threads :rolleyes

I'm working on a navbar. I need it off my homepage and in the individual galleries. So far it's only showing on the homepage and in the Galleries Categories pages, which is redundant. I'd love to get it out of the Categories pages too, but that's minor...

Thanks! Renae
I can't find a gallery that you have customization turned on. You will have
to set appearance to "custom" to get any CSS to apply.

Then maybe something like this is CSS will do it.

#customNavContainer {display: none;}
.galleryPage #customNavContainer {display: block;}

[BeltzClan]

I am running through some upgrades and have created a navibar. It appears fine in every browser with the exception of IE 8. In IE 8, it does not scroll across the top. It jumbles them up on top of each other instead. Can someone take a look and offer up a suggestion?

LeslieMajchrzak.smugmug.com

[jfriend]

I am running through some upgrades and have created a navibar. It appears fine in every browser with the exception of IE 8. In IE 8, it does not scroll across the top. It jumbles them up on top of each other instead. Can someone take a look and offer up a suggestion?

LeslieMajchrzak.smugmug.comIn your navbar HTML, change all occurrences of this:

[if IE 7]

to this:

[if gte IE 7]

[BeltzClan]

This place is amazing... Thank you.

[TPI]

It work. Thank you sir for all of your help. I am sure I will be on here more reading as I want to tweak some more later, I am just glad I have it up and running decent now. Until next time friend.

Hi Allen,

I have another question? Where do I go to make my whole pricing drop down to be solid black in all of my dropdown tabs when you hover the mouse over the pricing tab?

Currently its only turning each individual tab solid black as you hover on them. I want to avoid the backround showing through the tabs?

www.thomasphotoimagery.com

Thank you

[jfriend]

Hi Allen,

I have another question? Where do I go to make my whole pricing drop down to be solid black in all of my dropdown tabs when you hover the mouse over the pricing tab?

Currently its only turning each individual tab solid black as you hover on them. I want to avoid the backround showing through the tabs?

www.thomasphotoimagery.com (http://www.thomasphotoimagery.com)

Thank youAdd the missing # sign on your background color:

/* style the second level links */
#navcontainer ul ul a, #navcontainer ul ul a:visited {
color:none;
background:#000;
height:25px;
line-height:25px;
width:150px;
}


You also have a lot of background colors set to something other than black before this that are just getting in the way.

[TPI]

Add the missing # sign on your background color:

/* style the second level links */
#navcontainer ul ul a, #navcontainer ul ul a:visited {
color:none;
background:#000;
height:25px;
line-height:25px;
width:150px;
}


You also have a lot of background colors set to something other than black before this that are just getting in the way.


Thank you

[squeener]

Okay, using easy customizer, I have a defined header image (banner) and click to url. In the Advanced Customizer, I've defined a separate header image (banner). But the problem is that my 2nd banner that is defined in Advanced Customizer inherits the click to url that is defined in Easty Customizer. How can I prevent this?

I need my 2nd banner to have a different click-to url....

My primary banner (Easy Customizer) - http://www.sorsn-photography.com
My 2nd banner (Advanced Customizer) - http://www.shawnqueener.com

[sjs]

I've used dreamweaver to create a custom header with an image and horizontal spry nav bar that i want to use for smugmug. i don't know where to place the code on the advanced customization page and not sure where to host the image that is in the custom header. I have to place js, css and the html code. I have the code on the customization page but have been using preview and i don't know if it saves in that state so the code can be seen. i can include code if necessary.

...can anyone help a poor confused little ol me? :scratch

Thank you, Jane

http://portfolio.seejaneshoot.com

[Cujo]

Hello, just starting to set up a drop down menu. You can take a peek and see what I need to do to get it right. Thanks, Gary.

www.garyesmanphotography.com


I would like to keep the nav bar over to the right.

Thanks, Gary.

[Allen]

Hello, just starting to set up a drop down menu. You can take a peek and see what I need to do to get it right. Thanks, Gary.

www.garyesmanphotography.com (http://www.garyesmanphotography.com)


I would like to keep the nav bar over to the right.

Thanks, Gary.
Change this

<div id="menu">

to this in your header html.

<div class="menu">

[Cujo]

Change this

<div id="menu">

to this in your header html.

<div class="menu">

Awesome! Now how do I get it to go over to the right and stay on the same line as the header?

Thanks for the help.:clap

[Allen]

Awesome! Now how do I get it to go over to the right and stay on the same line as the header?

Thanks for the help.:clap
Change these like this. Moves the nav to the right. Also tweaked the colors
and fixed the elements showing thru the drop.

#my_banner {
width: 400px;
height: 37px;
margin: 0;
background: url(http://www.garyesmanphotography.com/photos/842047752_iauzW-O.jpg) no-repeat;
}

#my_header {
border-bottom: 3px solid #000000;
margin: 10px 20px 15px; /* top right/left bottom*/
padding: 0 20px;
}

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* Common Styling */
.menu {
float: right;
display: block;
z-index: 99;
}

.menu ul {
padding: 10px 0px 10px 0px; /* this effects menu centering if too big */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

.menu ul li {
/* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1em; /* main buttons */
color: black ; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid red; */ /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: none; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
width: 104px; w\idth: 104px; /* IE main button */
}

.menu ul li ul {
display: none; z-index: 99;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: #ccc; /* main when hover DD */
background: #818181; /* main when hover DD */
}

.menu ul li:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: -4px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 104px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display: block;
background: #818181; /* DD FO non-hover */
color: black; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 100px; /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #818181; /* DD FO hover */
color: #ccc; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 220px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 146px; /* FF FO box width */
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
/* text-decoration: none; */ /* might be needed */
color: #ccc; /* main hover */
background: none; /* main hover */
}

.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display: block;
background:#818181; /* IE DD color non-hover */
color: #000; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 145px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: #818181; /* DD FO hover */
color: #ccc; /* DD FO hover */
}

.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 147px; /* FO right left */
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 125px;
w\idth: 139px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a {
width: 125px; /* unknown */
w\idth: 104px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

/* ==== END NAVBAR CODE ==== */

Also fix the link in this

<li><a href="/gallery/12103121_nW3xj">WATER FOWL</a></li>

[Cujo]

Change these like this. Moves the nav to the right. Also tweaked the colors
and fixed the elements showing thru the drop.

#my_banner {
width: 400px;
height: 37px;
margin: 0;
background: url(http://www.garyesmanphotography.com/photos/842047752_iauzW-O.jpg) no-repeat;
}

#my_header {
border-bottom: 3px solid #000000;
margin: 10px 20px 15px; /* top right/left bottom*/
padding: 0 20px;
}

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* Common Styling */
.menu {
float: right;
display: block;
z-index: 99;
}

.menu ul {
padding: 10px 0px 10px 0px; /* this effects menu centering if too big */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

.menu ul li {
/* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1em; /* main buttons */
color: black ; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid red; */ /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: none; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
width: 104px; w\idth: 104px; /* IE main button */
}

.menu ul li ul {
display: none; z-index: 99;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: #ccc; /* main when hover DD */
background: #818181; /* main when hover DD */
}

.menu ul li:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: -4px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 104px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display: block;
background: #818181; /* DD FO non-hover */
color: black; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 100px; /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #818181; /* DD FO hover */
color: #ccc; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 220px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 146px; /* FF FO box width */
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
/* text-decoration: none; */ /* might be needed */
color: #ccc; /* main hover */
background: none; /* main hover */
}

.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display: block;
background:#818181; /* IE DD color non-hover */
color: #000; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 145px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: #818181; /* DD FO hover */
color: #ccc; /* DD FO hover */
}

.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 147px; /* FO right left */
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 125px;
w\idth: 139px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a {
width: 125px; /* unknown */
w\idth: 104px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

/* ==== END NAVBAR CODE ==== */

Also fix the link in this

<li><a href="/gallery/12103121_nW3xj">WATER FOWL</a></li>


Thanks for all your help, I really appreciate it!:ivar

[JonasWright]

Well, I dove right into building a graphic navbar complete with hover status.

I followed the tutorial posted here (http://www.alistapart.com/articles/sprites/), and I can't tell if it worked or not because my banner has vanished!

If someone could find where my poor, lost banner has gone in the depths of my CSS code I would greatly appreciate it.

jonaswright.smugmug.com

Here is the code that I've plugged in:

<ul id="my_banner">
<li id="panel1b"><a href="/"></a></li>
<li id="panel2b"><a href="galleries"></a></li>
<li id="panel3b"><a href="about me"></a></li>
<li id="panel4b"><a href="#4"></a></li>
</ul>

#my_banner {
width: 1288px; height: 107px;
background: url (http://jonaswright.smugmug.com/photos/863427189_49LSL-O.jpg);
margin: 10px auto; padding: 0;
position: relative;}
#my_banner li {
margin: 0; padding: 0; list-style: none;
position: absolute; top: 0;}
#my_banner li, #my_banner a {
height: 107px; display: block;}

#panel1b {left: 732; width: 92px;}
#panel2b {left: 848px; width: 166px;}
#panel3b {left: 1040px; width: 110px;}
#panel4b {left: 1172px; width: 95px;}

#panel1b a:hover {
background: transparent url(http://jonaswright.smugmug.com/photos/863427189_49LSL-O.jpg)
-732 -210px no-repeat;}
#panel2b a:hover {
background: transparent url(http://jonaswright.smugmug.com/photos/863427189_49LSL-O.jpg)
-848px -210px no-repeat;}
#panel3b a:hover {
background: transparent url(http://jonaswright.smugmug.com/photos/863427189_49LSL-O.jpg)
-1040px -210px no-repeat;}
#panel4b a:hover {
background: transparent url(http://jonaswright.smugmug.com/photos/863427189_49LSL-O.jpg)
-1172px -210px no-repeat;}

[jfriend]

Well, I dove right into building a graphic navbar complete with hover status.

I followed the tutorial posted here (http://www.alistapart.com/articles/sprites/), and I can't tell if it worked or not because my banner has vanished!

If someone could find where my poor, lost banner has gone in the depths of my CSS code I would greatly appreciate it.

jonaswright.smugmug.com

Here is the code that I've plugged in:

There's no need to post your code. We can see it right in your page.

To start with, remove this from your CSS. It is HTML and not CSS and is causing errors in your CSS. Perhaps you meant to put it in your custom header (I don't really know). In any case, you have to remove it from your CSS.

Then, fix the CSS for your banner by changing it to this:

#my_banner {
width: 1288px; height: 107px;
background: transparent url(http://jonaswright.smugmug.com/photos/863427189_49LSL-O.jpg) no-repeat;
margin: 10px auto; padding: 0;
position: relative;}


Then, you might want to think about whether you really want a banner that's 1280x210 px. That's very large and will not fit on some screens and isn't particularly fast to load.

[JonasWright]

So I need to remove the entirety of the posted code and put it in my header? When I tried that I just got a pile of code showing up underneath my banner. (Sorry, I'm still figuring out what goes where.)

I fixed my CSS, now I have a mystery white bar that is loafing around underneath. Do I fix that by changing to
position: center;}

Banner size may, ultimately, get tweaked once I have the nitty-gritty down.

Thanks!

There's no need to post your code. We can see it right in your page.

To start with, remove this from your CSS. It is HTML and not CSS and is causing errors in your CSS. Perhaps you meant to put it in your custom header (I don't really know). In any case, you have to remove it from your CSS.

Then, fix the CSS for your banner by changing it to this:

#my_banner {
width: 1288px; height: 107px;
background: transparent url(http://jonaswright.smugmug.com/photos/863427189_49LSL-O.jpg) no-repeat;
margin: 10px auto; padding: 0;
position: relative;}
Then, you might want to think about whether you really want a banner that's 1280x210 px. That's very large and will not fit on some screens and isn't particularly fast to load.

[jfriend]

So I need to remove the entirety of the posted code and put it in my header? When I tried that I just got a pile of code showing up underneath my banner. (Sorry, I'm still figuring out what goes where.)

I fixed my CSS, now I have a mystery white bar that is loafing around underneath. Do I fix that by changing to
position: center;}

Banner size may, ultimately, get tweaked once I have the nitty-gritty down.

Thanks! In your CSS on the site-wide-customization page, change the line in red in my previous post. Don't move anything. Just change the line in red as I have indicated. "position: center" is invalid CSS and won't fix/change anything. If you do what I instructed, it will be centered.

[JonasWright]

In your CSS on the site-wide-customization page, change the line in red in my previous post. Don't move anything. Just change the line in red as I have indicated. "position: center" is invalid CSS and won't fix/change anything. If you do what I instructed, it will be centered.

Awesome. I have my banner back, and I just nudged it up in the code to get ride of the white line. Thanks!

But, I'm still not sure where to stick the code to make my graphic navbar clickable.

[jfriend]

Awesome. I have my banner back, and I just nudged it up in the code to get ride of the white line. Thanks!

But, I'm still not sure where to stick the code to make my graphic navbar clickable.To make it clickable to your homepage, in your custom header, change this:

<div id="my_banner"></div>to this:

<div id="my_banner"><a href="/"><img src="http://cdn.smugmug.com/img/spacer.gif" height="100" width="1280"></a></div>

[JonasWright]

To make it clickable to your homepage, in your custom header, change this:

<div id="my_banner"></div>to this:

<div id="my_banner"><a href="/"><img src="http://cdn.smugmug.com/img/spacer.gif" height="100" width="1280"></a></div>

But my ultimate goal is to get rid of the red navbar and have everything in the banner.

I've got the code written out (I think), its from my first post in the thread. THAT'S what I'm choking on.

I'm not sure if I need to plug that into the CSS, plug into the Custom Header or write it on a sticky and put it at the top of my screen.

[jfriend]

But my ultimate goal is to get rid of the red navbar and have everything in the banner.

I've got the code written out (I think), its from my first post in the thread. THAT'S what I'm choking on.

I'm not sure if I need to plug that into the CSS, plug into the Custom Header or write it on a sticky and put it at the top of my screen. I'm sorry but I have no idea what you're trying to accomplish. Please describe in significant detail the result you are after. We can only help if we understand EXACTLY the result you want to end up with.

Also, please put a link to your site in your dgrin signature. As it is, I have to hunt back through the thread for a previous post that has your site link in it every time I want to see if I can help.

[JonasWright]

I'm sorry but I have no idea what you're trying to accomplish. Please describe in significant detail the result you are after. We can only help if we understand EXACTLY the result you want to end up with.

Also, please put a link to your site in your dgrin signature. As it is, I have to hunt back through the thread for a previous post that has your site link in it every time I want to see if I can help.

Thanks for being patient and helping me through this.

I want my banner to double as a navbar. I've already got HOME, GALLERIES, etc., up there. Using the tutorial, here (http://www.alistapart.com/articles/sprites/), I've coded it so that that each area will work as a button with a hover state. I want to be rid of the navbar with the red buttons and just use the banner as a navbar.

I've got the code, but I don't know where to put it. I don't have it on the page because I don't know where it goes.

Thanks again.

jonaswright.smugmug.com

[jfriend]

Thanks for being patient and helping me through this.

I want my banner to double as a navbar. I've already got HOME, GALLERIES, etc., up there. Using the tutorial, here (http://www.alistapart.com/articles/sprites/), I've coded it so that that each area will work as a button with a hover state. I want to be rid of the navbar with the red buttons and just use the banner as a navbar.

I've got the code, but I don't know where to put it. I don't have it on the page because I don't know where it goes.

Thanks again.

jonaswright.smugmug.comOK, I don't understand how that code is going to work. But to answer your question, HTML for a header goes in the "custom header" box in site-wide-customization custom header area. CSS goes in the CSS box in site-wide-customization.

[JonasWright]

OK, I don't understand how that code is going to work. But to answer your question, HTML for a header goes in the "custom header" box in site-wide-customization custom header area. CSS goes in the CSS box in site-wide-customization.

WAIT! It works! Kinda. Maybe.

Well, my header has vanished. But there's buttons in them thar hills! Mouse around above the red nav bar. There's buttons! You can't see em. But you can click em.

One more thing: My "home" button doesn't appear. Galleries, about and the yet unmaterialized Gallery #4 are there. But the home button doesn't work.

So how do I go about getting that banner back?

[jfriend]

WAIT! It works! Kinda. Maybe.

Well, my header has vanished. But there's buttons in them thar hills! Mouse around above the red nav bar. There's buttons! You can't see em. But you can click em.

One more thing: My "home" button doesn't appear. Galleries, about and the yet unmaterialized Gallery #4 are there. But the home button doesn't work.

So how do I go about getting that banner back?Reapply the red line change in my post #4926 which you lost and your banner will come back.

FYI, an image map would be a much better way to make specific parts of an image clickable. A google search (http://www.google.com/#hl=en&source=hp&q=image+map+html&aq=f&aqi=g10&aql=&oq=&gs_rfai=&fp=56fa4ceda65d5bbf) on "image map html" offers a number of easy to follow tutorials.

[JonasWright]

Thanks so much. For this and for the galleries help.

[Cujo]

Hello! I added a simple fly out but it seems to be to far to the right. Can you take a look and see what's up? Thanks, Gary


www.garyesmanphotography.com

[Allen]

Hello! I added a simple fly out but it seems to be to far to the right. Can you take a look and see what's up? Thanks, Gary


www.garyesmanphotography.com (http://www.garyesmanphotography.com)
Change these two existing rules. FO = flyout DD = dropdown

.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 100px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 100px; /* FF FO box width */
}

.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 100px; /* FO right left */
}

[Cujo]

Change these two existing rules. FO = flyout DD = dropdown

.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 100px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 100px; /* FF FO box width */
}

.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 100px; /* FO right left */
}


Thank you once again! I think I am set now. You guys certainly do rock!:clap

[goDonato]

Any way to hide a custom nav bar on the home page?
Thanks!
-dMR

[J Allen]

Any way to hide a custom nav bar on the home page?
Thanks!
-dMR


Try this:






.homepage #menunav
{display:none}

.galleries #menunav
{display:block}

[goDonato]

Try this:






.homepage #menunav
{display:none}

.galleries #menunav
{display:block}






YOU ROCK! Thanks again!
-dMR

[vbetz]

I attempted to add a new menu option under 'About' for 'Contact' on my page www.valeriebetzphotography.com (http://www.valeriebetzphotography.com)
Unfortunately it didn't work and now I have two problems:
1. the menu option 'Contact' is not appearing
2. the nav bar is appearing beneath a dividing line - before the nav bar was inline with my header - which is how I'd like it

I would greatly apperciate any help with the above!

Thanks in advance!

[Fram]

Hello,

I am a new one in SmugMug, have been playing with codes and almost there.
But at the moment, when I am going to reduce my browser window or looking my site on smaller display, I get my navbar and mysearch relatively moving from right to left, finally overlapping my banner.
How to fix these elements on homepage so that they won't move, but instead horizontal scroll bar of browser window appears when reducing size of window?
My site http://timopalo.smugmug.com (http://timopalo.smugmug.com/)


Thanks for help in advance!


Timo

[jfriend]

Hello,

I am a new one in SmugMug, have been playing with codes and almost there.
But at the moment, when I am going to reduce my browser window or looking my site on smaller display, I get my navbar and mysearch relatively moving from right to left, finally overlapping my banner.
How to fix these elements on homepage so that they won't move, but instead horizontal scroll bar of browser window appears when reducing size of window?
My site http://timopalo.smugmug.com (http://timopalo.smugmug.com/)


Thanks for help in advance!


TimoYou need to fix some errors near the end of your CSS and then add a min-width statement. Your header is pretty wide - it simply won't fit on small screens. You can keep it from overlapping by change the last part of your CSS to this, but I'd suggest making it not so wide a design. The part in red below is new, the other part is modified to fix some linebreak problems.


#my_footer_note {
width: 349px;
height: 30px;
/*text-align: center;*/
margin: 0 auto;
margin-top: 10px;
background: url(http://timopalo.smugmug.com/photos/872605817_9raEb-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='http://timopalo.smugmug.com/photos/872605817_9raEb-O.png');
}

#my_header {min-width: 1120px;}

[Fram]

You need to fix some errors near the end of your CSS and then add a min-width statement. Your header is pretty wide - it simply won't fit on small screens. You can keep it from overlapping by change the last part of your CSS to this, but I'd suggest making it not so wide a design. The part in red below is new, the other part is modified to fix some linebreak problems.


#my_footer_note {
width: 349px;
height: 30px;
/*text-align: center;*/
margin: 0 auto;
margin-top: 10px;
background: url(http://timopalo.smugmug.com/photos/872605817_9raEb-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='http://timopalo.smugmug.com/photos/872605817_9raEb-O.png');
}

#my_header {min-width: 1120px;}

Thanks a lot John! :clap I get it.
It's for sure good idea to make header smaller. That's what I am trying to do now but not sure I know the right way.
Problem for me now is that header which has a fixed left position is moving independently of SmugMug's middle section (what is always centered), dependent of the size of browser window. That means, header and search bar on my home page are not always centered.
How to make it so that whole homepage is moving relatively to size of window, beeing always in the middle. And in case of larger screens than layout, there is just more empty space equally both sides of header.


Thanks,


Timo

[jfriend]

Thanks a lot John! :clap I get it.
It's for sure good idea to make header smaller. That's what I am trying to do now but not sure I know the right way.
Problem for me now is that header which has a fixed left position is moving independently of SmugMug's middle section (what is always centered), dependent of the size of browser window. That means, header and search bar on my home page are not always centered.
How to make it so that whole homepage is moving relatively to size of window, beeing always in the middle. And in case of larger screens than layout, there is just more empty space equally both sides of header.


Thanks,


TimoMaking your header not so wide would involve one or more of the following:


Smaller graphic
Smaller font for the navbar
Fewer items in the navbar
Switching to a design with graphic above navbar and both centered

Which to use is your design choice.

To get your header centered, change the part in red below in your CSS:

#my_header {
margin: 40px auto 15px; /* top right/left bottom*/
padding: 0 20px 5px; /* top right/left bottom*/
border-bottom: 2px solid #ccc;
max-width: 1200px;
}


Where do you want the search box to be? Right now it's just hanging out by itself and is not part of your header. Where do you want it? Centered below your header. Centered in your header? Right-aligned in your header?

[bigjon0107]

Hey Guys,

I have been trying to make a drop down menu. I know this has been explained a million times, but I have yet to get it right. Every time i add the code i found it makes my current navbar go away and basically add an outline looking thing with what I would like my navbar to say and then what the drop boxes should say.

The only drop box I am trying to get at this point is under the "Sports" link in the navbar to say "Baseball", "Basketball", "Football", etc...

Also, kinda a side note, how do I get my Eilts Photography image to be even with the navbar instead of just above?

Thanks a ton,
Jon
eiltsphotography.smugmug.com

[Fram]

Making your header not so wide would involve one or more of the following:


Smaller graphic
Smaller font for the navbar
Fewer items in the navbar
Switching to a design with graphic above navbar and both centered

Which to use is your design choice.

To get your header centered, change the part in red below in your CSS:

#my_header {
margin: 40px auto 15px; /* top right/left bottom*/
padding: 0 20px 5px; /* top right/left bottom*/
border-bottom: 2px solid #ccc;
max-width: 1200px;
}
Where do you want the search box to be? Right now it's just hanging out by itself and is not part of your header. Where do you want it? Centered below your header. Centered in your header? Right-aligned in your header?

Great thanks! :clap
It helps me a lot. I am going to change it as you noted, see how it works.
My search box I would like to have Right-aligned below my header.

I appreciate your help,

Timo

[Allen]

I attempted to add a new menu option under 'About' for 'Contact' on my page www.valeriebetzphotography.com (http://www.valeriebetzphotography.com)
Unfortunately it didn't work and now I have two problems:
1. the menu option 'Contact' is not appearing
2. the nav bar is appearing beneath a dividing line - before the nav bar was inline with my header - which is how I'd like it

I would greatly apperciate any help with the above!

Thanks in advance!
This is what I currently see.

<li><a href="/gallery/11673591_ucNWs">About
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Other/About/11673591_ucNWs/%3C/a%3E%3C/li%3E%0D%0A%20%20%20%20%20%20%20%20%3C/ul%3E%20%3C%21--[if%20lte%20IE%206]%3E%3C/td%3E%3C/tr%3E%3C/table%3E%3C/a%3E%3C%21[endif]--%3E%0D%0A%20%20%20%3C/li%3E%0D%0A%3C/ul%3E%0D%0A%3C/div%3E%0D%0A%3Cdiv%20id=" my_banner=""></a></li>
</ul>
</li>
</ul>
</div>

Is this what you want?

<li><a href="#nopick">About
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/11673591_ucNWs">About</a></li>
<li><a href="/gallery/xxxxxxxx_xxxxx">future use</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

[Allen]

Hey Guys,

I have been trying to make a drop down menu. I know this has been explained a million times, but I have yet to get it right. Every time i add the code i found it makes my current navbar go away and basically add an outline looking thing with what I would like my navbar to say and then what the drop boxes should say.

The only drop box I am trying to get at this point is under the "Sports" link in the navbar to say "Baseball", "Basketball", "Football", etc...

Also, kinda a side note, how do I get my Eilts Photography image to be even with the navbar instead of just above?

Thanks a ton,
Jon
eiltsphotography.smugmug.com
See if you like this. Ref. here (http://allen-steve.smugmug.com/gallery/2327835).
Replace your header html with this

<div id="my_header">

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li class="dotDrop">•</li>
<li><a class="drop" href="#nopick">Sports
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Sports/Volleyball">Volleyball</a></li>
<li><a href="/Sports/Baseball">Baseball</a></li>
<li><a href="/Sports/Softball">Softball</a></li>
<li><a href="/Sports/Soccer">Soccer</a></li>
<li><a href="/Sports/Basketball">Basketball</a></li>
<li><a href="/Sports/Football">Football</a></li>
<li><a href="/Sports/Tennis">Tennis</a></li>
<li><a href="/Sports/Swimming-and-Diving">Swimming &amp; Diving</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="dotDrop">•</li>
<li><a href="http://www.erinkathleen.com/index2.php">Weddings</a></li>
<li class="dotDrop">•</li>
<li><a href="/gallery/10886727_4Xkwn">Portraits</a></li>
<li class="dotDrop">•</li>
<li><a href="/galleries">Client Galleries</a></li>
<li class="dotDrop">•</li>
<li><a href="/gallery/3183805_Ux9dH">Contact</a></li>
</ul>
</div> <!-- closes menu -->

<div id="my_banner">
<a href="/">
<img src="/img/spacer.gif" alt="" border="0" height="80" width="400">
</a>
</div>

</div> <!-- closes my_header -->
CSS - Remove all the #navcontainer rules and change #my_header and #my_banner and add .menu stuff.

#my_header {
height: 65px;
border-bottom: 1px solid #ccc;
margin: 0 40px 15px; /* top right/left bottom*/
padding: 0;
}

#my_banner {
width: 400px; /* actual photo width and height */
height: 80px;
margin: 0;
background: url(http://www.eiltsphotography.com/photos/750750139_kCwYu-S.jpg) no-repeat;
}

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

.dotDrop {line-height: 20px;}

/* style the outer div to give it width */
.menu {
float: right;
z-index:99;
margin: 20px 0 0; /* top R/L bottom */
position:relative; /* Make the container moveable */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:130px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:auto; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12pt;
text-decoration:none;
color:#fff;
background:#000;
font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;
font-variant: small-caps;
width:auto; /* Defines the main box dimensions. */
height:20px; /*How tall your cells are*/
line-height:20px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 10px;
min-width: 50px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:100px; w\idth:100px;}

/* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#000;} /* only if 3rd level exists */

/* style the second level hover */
.menu ul ul a.drop:hover {background:#444;}
.menu ul ul :hover > a.drop {background:#444;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:20px;
left:-20px;
width:100px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#fff;
background:#000;
height:auto;
l ine-height:25px;
width:100px;
}


.menu ul ul :hover > a.drop {background:#999;} /* 2nd w/3rd */

/* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
color:#000; /* hover 2nd > 3rd & 4th */
background:#fff; /* hover 3rd > 4th */
height:20px;
line-height:20px;
width:100px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:100px; w\idth:100px;}

/* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
color:#fff;
background:#444;
}

/* main hover */
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#444;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul {visibility:visible;}

/* End Navbar Code */

[bigjon0107]

Thanks a ton! :bow

See if you like this. Ref. here (http://allen-steve.smugmug.com/gallery/2327835).
Replace your header html with this

<div id="my_header">

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li class="dotDrop">•</li>
<li><a class="drop" href="#nopick">Sports
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Sports/Volleyball">Volleyball</a></li>
<li><a href="/Sports/Baseball">Baseball</a></li>
<li><a href="/Sports/Softball">Softball</a></li>
<li><a href="/Sports/Soccer">Soccer</a></li>
<li><a href="/Sports/Basketball">Basketball</a></li>
<li><a href="/Sports/Football">Football</a></li>
<li><a href="/Sports/Tennis">Tennis</a></li>
<li><a href="/Sports/Swimming-and-Diving">Swimming &amp; Diving</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="dotDrop">•</li>
<li><a href="http://www.erinkathleen.com/index2.php">Weddings</a></li>
<li class="dotDrop">•</li>
<li><a href="/gallery/10886727_4Xkwn">Portraits</a></li>
<li class="dotDrop">•</li>
<li><a href="/galleries">Client Galleries</a></li>
<li class="dotDrop">•</li>
<li><a href="/gallery/3183805_Ux9dH">Contact</a></li>
</ul>
</div> <!-- closes menu -->

<div id="my_banner">
<a href="/">
<img src="/img/spacer.gif" alt="" border="0" height="80" width="400">
</a>
</div>

</div> <!-- closes my_header -->
CSS - Remove all the #navcontainer rules and change #my_header and #my_banner and add .menu stuff.

#my_header {
height: 65px;
border-bottom: 1px solid #ccc;
margin: 0 40px 15px; /* top right/left bottom*/
padding: 0;
}

#my_banner {
width: 400px; /* actual photo width and height */
height: 80px;
margin: 0;
background: url(http://www.eiltsphotography.com/photos/750750139_kCwYu-S.jpg) no-repeat;
}

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

.dotDrop {line-height: 20px;}

/* style the outer div to give it width */
.menu {
float: right;
z-index:99;
margin: 20px 0 0; /* top R/L bottom */
position:relative; /* Make the container moveable */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:130px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:auto; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12pt;
text-decoration:none;
color:#fff;
background:#000;
font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;
font-variant: small-caps;
width:auto; /* Defines the main box dimensions. */
height:20px; /*How tall your cells are*/
line-height:20px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 10px;
min-width: 50px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:100px; w\idth:100px;}

/* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#000;} /* only if 3rd level exists */

/* style the second level hover */
.menu ul ul a.drop:hover {background:#444;}
.menu ul ul :hover > a.drop {background:#444;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:20px;
left:-20px;
width:100px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#fff;
background:#000;
height:auto;
l ine-height:25px;
width:100px;
}


.menu ul ul :hover > a.drop {background:#999;} /* 2nd w/3rd */

/* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
color:#000; /* hover 2nd > 3rd & 4th */
background:#fff; /* hover 3rd > 4th */
height:20px;
line-height:20px;
width:100px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:100px; w\idth:100px;}

/* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
color:#fff;
background:#444;
}

/* main hover */
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#444;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul {visibility:visible;}

/* End Navbar Code */

[Allen]

Thanks a ton! :bow
Add this to CSS to clean up Contact gallery.

/* contact gallery */
.gallery_3183805 .pageNav,
.gallery_3183805 .notLoggedIn #breadcrumb {display: none;}

[photomagic]

I am about ready to start a home page similar to Andy's. How do I get the header and nav bar to appear on the same line like his? http://www.moonriverphotography.com/

Thank you!!

[kitkirk]

I currently have a navigation bar on my site, but it's not a drop down. I would like to add another link in my navbar, but I want it to be a dropdown link. Do I need to change my entire navbar, or is there a way to make just that one link dropdown?

Thank you,
Kit
www.kitkirkphotography.com

[kitkirk]

After some hunting, I think I may have found what I need. This is something Allen posted, am I on the right track?

"Menu with dropdown

Menu 1 Menu 2 Menu 3 Menu 4 Menu 5
Drop 1
Drop 2
Drop 3

<div class="menu">
<ul>
<li><a href="Link">Menu 1</a></li>
<li><a class="drop" href="Link">Menu 2
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">Drop 1</a></li>
<li><a href="Link">Drop 2</a></li>
<li><a href="Link">Drop 3</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="Link">Menu 3</a></li>
<li><a href="Link">Menu 4</a></li>
<li><a href="Link">Menu 5</a></li>
</ul>
</div>"

[Allen]

After some hunting, I think I may have found what I need. This is something Allen posted, am I on the right track?

"Menu with dropdown

Menu 1 Menu 2 Menu 3 Menu 4 Menu 5
Drop 1
Drop 2
Drop 3

<div class="menu">
<ul>
<li><a href="Link">Menu 1</a></li>
<li><a class="drop" href="Link">Menu 2
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">Drop 1</a></li>
<li><a href="Link">Drop 2</a></li>
<li><a href="Link">Drop 3</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="Link">Menu 3</a></li>
<li><a href="Link">Menu 4</a></li>
<li><a href="Link">Menu 5</a></li>
</ul>
</div>"
See this post
http://www.dgrin.com/showpost.php?p=1392305&postcount=1036

[kitkirk]

I tried adding another link to my navbar and making that link a dropdown. What I ended up with is my navbar not fitting on one line (instead of adding a new link to the navbar line, it moved the new link and another one below the navbar). Also, instead of a dropdown, the items that should have been in the dropdown are separate items. Here's the HTML that's troubling me:

<script>
if (hasPath("galleries"))
YD.addClass(document.body, "galleries");
</script>
<div id="my_banner"><a href="/galleries"><img src="/img/spacer.gif" width="776" height="129" border="0" /></a></div>

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/6604300_WLF6E">About KKP</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/6607830_KA5Gs">Pricing</a></li>
<li><a class="drop" href="Link">Articles
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="12307660_5cL3d">What am I Paying For?</a></li>
<li><a href="12307655_wZcTG">The Coveted Digital Images</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/6604316_nqmTk">Session FAQ</a></li>
</ul>
</div>

My standard navbar worked perfectly until I added the red portion. What did I do wrong?

[Allen]

I tried adding another link to my navbar and making that link a dropdown. What I ended up with is my navbar not fitting on one line (instead of adding a new link to the navbar line, it moved the new link and another one below the navbar). Also, instead of a dropdown, the items that should have been in the dropdown are separate items. Here's the HTML that's troubling me:

<script>
if (hasPath("galleries"))
YD.addClass(document.body, "galleries");
</script>
<div id="my_banner"><a href="/galleries"><img src="/img/spacer.gif" width="776" height="129" border="0" /></a></div>

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/6604300_WLF6E">About KKP</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/6607830_KA5Gs">Pricing</a></li>
<li><a class="drop" href="Link">Articles
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="12307660_5cL3d">What am I Paying For?</a></li>
<li><a href="12307655_wZcTG">The Coveted Digital Images</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/6604316_nqmTk">Session FAQ</a></li>
</ul>
</div>

My standard navbar worked perfectly until I added the red portion. What did I do wrong?
You added it to your current nav html <div id="navcontainer">. A different
set of CSS will need to be added to support drops. If you look at the
examples I posted it uses <div class="menu"> and the CSS uses .menu
instead of #navcontainer.

You could leave it as <div id="navcontainer"> but in the (new) CSS all
instances of .menu will have to be change to #navcontainer.

In the first nav CSS rule increase the width by a little until it doesn't wrap
to two lines.

[kitkirk]

Hmm, my CSS already has #navcontainer, not .menu. I tried changed the html to be <div class="menu">, and changing the CSS to .menu which didn't work either. Any other suggestions?

[Allen]

Hmm, my CSS already has #navcontainer, not .menu. I tried changed the html to be <div class="menu">, and changing the CSS to .menu which didn't work either. Any other suggestions?
There is a whole new set of CSS to support the drop menu. You can not just
edit the current navcontainer CSS set.

[kitkirk]

Well, I changed the entire CSS to what was recommended and still didn't get it to work. I'm giving up for now and going in another direction :)

Thank you for your help though!

[Allen]

Well, I changed the entire CSS to what was recommended and still didn't get it to work. I'm giving up for now and going in another direction :)

Thank you for your help though!
It will work, put what you have in and we'll look.

[wtFstop]

I'm having a little trouble with my NavBar. I wanna center it, change the color, and something is wrong with my drop down for the "Weddings" category. It's being cut off. Can someone help please?

http://www.wideopenaperture.com/

Thank you!

[Allen]

I'm having a little trouble with my NavBar. I wanna center it, change the color, and something is wrong with my drop down for the "Weddings" category. It's being cut off. Can someone help please?

http://www.wideopenaperture.com/

Thank you!
Replace your html with this, fixes some errors.

<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited by me for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->
<div align="center">
<div class="menu">
<ul>
<!-- First Main Menu Item -->
<li><a class="drop" href="/" title="">Home
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Contact/ContactUs/" title="">Contact Us</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- Next Main Menu Item -->
<li><a class="drop" href="/Galleries" title="">Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="/Weddings" title="">Weddings»
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Weddings/KimDarryl/12289425_99pEF">Kim &amp; Darryl</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</li>
<li><a class="drop" href="/Portraits" title="">Portraits»
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Portraits/Portfolio/12288207_VKALo/">Portraits</a></li>
<li><a class="drop" href="/Portraits/Engaged" title="">Engaged!»
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Portraits/Engaged/LaineyAlex-Engaged/12287967_VP3PQ">Lainey &amp; Alex</a></li>
<li><a href="/Portraits/Engaged/MelindaEddie-Engaged/12287160_sS34J/">Melinda &amp; Eddie</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</li>
</ul>
</div>
</div>
<!-- End Navbar Code -->

Switch the nav CSS to this, we'll get the colors etc. to your liking after it's in.

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto 20px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:250px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:130px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:auto; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12pt;
text-decoration:none;
color:#9B9094;
background:#290203;
border:1px solid #9B9094;
border-width:1px 1px 1px 1px;
font-family: Comic Sans MS, verdana, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are */
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 10px;
min-width: 100px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:130px; w\idth:130px;}

/* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#290203;} /* w/3rd */

/* style the second level hover */
.menu ul ul a.drop:hover {background:#290203;}
.menu ul ul :hover > a.drop {background:#290203;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#eee;} /* not FF */

/* style the third level hover */
.menu ul ul ul a:hover {background:#290203;}
.menu ul ul ul :hover > a {background:#290203;} /* 3rd (w/o 4th) 4th hover */

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:130px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* position the third level flyout menu */
.menu ul ul ul {
left:122px;
top:0;
width:160px;
height:auto;
}

.menu ul ul ul li a {
color:#9B9094;
}

/* position the fourth level flyout menu */
.menu ul ul ul ul {
left:132px;
top:0;
width:130px;
height: auto !important;
}

.menu ul ul ul ul li a {
color:#9B9094;
width:130px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#9B9094;
background:#290203;
height:25px;
line-height:25px;
width:100px;
}


.menu ul ul :hover > a.drop {background:#290203;} /* 2nd w/3rd */

/* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
color:#ddd; /* hover 2nd > 3rd & 4th */
background:#290203; /* hover 3rd > 4th */
height:25px;
line-height:25px;
width:110px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:120px; w\idth:120px;}

/* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
color:#ddd;
background:#290203;
}

/* main hover */
.menu :hover > a, .menu ul ul :hover > a {
color:#ddd;
background:#290203;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul {visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul {visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */

Remove this from your CSS and the above CSS will work.

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16612263-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

[wtFstop]

Thank you so much! I got all the right codes in, but can you help me with changing the font, color and centering the nav bar? Thank you again!

[wtFstop]

and also, I need help with another thing. The navbar isn't active on other pages on my site. how do i get that to work?
and is there a cleaner way for the navbar to drop down? sometimes when i try to hover over items it just autmatically disappears and i have to go try it again carefully because of other links/text in the way.

[Allen]

Thank you so much! I got all the right codes in, but can you help me with changing the font, color and centering the nav bar? Thank you again!

and also, I need help with another thing. The navbar isn't active on other pages on my site. how do i get that to work?
and is there a cleaner way for the navbar to drop down? sometimes when i try to hover over items it just autmatically disappears and i have to go try it again carefully because of other links in the way.
Remove the extra / here, it's messing with the nav formatting.

//* CSS Dropdown Nav Bar*/

Make sure under gallery settings custom is set for appearance and hide owner is not checked.

What fonts and colors do you want?

[wtFstop]

For font i just want verdana. and color to be transparent is that possible/?

[Allen]

For font i just want verdana. and color to be transparent is that possible/?
Change these two lines. Only the main can be transparent, drops can not.
Using IE when you slide the mouse down the drop if there is no background
you lose the drop. Best that be done is make all the drop backgrounds the
same color as the page.

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12pt;
text-decoration:none;
color:#9B9094;
background: none;
border:1px solid #9B9094;
border-width:1px 1px 1px 1px;
font-family: verdana;
width:auto; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are */
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 10px;
min-width: 100px;
}

Here's the whole new set with background colors fixed and a few other fixes.

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto 20px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:250px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:130px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:auto; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12pt;
text-decoration:none;
color:#9B9094;
background:none;
/* border:1px solid #9B9094; */
/* border-width:1px 1px 1px 1px; */
font-family: verdana;
width:auto; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are */
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 10px;
min-width: 100px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:130px; w\idth:130px;}

/* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#40403E;} /* w/3rd */

/* style the second level hover */
.menu ul ul a.drop:hover {background:#40403E;}
.menu ul ul :hover > a.drop {background:#40403E;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#40403E;} /* not FF */

/* style the third level hover */
.menu ul ul ul a:hover {background:#40403E;}
.menu ul ul ul :hover > a {background:#40403E;} /* 3rd (w/o 4th) 4th hover */

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:130px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* position the third level flyout menu */
.menu ul ul ul {
left:120px;
top:0;
width:160px;
height:auto;
}

.menu ul ul ul li a {
color:#9B9094;
}

.menu ul ul ul li a:hover {
color:#ddd;
}

/* position the fourth level flyout menu */
.menu ul ul ul ul {
left:130px;
top:0;
width:130px;
height: auto !important;
}

/* 4th level non-hover */
.menu ul ul ul ul li a {
color:#9B9094;
width:150px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
color:#9B9094;
background:#40403E;
height:25px;
line-height:25px;
width:100px;
}

.menu ul ul :hover > a.drop {background:#40403E;} /* 2nd w/3rd */

/* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
color:#9B9094; /* hover 2nd > 3rd & 4th */
background:#40403E; /* hover 3rd > 4th */
height:25px;
line-height:25px;
width:110px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:120px; w\idth:120px;}

/* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
color:#ddd;
background:#40403E;
}

/* main hover */
.menu :hover > a, .menu ul ul :hover > a {
color:#ddd;
background:#40403E;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul {visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul {visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */

[Allen]

See new sticky thread for dropdown navbar help.
http://www.dgrin.com/showthread.php?t=168571

[Fram]

Making your header not so wide would involve one or more of the following:


Smaller graphic
Smaller font for the navbar
Fewer items in the navbar
Switching to a design with graphic above navbar and both centered

Which to use is your design choice.

To get your header centered, change the part in red below in your CSS:

#my_header {
margin: 40px auto 15px; /* top right/left bottom*/
padding: 0 20px 5px; /* top right/left bottom*/
border-bottom: 2px solid #ccc;
max-width: 1200px;
}
Where do you want the search box to be? Right now it's just hanging out by itself and is not part of your header. Where do you want it? Centered below your header. Centered in your header? Right-aligned in your header?


Hi!

After these adjustments, homepage looks fine in FF (like I would like to have it). Except mysearch which I need to fix right side below header.
But in IE the middle section (slideshow and video boxes) are not centered anymore. How to fix that.
http://timopalo.smugmug.com/

Thanks for help in advance!

Timo

[jfriend]

Hi!

After these adjustments, homepage looks fine in FF (like I would like to have it). Except mysearch which I need to fix right side below header.
But in IE the middle section (slideshow and video boxes) are not centered anymore. How to fix that.
http://timopalo.smugmug.com/

Thanks for help in advance!

TimoThe CSS for the search box is causing the problem in IE. The easiest way to fix that is to change your design to center the search box (which looks more balanced to me anyway). To do that, just remove the line in red from your CSS:

#mysearch {
text-align: center;
float: right;
margin: 0 auto;
}

If this isn't the solution you want, let me know as it's more involved to right align your search box correctly (we will have to add some container divs to your header).

[Fram]

The CSS for the search box is causing the problem in IE. The easiest way to fix that is to change your design to center the search box (which looks more balanced to me anyway). To do that, just remove the line in red from your CSS:

#mysearch {
text-align: center;
float: right;
margin: 0 auto;
}If this isn't the solution you want, let me know as it's more involved to right align your search box correctly (we will have to add some container divs to your header).

Thanks again John!
I am happy with it in the middle.

All the best to you!

Timo

[Andy]

Thread closed, new thread started, here:
http://www.dgrin.com/showthread.php?t=168571

Thanks!