[krakatoa]

Here's an easy method to create CSS rollovers (in this example b1.gif and b2.gif are the two button states):

<style>
img.nohover {border:0}
img.hover {border:0;display:none}
A:hover img.hover {display:inline}
A:hover img.nohover {display:none}
</style>
<A HREF="#">
<img src="b1.gif" class="nohover">
<img src="b2.gif" class="hover">
</A>

[Kannan]

Thkz Ben and ErisDS....it really helped me a lot...

[Neji]

Thanks for posting this.

I have one problem which I hope someone can help me with. I'm using this code but I have the nav bar in the center of the page. It is basically the same as the original but a different graphics, obviously. I'm trying to get the bar to extend to the side of the browser, no matter what resolution/size the user is using. I thought of using a background image that repeats but this code already uses a background image.

How can I make this happen using CSS?

[Ben]

Hi,

Thanks for the comments.

You can apply a background colour with an image e.g. { background: #ccc url(menu.jpg) no-repeat 0 0; width 100%} - you'll need to set the position/repeat properties as you have to sit image centrally, but the #ccc - part means the background colour will span 100% width whilst keeping the main navigation images centrally.

Is that what you mean? If not, post the code you have and i'll try and assist you

[Neji]

http://www.fmlbadges...test/index.html

That is the site, if you look at my code, I did it by making a background of the image. That probably isn't a good way of doing it

You can see that the extensions of the menu bar would be an image. Hope that makes sense.

Thanks for the quick reply, btw.

[Ben]

Neji, on Mar 13 2009, 23:14, said:

Thanks for the quick reply, btw.

No trouble, ok i've checked out your site, the nav grey bar is spanning 100% width with the actual nav buttons sitting centrally. Did you want the nav buttons on the actual side and not centered?

[Neji]

I want the nav buttons to sit under the logo because I plan to have a search under the join now banner. Then I want the grey bar itself to reach to the end of the browser window.

[Ben]

Hi,

Sorry for the questions, but i've been on your website and what you are asking to happen, already seems to be working... See my screenshot attached

Green arrows indicated the 100% width of grey bar and Red arrow indicates the nav is sitting under the logo...

Am I missing something here?

 eden.jpg (21.41K)
Number of downloads: 6

[Neji]

Don't worry about all the questions, I appreciate the help.

If you look at my CSS, I'm actually using a background image in the body tag. So, the bar you see is actually part of the sites background not part of the navbar. I'm sure there must be a better way?

The problem is, in IE the background/nav bar don't match so I want to beable to position the navbar and I can't do that if it is part of the background image.

[Neji]

I've uploaded my current code, I've been trying to do this but still cannot get it right.

Clicky

I want it took look like the image posted above by Ben.

Thanks in advance for any help.

[Showtime]

EDIT: nevermind, solved own problem.

Very useful tutorial!

[Chris1993]

Hi, thanks for the great tutorial, its taught me a lot about CSS (or rather more or less everything I know about CSS ) however I still can't get one thing to work...drop downs. I know its not intended to be there originally but I've spent several days now trying to add them to it with little success, can anyone give some pointers for adding them?

Many thanks once more.

[Chris1993]

Doesn't matter any more, I've finally worked out a way to do it, even if inefficiently.

[liz]

krakatoa, on 28 November 2008 - 11:38 AM, said:

Here's an easy method to create CSS rollovers (in this example b1.gif and b2.gif are the two button states):

<style>
img.nohover {border:0}
img.hover {border:0;display:none}
A:hover img.hover {display:inline}
A:hover img.nohover {display:none}
</style>
<A HREF="#">
<img src="b1.gif" class="nohover">
<img src="b2.gif" class="hover">
</A>

[liz]

Hi, I found your tutorial very helpful and it works great. Have you used this with any method of showing the current page you are on by having it display in the rollover state when you are on that page? I tried to use your rollover with the javascript method on this page http://www.richnetap...urrent_page_in/ to create a current page marker but couldn't get it to work. Maybe it's because I'm not using a list and don't know how to call it up correctly.

Thanks,
L

[bisto]

Hi Ben,

Well done on the tutorial!
This was just what i was looking for and i will be trying it out, soon.

Thanks alot!

[jamezb3]

Thanks heaps for the tut, really easy to follow and works a treat

[KellyB]

Hi great tutorial.
Not sure if you can help but after adding this navigation menu to my test website all appears fine except in internet explorer 7. In ie7 the menu is pushed to the right and is hidden until you rollover the menu when the hover image shows. Can anyone tell me what I am missing please? Site is http://www.norkey.com/pov/test and css is located here http://norkey.com/po.../css/layout.css

I'm a beginner to css so not sure what I've done wrong.

Thanks
Kelly

[LenP]

nice tutorial, very helpful!

Try as I might however, I cannot get the 'hover' to change image position. It stays on the top half of the image.

Basically followed your code but added a 5th button and changed some names around.

Any thoughts?

TIA,
Len

[cibgraphics]

Just use a CSS sprite. Less requests, controllable from the CSS instead of inline HTML, and sometimes smaller file size.

This seems more of like a poor hack when you don't know how to do it correctly.

[nauset]

Hello forum

Thanks for the tutorial, it's very useful. my question is about nav buttons with different widths- I saw that it was mentioned but I'm a beginner in CSS and I would love a visual explanation so I can learn. i'm using 6 buttons, the first three are around the same width as the default in the tutorial. the next two are almost twice as big, and i'm struggling.

any help would be appreciated. thanks. i've uploaded my test page, as i don't want to live update my portfolio site until i know it's perfect.

http://nausetee.net/...r-tutorial.html

This post has been edited by nauset: 06 December 2011 - 03:53 AM