Horizontal Navigation

Forum Moderators: not2easy

Message Too Old, No Replies

Horizontal Navigation

need to set width on display:inline <li>

gms3651

6:09 am on Jan 6, 2007 (gmt 0)

Hello,
I am trying to create a horizontal naviagtion using a list. However, in order to get my list items horizontal I need to use dispaly:inline. But once I use that I can't set the width of an inline element. I would like some more space in between my <li> elements. Below is my CSS and HTML Code.

CSS

#navlist li {
display:inline;
list-style-type:none;
width:500px;
}

/////////////

HTML

I would like my horizontal list to be 500px wide and each link with space in between the other links so that they fill out the entire 500px.

Thanks for any help.

HarryM

12:39 pm on Jan 6, 2007 (gmt 0)

By using a text link the length of each link is determined by the font used. The font size will vary for different browsers and also on the browser settings made by users.

As far as I know the only safe way to fix the overall length it would be to use images instead of text links, ie.,

<a ... ><img ... ></a><a ... ><img ...></a> etc

However if somebody knows a better way of doing it I am all ears! I would love to get rid of my nav bar gifs.

Robin_reala

4:36 pm on Jan 6, 2007 (gmt 0)

You can apply margins to inline elements, which will probably do what you want.

alfaguru

5:13 pm on Jan 6, 2007 (gmt 0)

Rather than display inline, have you considered floating the list elements? That way you can give them a fixed width.

Listamatic (readily found with a search) has dozens of working examples of vertical and horizontal list stylings for navigation.