Sun, 2008-10-19 18:28
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>
Sun, 2008-10-19 20:01
#1
Quote:I can't get my UL to
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.
Sun, 2008-10-19 20:32
#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; }
Sun, 2008-10-19 21:17
#3
It should be
It should be this:
#navigation li {display:inline }
Sun, 2008-10-19 21:45
#4
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!
Sun, 2008-10-19 22:37
#5
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>
Mon, 2008-10-20 01:18
#6
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.