Hey All,

I posted before, but I would like to use buttons instead of just the text for my nav bar. Currently I just have the basic CSS nav bar and I would just like to incorporate images.

Any help would be great.

www.owuphotos.com

Thank you

Originally Posted by Allen See if this html works better. One example of a common thing missing is in red.

Hi Allen,

same problem after updating the custom header.

Originally Posted by baikodaker Hi Allen, same problem after updating the custom header.

It now works in IE8. What version browsers doesn't it work in?

Originally Posted by Allen It now works in IE8. What version browsers doesn't it work in?

i'm testing on IE 6.
thanks!

--- it ok now Allen.
i change this
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px; ----> from 15 to 30
t\op:30px; /* IE gap between main bar and the dropdown items */ ----> from 15 to 30
}

Allen- I deleted one of the Nav Bar items (Favorite Images), and want to center the others- how do I change the code to do that?

Thanks!

Originally Posted by Allen See if you like this. Add this to your header box on your customize page. <!-- Original code by Stu Nicholls of --> <!-- http://www.cssplay.co.uk/ --> <!-- Edited for content, formatting, and some elements --> <!-- Please help support CSSPlay at: --> <!-- http://www.cssplay.co.uk/support.html --> <div class="menu"> <ul> <li><a class="drop" href="http://experienceplus.smugmug.com/Our%20Tours%20by%20Country">Our Tours- by Country <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="/Our-Tours-by-Country/Chile" title="">Chile</a></li> <li><a href="/Our-Tours-by-Country/Spain" title="">Spain</a></li> <li><a href="/Our-Tours-by-Country/Italy" title="">Italy</a></li> <li><a href="/Our-Tours-by-Country/Germany" title="">Germany</a></li> <li><a href="/Our-Tours-by-Country/France" title="">France</a></li> <li><a href="/Our-Tours-by-Country/Greece" title="">Greece</a></li> <li><a href="/Our-Tours-by-Country/Croatia" title="">Croatia</a></li> <li><a href="/Our-Tours-by-Country/Argentina" title="">Argentina</a></li> <li><a href="/Our-Tours-by-Country/Eastern Europe" title="">Eastern Europe</a></li> <li><a href="/Our-Tours-by-Country/Costa Rica" title="">Costa Rica</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li>&nbsp;|&nbsp;</li> <li><a href="http://experienceplus.smugmug.com/Favorite%20Images">Favorite Images</a></li> <li>&nbsp;|&nbsp;</li> <li><a href="http://www.experienceplus.com">Return Home</a></li> </ul> </div> <!-- closes menu --> <!-- End Navbar Code --> Add this to your CSS /* CSS Dropdown Nav Bar */ /* Original code by Stu Nicholls of */ /* http://www.cssplay.co.uk/ */ /* Edited 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:630px; /* 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; } /* 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; position:relative; padding: 0; } /* style the links for the top level */ .menu a, .menu a:visited { display:block; font-size:14pt; text-decoration:none; color:#F4F7F1; background:#bbb; font-family: verdana; width:auto; /* Defines the main box dimensions. */ height:25px; /*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: 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:#bbb;} /* if 3rd level exists */ /* style the second level hover */ .menu ul ul a.drop:hover {background:#bbb;} .menu ul ul :hover > a.drop {background:#bbb;} /* 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:15px; width:150px; /* 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 part in the layout */ .menu table {position:absolute; top:0; left:0;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { color:#F4F7F1; background:#bbb; height:25px; line-height:25px; width:150px; } .menu ul ul :hover > a.drop {background:#bbb;} /* 2nd if 3rd level exists */ /* 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:#A4A4A4; background:#bbb; } /* main hover */ .menu :hover > a, .menu ul ul :hover > a { color:#A4A4A4; background:#bbb; } /* make the 2nd level visible when hover on 1st level list OR link */ .menu ul :hover ul {visibility:visible;} /* End Navbar Code */

Originally Posted by smmokan Allen- I deleted one of the Nav Bar items (Favorite Images), and want to center the others- how do I change the code to do that? Thanks!

Looks centered here, get it solved? Minimize the width in the first .menu rule
until it doesn't wrap to two lines will center it.

I'm having some trouble with this. I've followed the advise on the first page, but it doesn't seem to have effect. The first issue is alignment - the menu needs to be on the right side, at the top, and the banner on the left. The menu just seems to stick on in the middle though, I can't get it to move.

The second issue is the 'about me' and 'contact' links. They seem to be aligning seperately and are a different colour.

I would just like it all at the top, on the right, the same colour, but it doesn't seem to want to do that :(. Any advise?

Very greatful for this dropdown option btw. It's something I've wanted for a few months and just noticed it on here yesterday whilst searching for something else. The actual drop down works fine, it is just alignment/positioning.

Thanks for any advise!

www.rharris-images.com

