CSS Image Menu

Get Started
1

Hi,

I am trying to create a menu which uses image rollovers rather then just text and without js.

Thanks to a few tutorials I found on sitepoint I am almost there, but not quite :slight_smile:

On my page http://www.grantsmithportfolio.com/ I am using image rollovers with a list for my navigation. For some reason my Contact button isn’t displaying as it should.

At first I thought is was because my images where simply too big, but this isn’t the case.

Any suggestions please?

2

Besides what ralph.m mentioned would I use a slightly different way. Since all buttons apparently have the same height you don’t need to declare this property in every separate button. Same for margin-top, padding, block etc. This is how I would do it:


.contentsButtons ul {
    margin: 0; padding: 0; overflow: hidden; list-style-type:none;
}

.contentsButtons li {
    float:left;
}

.contentsButtons a{
    height: 80px; margin-top: 25px; display: block; background-position: 0 0; 
}

.contentsButtons a.about_me {
    width:211px; background-image:url("images/contentsStatic_01.jpg") no-repeat;
}

.contentsButtons a.portfolio {
    width:211px; background-image:url("images/contentsStatic_02.jpg") no-repeat;
}

.contentsButtons a.contact {
    width:230px; background-image:url("images/contentsStatic_03.jpg") no-repeat;
}

.contentsButtons a.brief  {
    width:260px; background-image:url("images/contentsStatic_04.jpg") no-repeat;
}

What you furthermore could do is making a sprite, from your menu images (normal and hover state in one image). That way you only have to decare one extra class:


.contentsButtons a:hover,
.contentsButtons a:focus {
    background-position: 0 -80px;
}
3

Ah, there is a typo–see in red:

.contentsButtons li.contact a {
			 background-image: url(images/contentsStatic_03.jpg);
			 background-repeat: no-repeat;
			 width: 230px;
			 [COLOR="Red"]height: 80px; /* need semi colon at end */[/COLOR]
			 margin: 25px 0px 0px 0px;
			 display: block;
			 position: -422;
}
.contentsButtons li.contact a:hover, a:active {
			 background-image: url(images/contentsOver_03.jpg);
			 background-repeat: no-repeat;
			 width: 230px;
			 [COLOR="Red"]height: 80px; /* need semi colon at end */[/COLOR]
			 margin: 25px 0px 0px 0px;
			 display: block;
			 position: -422;
		}

PS: position: -422 is doing nothing. It would need to have a value like px, but you don’t need it anyway.

4

Really? Unless Im missing something I would disagree, what about the following;

.contentsButtons li.contact a {
background-image: url(images/contentsStatic_03.jpg);
background-repeat: no-repeat;
width: 230px;
height: 80px
margin: 25px 0px 0px 0px;
display: block;
position: -422;
}
.contentsButtons li.contact a:hover, a:active {
background-image: url(images/contentsOver_03.jpg);
background-repeat: no-repeat;
width: 230px;
height: 80px
margin: 25px 0px 0px 0px;
display: block;
position: -422;
}

Plus the image does show in part…

5

The rules that apply to the other a elements—e.g.

background-image: url(images/contentsStatic_01.jpg);
			 background-repeat: no-repeat;
			 width: 211px;
			 height: 80px;
			 margin: 25px 0px 0px 0px;
			 display: block;
			 position: 0 0;

have not been applied to the contact link.

6

You also need to add the bit that I’ve put there in red, otherwise it will apply to all a:active rather than just the ones you want.

7

DOH!

How annoying, can’t believe I didn’t spot that!

Thanks so much…