Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Advanced Css Menu Navigation Problem

Using empty span tags for a rollover effect



7:37 pm on Feb 14, 2009 (gmt 0)

5+ Year Member

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;


7:41 pm on Feb 14, 2009 (gmt 0)

5+ Year Member

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


9:35 pm on Feb 14, 2009 (gmt 0)

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

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.


10:02 pm on Feb 14, 2009 (gmt 0)

5+ Year Member

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.

Featured Threads

Hot Threads This Week

Hot Threads This Month