Originally Posted by rharris I'm having some trouble with this. I've followed the advise on the first page, but it doesn't seem to have effect. The first issue is alignment - the menu needs to be on the right side, at the top, and the banner on the left. The menu just seems to stick on in the middle though, I can't get it to move. The second issue is the 'about me' and 'contact' links. They seem to be aligning seperately and are a different colour. I would just like it all at the top, on the right, the same colour, but it doesn't seem to want to do that :(. Any advise? Very greatful for this dropdown option btw. It's something I've wanted for a few months and just noticed it on here yesterday whilst searching for something else. The actual drop down works fine, it is just alignment/positioning. Thanks for any advise! www.rharris-images.com

Replace your header with this, fixes a bunch of errors.

<div class="menu">
<ul>
<li><a class="drop" href="/Art" title="">Art
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="/Art/Landscapes/8835835_z2HSq" title="">Landscape</a></li>
        <li><a href="/Art/dArt/8846680_PpcNq" title="">Digital Art</a></li> 
        <li><a href="/Art/Still-Life/8784524_HFzT6" title="">Still Life</a></li> 
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="/Wedding-Photography" title="">Weddings
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul> 
        <li><a href="/Wedding-Photography/Your-Wedding/11673998_2N2BS" title="">Your Wedding</a></li>
        <li><a href="/Wedding-Photography/Shropshire/11406156_Xd6wv" title="">Sample Gallery</a></li>
        <li><a href="/Wedding-Photography/ShropshireWeddings/11451300_6o2CA" title="">Price Packages</a></li>
        <li><a href="/Wedding-Photography/Testimonials/11681955_hobgs" title="">Testimonials</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="/Lens-Conversion/Rokkor-to-Sony" title="">Lens Services
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="/Lens-Conversion/Rokkor-to-Sony/Items-and-pricing/11433742_5K2xx" title="">Rokkor Digital</a></li>
        <li><a href="/Lens-Conversion/Rokkor-to-Sony/Samyang-chipped-mount/12501168_kKCfg" title="">Samyang Chipping</a></li>
        <li><a href="/Lens-Conversion/Rokkor-to-Sony/Nikon-to-Sony/12053610_gCegu" title="">Sony Shift</a></li>
        <li><a href="/Lens-Conversion/Rokkor-to-Sony/Testimonials/11855175_cHYYp" title="">Testimonials</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="/Other/About-me/9379986_4LHzT" title="Info on photographer Richard Harris">About me</a></li>
<li><a href="http://rharris.wufoo.com/forms/z7x4z5/" title="Get in touch with me!">Contact</a></li>
</ul>
</div>

CSS change

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

Allen, thats excellent, thank you! Everything is together now. Any tips for aligning it to the right though?

Originally Posted by rharris Allen, thats excellent, thank you! Everything is together now. Any tips for aligning it to the right though?

Change this CSS rule like this.

      /* style the outer div to give it width */
.menu {
   z-index:99;
   float: right;
   margin: 20px auto 20px;  /* top R/L bottom */
   width:640px;          /* Main bar total width, minimize to center */
}

Perfect! Thanks for your time Allen :)

I'am using this nav bar on my site www.tombetserphotography.com is there a way to make the nav bar have rounded corners instead of square corners.

Originally Posted by Allen Looks centered here, get it solved? Minimize the width in the first .menu rule until it doesn't wrap to two lines will center it.

OK, I have it aligned so that it looks great in Firefox. However, when I test it in IE6, it shows on two lines. How do I fix that?



Thanks!!!

Originally Posted by betser I'am using this nav bar on my site www.tombetserphotography.com is there a way to make the nav bar have rounded corners instead of square corners.

Ditto! Was just about to ask that. Would really love to have the corners rounded instead of square.

Originally Posted by smmokan OK, I have it aligned so that it looks great in Firefox. However, when I test it in IE6, it shows on two lines. How do I fix that? Thanks!!!

Increase the width in this a little at a time until it doesn't wrap.
630 > 640 > 650 > ...

      /* 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:630px;          /* Main bar total width, minimize to center */
}

Originally Posted by rharris Ditto! Was just about to ask that. Would really love to have the corners rounded instead of square.

There is a way that works in Firefox but not in IE browsers.

btw, might increase the top in this so the drops are below the main.

      /* 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:35px;
   left:0; 
   width:130px;  /* Size of the daughter cells */
}

Originally Posted by Allen Increase the width in this a little at a time until it doesn't wrap. 630 > 640 > 650 > ... /* 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:630px; /* Main bar total width, minimize to center */ }

But if I do that, it will off-center the Firefox version.... is it Robbing Peter to Pay Paul here?

Originally Posted by smmokan But if I do that, it will off-center the Firefox version.... is it Robbing Peter to Pay Paul here?

It won't take much of an increase, a few pixels, and probably will not be very
noticeable.

Originally Posted by betser I'am using this nav bar on my site www.tombetserphotography.com is there a way to make the nav bar have rounded corners instead of square corners.

what I need to do is to have round corners on each of the drop down menu's. instead of them having square corners.

Originally Posted by Allen It won't take much of an increase, a few pixels, and probably will not be very noticeable.

No luck. I have it set at 430 pixels right now, and that centers the drop-down in Firefox. I went up to 500 pixels, and when I did that it made it extremely off-centered in Firefox and yet it still didn't fix the problem in IE6. Any other suggestions?