css image rollover menu

@CentauriApr 26.2007 — #A css menu is much easier to manage (plus makes more sense semantically) when the links are an unordered list of links, plus it can get rid of a div. So the html can be

[code=html]<ul id="nav">
 <li><a href="#">Item 1</a></li>
 <li><a href="#">Item 2</a></li>
 <li><a href="#">Item 3</a></li>
 <li><a href="#">Tutorial</a></li>
 </ul>[/code]

To display this as a horizontal menu, style the <a> elements as blocks as per the original article. Here I did not use padding, and set the blocks to the image size (using the image in the original article), along with line height (sets the text in the centre vertically) and text align center. Any font declaration should be made [B]before[/B] the line-height size. The <li>s are then floated left to sit them side by side horizontally, and list-style set to none to get rid of the list bullets. Finally, the <ul> itself is given the appropriate width and positioned with margins. The overflow declaration makes sure the <ul> contains its floats.

css is:

[CODE]* {
 margin: 0;
 padding: 0;
 }
 #nav {
 display: block;
 width: 380px;
 overflow: hidden;
 margin: 10px auto 0;
 }
 #nav li {
 list-style: none;
 float: left;
 }
 #nav a {
 display: block;
 font: bold 13px sans-serif;
 width: 95px;
 height: 35px;
 line-height: 35px;
 text-align: center;
 color:#333;
 background: url("rollover-image.gif") 0 0 no-repeat;
 text-decoration: none;
 }
 #nav a:hover { 
 background-position: 0 -35px;
 color: #049;
 }
 #nav a:active {
 background-position: 0 -70px;
 color:#fff;
 }[/CODE]

Note the browser default margins and paddings are zeroed with the universal selector (*) at the start of the css - this should be used [B]before[/B] anything else in the css.

Cheers

Graeme

css image rollover menu

2 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

css image rollover menu

2 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #CSS _↴