Paddy Power

Site map

 
spacer

Menu One - css only, no background images

The HTML

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

CSS notes

The width & height will alter the menu background size, change the line-height (highlighted in red) to match the height for vertically aligning the text.

The -moz-border-radius is Mozilla specific (it works in Firefox, Mozilla & Netscape). This should be implemented as border-radius when CSS3 arrives, see the W3C CSS3 Backgrounds and Borders Module for details.

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: 20px;
-moz-border-radius: 11px;
background: #f60;
color: #333;
font: bold 12px/20px verdana;
text-decoration: none;
}
#content #menu_h li.nav1 a:hover {
background: #fc2;
}

Vertical menu css

/* change the #content to whatever your container id is */
#menu_v li {
list-style: none;
width: 100px;
margin: 2px;
text-align: center;
}
#content #menu_v li.nav1 a, #content #menu_v li.nav1 a:visited {
display: block;
width: 100px;
height: 20px;
-moz-border-radius: 11px;
background: #8d8;
color: #333;
font: bold 12px/20px verdana;
text-decoration: none;
}
#content #menu_v li.nav1 a:hover {
background: #f7c;
}

Full colour codes used on background and images

The codes below are the full hex codes, the ones used above are the css shorthand versions.

#ff6600 - orange

#88dd88 - green

#ff77cc - pink

#ffcc22 - yellow