homepage Welcome to WebmasterWorld Guest from 107.21.163.227
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS menu/nav bar
What's the trick to get a rollover effect?
DiAMOndDavE




msg:1177489
 3:16 am on Nov 7, 2002 (gmt 0)

Hello folks,

Relatively new to CSS so hope I can phrase myself correctly here. I am trying to code a menu bar using only CSS. I have a Photoshop mock up of what I am trying to achieve:

<snip>

I would like a row of links all with a 1 pixel white border and a background colour. When the user mouses into the 'cell' the text colour and background colour change. I can get the text to change colour on a:hover but not the WHOLE background cell (only behind the text).

There was a similar post here 2 weeks ago but the solutions were using JavaScript and for a menu bar that ran downwards - both of which I don't want.

Is there a simple solution using CSS only? I'm sure there is only I am going mad trying to find it. Can anyone help me in the right direction?

Regards
DiAMOndDavE

[edited by: Woz at 3:24 am (utc) on Nov. 7, 2002]
[edit reason] TOS#14 [/edit]

 

Woz




msg:1177490
 3:26 am on Nov 7, 2002 (gmt 0)

There are various ways of doing this I believe although I have as yet not started to implenet them myself. I know it has been talked about here already somewhere. Try search these fora for "CSS Buttons" and the likes and you should find them

Onya
Woz

SmallTime




msg:1177491
 3:52 am on Nov 7, 2002 (gmt 0)

display: block;

several examples of full code have been posted, try site search.

DiAMOndDavE




msg:1177492
 4:33 am on Nov 7, 2002 (gmt 0)

SmallTime,

Thanks for the reply. Doesn't display: block insert a line break between elements? I have seen an example using display:block but the nav/menu ran down the page and I want it across the page as per my example:

<No URLs Please!>

Forgive me if I am a gumby-head for I know not (exactly) what I do - yet

Regards
DiAMOndDavE

[edited by: Woz at 4:40 am (utc) on Nov. 7, 2002]
[edit reason] TOS#14 [/edit]

SmallTime




msg:1177493
 5:29 am on Nov 7, 2002 (gmt 0)

oops, your right, check your sticky mail

moonbiter




msg:1177494
 5:52 am on Nov 7, 2002 (gmt 0)

Doesn't display: block insert a line break between elements?

It does, but you can get around that.

There are a couple of ways to do what you want. One is to make the a elements display as a block and then float them. So you have css like this:

div#menu {
background: #ccc;
border: 1px solid #999;
}
div#menu a {
border: 1px solid #FFF;
display: block;
float: left;
background; #CCC;
padding: 3px;
}
div#menu a:link, div#menu a:visited {
background: #CCC;
}
div#menu a:hover, div#menu a:active {
background: #FFF;
}

and html like this:

<div id="menu">
<a href="linkone.htm">Link one</a>
<a href="linktwo.htm">Link two</a>
<a href="linkthree.htm">Link three</a>
<div style="clear: both;"></div>
</div>

The one ugly thing about this is the spacer div required to give the menu some content. Also, somewhat weirdly, if you take the border off of the div#menu it doesn't seem to work right (at least in Mozilla or IE).

Another method is simpler. Replace the relevant CSS selectors above with :

div#menu {
background: #ccc;
padding: 3px 0;
}
div#menu a {
border: 1px solid #FFF;
background; #CCC;
padding: 3px;
}

And take out the spacer div. With this method no float or display is needed. You do need to put top and bottom padding on your div#menu to contain the padding you put on the a elements, though. With this method it is best to eliminate the border on the div#menu, because Mozilla and IE (5.5 and 6 in quirks mode) handle box-sizing differently.

Nick_W




msg:1177495
 6:46 am on Nov 7, 2002 (gmt 0)

Moonbiter hits the nail on the head. But for your info, it doesn't actually insert a line break with display: block;

It makes the element a block level element and, as with all block level elements you can not place them side by side unless you take them out of the normal page flow using float or positioning them....

Nick

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved