Paddy Power

Site map

 
spacer

Menu Three - css background image, swap colours

The HTML

The HTML for this menu can be found on the menu index page.

CSS notes

Adjust the width & height for the menu background image size, making the css height half of the actual image height.

As the background image is half visible and half not (blending with the page colour), change the line-height (highlighted in red) to half the height for the vertical and three-quarters for the horizontal menu.

This vertically aligns the text, but for some reason not in IE. Hence the line-height being 84px instead of 88px. I never did suss out why, maybe someone could let me know.

Change the background: url(path/file.gif) 0 0 no-repeat; to the path and image file name you want loaded.

The background-position: 0 -56px; shifts the y axis of the image on hover by 56px. Set it to half of your image height.

I think maybe the vertical menu is a bit confusing as is, but it may give you ideas for something else.

Change the #content to whatever your container id is.

spacer500

Horizontal menu css

/* change the #content to whatever your container id is */
#menu_h li {
float: left;
list-style: none;
margin: 2px;
text-align: center;
}
#content #menu_h li.nav1 a, #content #menu_h li.nav1 a:visited {
display: block;
width: 100px;
height: 56px;
background: url(../css_dev/images/swap1.gif) 0 0 no-repeat;
color: #333;
font: bold 12px/84px verdana;
text-decoration: none;
}
#content #menu_h li.nav1 a:hover {	
background-position: 0 -56px;
color: #fff;
}