css navigation

[dannynosleeves]

So i always have this problem and always forget the solution.

Im using an unordered list for a horizontal navigation. But I cant get the images to displat side-by-side.



Here is the code

/***********************************NAVIGATION***/

ul#nav-main {
	position: absolute;
	top:137px;
	left:220px;
	width:600px;
	height:52px;
	background-color:#99FF33;
	margin: 0;
	}

ul#nav-main li {
	display:inline;
	line-height:52px;
	
	}
	

li#home a {
	display:block;
	width:115px;
	background-image: url(../images/images/home.png);
	text-indent:-99999px;	
	}

	
li#about a {
	display:block;
	width:99px;
	background-image:url(../images/images/about.png);
	text-indent:-99999px;	
	}

li#calendar a {
	display:block;
	width:145px;
	background-image:url(../images/images/calendar.png);
	text-indent:-99999px;	
	}
	
li#forms a {
	display:block;
	width:106px;
	background-image:url(../images/images/forms.png);
	text-indent:-99999px;	
	}
	
li#contact a {
	display:block;
	width:135px;
	background-image:url(../images/images/calendar.png);
	text-indent:-99999px;	
	}

<!--BRANDING-->
<div id="branding">
	<h1>Off the Walls</h1>
	<blockquote>North Alabams largest indoor entertainment facility.</blockquote>

<!--NAVIGATION-->

	<h2>Site Navigation</h2>
	<ul id="nav-main">
    	<li id="home"><a href="#" title="Home">home</a></li>
        <li id="about"><a href="#" title="About">about</a></li>
        <li id="calendar"><a href="#" title="Calendar">calendar</a></li>
        <li id="forms"><a href="#" title="Forms">forms</a></li>
        <li id="contact"><a href="#" title="Contact">contact</a></li>
	</ul>
</div> 
<!--end of branding div-->

[LeadMagnet]

li is a block-level element. I wouldn't use it at all in this case... but i suppose if you were to use display:inline; then that'd work.

[PR Design]

#home{
float:left;
display:inline;
}

Etc for each li.

[LeadMagnet]

Well done PR Design. You win today's redundancy award.



You're fired.


And while we're at it, it's messy to use separate css for each li. It's better to either use 1 class for all of them or else target all li tags, or even just give the ul tag an id and target it's li children.

[dannynosleeves]

Originally Posted by LeadMagnet

li is a block-level element. I wouldn't use it at all in this case... but i suppose if you were to use display:inline; then that'd work.

Im already using display: inline

[dannynosleeves]

And while we're at it, it's messy to use separate css for each li. It's better to either use 1 class for all of them or else target all li tags, or even just give the ul tag an id and target it's li children.

I agree, but each button image is a different width. How could I make that work?

[LeadMagnet]

all your A tags in that list have display:block; set which seems to be throwing things off (at least in firefox anyway).

Have you got this uploaded somewhere? Would be much easier to find the problem if we could see it all together in 1 place.

Also, what's this about: text-indent:-99999px;

as for the images being a different width, if you really needed to specify it, then you would probably just use an id tag selector for that.
But for re-using the same code on similar tags, class is better.

[dannynosleeves]

Originally Posted by LeadMagnet

all your A tags in that list have display:block; set which seems to be throwing things off (at least in firefox anyway).

Have you got this uploaded somewhere? Would be much easier to find the problem if we could see it all together in 1 place.

Also, what's this about: text-indent:-99999px;

as for the images being a different width, if you really needed to specify it, then you would probably just use an id tag selector for that.
But for re-using the same code on similar tags, class is better.

I dont have it uploaded anywhere yet. I'll play around with your suggestions later today and upload it.

The text indent is a trick to keep the site accessible. Whatever has a -99999 indent ment means it cant be seen in a normal browser window, but will still show up correctly without styles.

[LeadMagnet]

ah i see. That makes sense.

[PR Design]

Originally Posted by LeadMagnet

Well done PR Design. You win today's redundancy award.



You're fired.


And while we're at it, it's messy to use separate css for each li. It's better to either use 1 class for all of them or else target all li tags, or even just give the ul tag an id and target it's li children.

I was just working on the situation at hand, as opposed to rewriting the code.