homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Advanced Css Menu Navigation Problem
Using empty span tags for a rollover effect

5+ Year Member

Msg#: 3849601 posted 7:37 pm on Feb 14, 2009 (gmt 0)

Ok guys I'm going to try and not make this a book. I have been following a tutorial I found online for using empty span tags and a few different images to create a rollover effect.
I'll just concentrate on the HOME button for this question.
In photoshop I have created a "HOME" image with a circle drawn around it.(the over-state) This image is 81px(w) by 70px(h). Then according to this tutorial I added exactly double the height of this image to the canvas that I'm working on. So now the canvas is 140px tall. Above my HOME/over-state image I created what I want my default state of the button to be, which is just the HOME without the circle. I save this as ONE image, not two. Then supposedly this:#menu a:hover {
background-position: left bottom;
will make the image move up and down to simulate a rollover effect. Default state shows automatically and then when you rollover, the image is supposed to move to show the over state. What is happening to me is that the default part of the image shows im my nav, but so does PART of the roll-over state of the image. Then when you roll over, you can actually see the image moving and looks like the image changes size and depending on where I place the image, it sometimes gets cut off. I don't know. I hope I have explained this good enough. It's like I'm right there, it's almost working for me. I have been working at this for a while and just can't figure it out. Here is the code:
(note: The author of the tutorial also has another image show up over and above the link buttons. I do not need this, so in my code, I do not have an image background within my <spans>.
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
position: relative;

#menu span {
display: none;
position: absolute;
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
#menu a:hover {
background-position: left bottom;
#menu a:hover span {
display: block;

#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;<!--I'm not using anything for my span backgrounds-->
left: 28px;
top: -20px;

#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;<!--I'm not using anything for my span backgrounds-->
left: 44px;
top: 54px;

#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;<!--I'm not using anything for my span backgrounds-->
left: 26px;
top: -20px;



5+ Year Member

Msg#: 3849601 posted 7:41 pm on Feb 14, 2009 (gmt 0)

Sorry, I am using strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3849601 posted 9:35 pm on Feb 14, 2009 (gmt 0)

I'd expect other parts of the background to show up due to the block being larger that one half (in your case) of the background image.

I'm not fond of positioning every menu item with coordinates and fixed sizes. I'd suggest to look for sliding doors menu [google.com]s, one you "get" the technique, you can get rid of most if not all text placement and fixed sized menus.


5+ Year Member

Msg#: 3849601 posted 10:02 pm on Feb 14, 2009 (gmt 0)

hmmmm, yeah I was thinking of just moving on to a different type of menu, but this particular one fits the look and feel of my site perfect.

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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved