6 replies [Last post]
thedooropens
Offline
Enthusiast
Last seen: 11 years 12 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

Hey all! Been searching for hours, can't find a solution and would love some help! I am trying to make a horizontal menu using FIR to replace the text with images that shift position on hover! Problem is, I can't get my UL to display horizontally and I can't make this technique without a list!

#navigation {width:800px;
			height:50px;
			margin-left:auto;
			margin-right:auto;
			list-style:none;
			text-align:center;	    
}
#homebtn a:link {background-image:url(../images/menubuttons.gif);
			background-repeat:no-repeat;
			background-position:bottom;
			height:50px;
			width:100px;
			text-indent:-9000em;
			display:block;
			}
#homebtn a:hover {background-image:url(../images/menubuttons.gif);
			background-repeat:no-repeat;
			background-position:top;
			height:50px;
			width:100px;
			text-indent:-9000em;
			display:block;
			}

<ul id="navigation">
<li id="homebtn"><a href="index.html">HOME</a></li>
 
</ul>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:I can't get my UL to

Quote:

I can't get my UL to display horizontally

That's not surprising, you haven't specified any rules for your LI elements! As things stand the ul li arrangement displays as it's it's intended with the LI elements stacked one upon the other.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thedooropens
Offline
Enthusiast
Last seen: 11 years 12 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

Thanks!

I've tried to apply inline style to the li and the ul with no success... any suggestion?

PS - how's London?

#navcontainer {width:800px;
				height:50px;
				text-align:center;
				margin-right:auto;
				margin-left:auto;
				display:inline;
}
 
#navigation {margin:0px;
			list-style:none;
			padding:0px;
}
 
#navigation li ul {display:inline;
 
 
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It should be

It should be this:

#navigation li {display:inline }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thedooropens
Offline
Enthusiast
Last seen: 11 years 12 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

Thanks... that does it!

I don't get why, but it's fixed! Thanks for the help, now I just have to code the images for each menu item! I owe ya one!

thedooropens
Offline
Enthusiast
Last seen: 11 years 12 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

Horizontal menu

Okay, now my menu works with rollovers images and diplays horizontally! Problem is I can't seem to center it in it's container? I tried every combination of margin-l and r auto as well as text-align but it won't work.

How do I get those darn floated li:a's to center??

#navcontainer {width:800px;
				height:50px;
				text-align:center;
				margin-right:auto;
				margin-left:auto;
				background-color:#009900;
 
}
 
#navigation ul {list-style:none;
			    width:800px;
				text-align:center;
				margin-left:auto;
				margin-right:auto;
}			
 
#navigation li {display:inline;
				text-align:center;
}
 
#navigation a:link {background-position:top;
}
 
#navigation a:visited {background-position:top;
}
 
#navigation a:active {background-position:top;
}
 
#navigation a:hover {background-position:bottom;
}
 
#homebtn a{background-image:url(../images/menubuttons.gif);
			background-repeat:no-repeat;
			width:100px;
			height:50px;
			display:block;
			text-indent:-9000em;
		    float:left;
			margin-left:auto;
			margin-right:auto;
			text-align:center;
 
}

<div id="navcontainer">
<ul id="navigation">
<li id="homebtn" ><a href="index.html">HOME</a></li>
<li id="homebtn"><a href="music.html">MUSIC</a></li>
<li id="homebtn"><a href="pictures.html">PICS</a></li>
<li id="homebtn"><a href="videos.html">VIDS</a></li>
<li id="homebtn"><a href="contact.html">CONTACT</a></li>
</ul>
</div>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

homebtn should be a class

homebtn should be a class and not an ID - you can't reuse IDs on the same page. To centre the menu, you need to know exactly how wide all the list items together is and then make that the width of the container.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference