Jump to content

width and margin problem with floated list items


VaporAction
 Share

Recommended Posts

I've made a menu using a ul and floating the li's...but when I give them a width, it kills the float and the background-color doesn't fill up the width...I also can't seem to put a margin between the list items...here's a link to the page...http://www.salon520.org/the menu items in question are the "about" and "space520" at the topI'd like to put a space between them and be able to control their width and have the background-color fill the width

Link to comment
Share on other sites

Hmmmm.Unless there is a reason you want to do otherwise, I would do this:HTML:

<div id="nav"><ul><li><a href="about.html">about</a></li><li><a href="space520.html">space520</a></li></ul></div>

CSS:

#nav ul {float:right;position:relative;list-style-type:none;}#nav ul li {display:inline;padding-left:20px;background-color:#000;}

That way, your list will display inline, and float to the right like you have. Play around with those settings and you should find the result you are looking for.

Link to comment
Share on other sites

that worked perfectly except for one thing...you can't set width on inline elements...I'd like to make all the list items a uniform width...I tried display inline-block and that works for Safari but FF doesn't support it...any other way, I could set the width on those li's?edit:this worked for me...floated the ul right and floated the li's left...and floated items get display block by default...then I could set the width...thanks for the help, btw!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...