Slight Problem with the navigation

Hey guys,

I got stuck into another problem. I am trying to work on this navigation, and I am making it so that when you are on a certain page, it's highlighted. But the thing is, only the text get's highlighted, when I actually want the whole thing to be. Can anyone help me out?

Here is my code:

CSS

#menu {
	width:980px;
	background:url(images/nav.gif) repeat-x;
	height:33px;
	list-style:none;
	font:bold 1em/2.75em Arial, Helvetica, sans-serif;
	}

#menu li {
	padding:0 17px;
	border-right:1px solid #ffe188;
	display:inline-block;
	float:left;
	}

#menu li a {
	color:#FFF;
	text-decoration:none;
	}

#menu li a.selected {
	background:url(images/nav-active.gif) repeat-x;
	}

Code (markup):

HTML

			<ul id="menu">
				<li><a href="#" class="selected">Home</a></li>
				<li><a href="#">Home</a></li>
				<li><a href="#">Home</a></li>
				<li><a href="#">Home</a></li>
			</ul>	

HTML:

I would appreciate anyones help. Sorry if this is a nooby question, but this how you learn, i guess.

Thanks,
Nick

 

nvm, i fixed it. thanks anyway.

 

It is polite forum protocol to post a summary, at least, of what was wrong and/or how you fixed it. There may be others with a similar issue at some time or another.

cheers,

gary

 

Uhmm, Im not that good at explaining things, but I'll give it a try. Basically, all I did was move the padding that was on #menu li to #menu li a and changed it a bit, so that it would increase in height as well as in width as seen in the following code:

#menu li {
	border-right:1px solid #ffe188;
	display:inline-block;
	float:left;
	}

#menu li a {	
	padding:9px 17px 9px 17px;
	color:#FFF;
	text-decoration:none;
	height:33px;
	}

Code (markup):

That pretty much made it perfect.

 

Another thing you could have done, Nick, is either set display: block to the a's and give them enough height (and width but padding on each side seems to work better cause you never know how wide a word might be)... OR since you already float the li's, you could've also set the style on the li... though I don't like that option as much.

You'll find as you add padding on the top or bottom, the a will be larger (in height) than the menu it's in. Normally this may be fine (I used to use padding to "center" my text vertically), but when you have a menu with a fairly fixed height, you'll want to use the display: block and a line-height equal to the height of the menu then. It works nicely.