Originally Posted by jfriend I can't tell exactly what you're trying to do, but you can try this navbar CSS (lines changed are in red) to at least get the CSS rules firing:

Just trying to get my existing navbar to work with your script so I can have the current page show up selected :)

Thanks, the changes you gave me got it at least working, though my "current" button seems to be getting cut off a bit. I probably just need to play with my CSS for it as bit.

Originally Posted by jwvanderbeck Just trying to get my existing navbar to work with your script so I can have the current page show up selected :) Thanks, the changes you gave me got it at least working, though my "current" button seems to be getting cut off a bit. I probably just need to play with my CSS for it as bit.

grr.. Well it displays the different style on the currently selected page, but for the life of me I can't figure out how to fix the display of that style. If you look at it, it properly has the right border but not the left. You can see the proper left and right borders in the mouse over style. The selected style is the same image, just a different color yet it won't display properly :(

Originally Posted by jwvanderbeck grr.. Well it displays the different style on the currently selected page, but for the life of me I can't figure out how to fix the display of that style. If you look at it, it properly has the right border but not the left. You can see the proper left and right borders in the mouse over style. The selected style is the same image, just a different color yet it won't display properly :(

Again, I don't know exactly what you're trying to do or how it's supposed to work, but the background image you're using is 260px wide so that's how far apart the corners are (way further than your buttons are wide). Since you're specifying the top right position, you're only seeing the right edge.

Originally Posted by jfriend Again, I don't know exactly what you're trying to do or how it's supposed to work, but the background image you're using is 260px wide so that's how far apart the corners are (way further than your buttons are wide). Since you're specifying the top right position, you're only seeing the right edge.

I'm just trying to get the #2 menu from here: http://www.cssplay.co.uk/menus/pro_horizontal.html working like it was intended.

I'm just hacking my way along though :( The image you mention is the same as the mouseover one and that one works fine.

Originally Posted by jwvanderbeck I'm just trying to get the #2 menu from here: http://www.cssplay.co.uk/menus/pro_horizontal.html working like it was intended. I'm just hacking my way along though :( The image you mention is the same as the mouseover one and that one works fine.

First, please add your site link to your dgrin signature so it's in every post. Every time I want to answer you, I have to scroll back in the thread (now on a previous page) to find your site link.

Just so you know, the two ".menu2 .navCurrentPage a:hover" CSS rules are doing nothing. Remove them and nothing changes. So, I don't think you want the highlight rules to work the same way as those.

I figured out how the rules work. Change your navbar CSS to this:

/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_two */
.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(http://www.landscapesandcityscapes.com/photos/801074246_Wf4ae-X3.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444; !important;}
.menu2 li {float:left; !important;}
.menu2 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu2 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu2 a.navCurrentPage b {color:#fff; background:url(http://www.landscapesandcityscapes.com/photos/801074251_vDnqa-X3.gif) no-repeat top right !important;}
.menu2 a.navCurrentPage {color:#fff; background:url(http://www.landscapesandcityscapes.com/photos/801074251_vDnqa-X3.gif) no-repeat top left !important;}
.menu2 li a:hover {color:#fff; background:#000 url(http://www.landscapesandcityscapes.com/photos/801074253_Vafxf-X3.gif);}
.menu2 li a:hover b {background:url(http://www.landscapesandcityscapes.com/photos/801074253_Vafxf-X3.gif) no-repeat right top;}

They have two copies of the background image. One is a background on the <a> tag and it top right position with 10px cut off on the left edge. The other is a background on the <b> tag and is top left position, giving you both edges.

FYI, none of your !important statements were working so I removed the ones that were not needed and fixed the two that were. You should look up on Google how !important works in CSS. It goes before the ; at the end of a particular rule, not after it.

Originally Posted by jfriend First, please add your site link to your dgrin signature so it's in every post. Every time I want to answer you, I have to scroll back in the thread (now on a previous page) to find your site link. Just so you know, the two ".menu2 .navCurrentPage a:hover" CSS rules are doing nothing. Remove them and nothing changes. So, I don't think you want the highlight rules to work the same way as those. I figured out how the rules work. Change your navbar CSS to this: /*Credits: CSSpplay */ /*URL: http://www.cssplay.co.uk/menus/pro_two */ .menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(http://www.landscapesandcityscapes.com/photos/801074246_Wf4ae-X3.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444; !important;} .menu2 li {float:left; !important;} .menu2 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;} .menu2 li a b {float:left; display:block; padding:0 16px 0 8px;} .menu2 a.navCurrentPage b {color:#fff; background:url(http://www.landscapesandcityscapes.com/photos/801074251_vDnqa-X3.gif) no-repeat top right !important;} .menu2 a.navCurrentPage {color:#fff; background:url(http://www.landscapesandcityscapes.com/photos/801074251_vDnqa-X3.gif) no-repeat top left !important;} .menu2 li a:hover {color:#fff; background:#000 url(http://www.landscapesandcityscapes.com/photos/801074253_Vafxf-X3.gif);} .menu2 li a:hover b {background:url(http://www.landscapesandcityscapes.com/photos/801074253_Vafxf-X3.gif) no-repeat right top;} They have two copies of the background image. One is a background on the <a> tag and it top right position with 10px cut off on the left edge. The other is a background on the <b> tag and is top left position, giving you both edges. FYI, none of your !important statements were working so I removed the ones that were not needed and fixed the two that were. You should look up on Google how !important works in CSS. It goes before the ; at the end of a particular rule, not after it.

Thank you SO much John. Both for your patience, and for your help. It works perfectly now. Sorry about the site link. I didn't think about it. I haven't gotten around to adding it into my signature yet since i'm still building the site up.

Hi,

I have copied the both of the scripts and all i want is the yellow line on the top and bottom of the words like yours. Nothing seems to show up and was wondering if you could have a look and help if you can.

Many thank

Assaf

My website is

www.arbiser.com

Originally Posted by aarbiser Hi, I have copied the both of the scripts and all i want is the yellow line on the top and bottom of the words like yours. Nothing seems to show up and was wondering if you could have a look and help if you can. Many thank Assaf My website is www.arbiser.com

You got the javascript correct, but not the CSS. Change your CSS to this:

/* highlight individual menu items when their page is current */
#customNav .navCurrentPage {background: none; border-bottom: 1px solid #CCCC00; border-top: 1px solid #CCCC00;}

thanks, That is great. It works well except on weddings and celebrations and the pro bono page.
Any other suggestions would be great.

Thanks

Assaf

www.arbiser.com

Originally Posted by aarbiser thanks, That is great. It works well except on weddings and celebrations and the pro bono page. Any other suggestions would be great. Thanks Assaf www.arbiser.com

For those two pages, you have to change the links in your navbar to match the resulting URL that shows in the browser because that's how the code knows you're on that page so it can highlight the navbar for that page. You have spaces in the URL in the navbar, but Smugmug puts dashes in the URL in the browser. Change your navbar to use the dashes.

All done. Thank you for all your help

John,

This is a great idea. I like what you've done here. My code works perfectly in Firefox and a little slow in IE. If you use IE, click on Home, Galleries or Search and move the mouse away quickly, the bars don't show. When you move the mouse back, it lights the bars. I've tried moving the code around but same results. Again, Firefox works all the time.

Any thoughts? http://www.brucefratto.com/mapGallery

Thanks for sharing your code.

Bruce

Originally Posted by Fritz John, This is a great idea. I like what you've done here. My code works perfectly in Firefox and a little slow in IE. If you use IE, click on Home, Galleries or Search and move the mouse away quickly, the bars don't show. When you move the mouse back, it lights the bars. I've tried moving the code around but same results. Again, Firefox works all the time. Any thoughts? http://www.brucefratto.com/mapGallery Thanks for sharing your code. Bruce

I don't see any issues with the code. It always highlights for me when the mouse isn't over the selected item (you have the mouse item displaying something different). I do see a javascript error that could be interfering.

Remove the comma at the end of this line:

flashRequiredHTML: "Please install <b>Adobe Flash</b> so you can see my slideshow.  Click on the Guest Book Menu, then on the Adobe hotlink in the Notes section.",

Originally Posted by jfriend I don't see any issues with the code. It always highlights for me when the mouse isn't over the selected item (you have the mouse item displaying something different). I do see a javascript error that could be interfering. Remove the comma at the end of this line: flashRequiredHTML: "Please install <b>Adobe Flash</b> so you can see my slideshow. Click on the Guest Book Menu, then on the Adobe hotlink in the Notes section.",

I took out the comma. Same results. Also have the same results from my laptop. Appears to be related to the larger page loads. Blog works fine also. If I keep the mouse on the navigation bar for 2 sec. it works. . . strange.

Thanks for looking.

Originally Posted by Fritz I took out the comma. Same results. Also have the same results from my laptop. Appears to be related to the larger page loads. Blog works fine also. If I keep the mouse on the navigation bar for 2 sec. it works. . . strange. Thanks for looking.

I don't know. Works fine here so I can't see the problem to offer any ideas.

I've beat my head against the wall for 2 days trying to make my navbar button show the current page. The code I currently "thought" I had used was for the double yellow line. I can't get it to work so I'm giving in and asking for help. Thanks for any suggestion!

Originally Posted by MRagon I've beat my head against the wall for 2 days trying to make my navbar button show the current page. The code I currently "thought" I had used was for the double yellow line. I can't get it to work so I'm giving in and asking for help. Thanks for any suggestion!

Change your CSS to this:

/* highlight individual menu items when their page is current */
#customNav .navCurrentPage {background: none; border-bottom: 1px solid #CCCC00; border-top: 1px solid #CCCC00;}

Originally Posted by jfriend Change your CSS to this: /* highlight individual menu items when their page is current */ #customNav .navCurrentPage {background: none; border-bottom: 1px solid #CCCC00; border-top: 1px solid #CCCC00;}

Thank you!!! What a difference a small difference can make. I really appreciate the help.

I installed the code i believe the correct way. It seems to work with the home page, portfolio, Galleries pages (the photographer page is still under construction) but as soon as you go into a gallery or category it highlights "contact." I am not sure what I am doing wrong or how to fix it....

What a difference a small difference can make. I really appreciate the help.

I can second this comment.

Originally Posted by blzrdphoto I installed the code i believe the correct way. It seems to work with the home page, portfolio, Galleries pages (the photographer page is still under construction) but as soon as you go into a gallery or category it highlights "contact." I am not sure what I am doing wrong or how to fix it.... I can second this comment.

The problem is caused by the link in your contact navbar entry which is just href="#". If there's some way you can change that, the issue would go away. If not, then the script will have to be modified to somehow detect a fake link like that.