Horizontal CSS Menus

MargeS

Would anyone know is this possible...

a horizontal navigation created with CSS and an unordered list with a custom border dividing the links. e.g

link 01 :: link 02 :: link 03

How would I create the :: between the links

#footer ul {
list-style-type: none;
display: inline;
padding-left: 0.8em;
margin-left: 0.8em;
border-left: ??????????
}

#footer ul li {
list-style-type: none;
display: inline;
padding-right: 0.8em;
margin-right: 0.8em;
border-right: ??????????
}

Adam

There's a CSS3 border-image property, but it won't necessarily display on older browsers. Google is your best friends.

Alternatively, though I wouldn't call it good practice, you could give the dividers a segment of the unordered list i.e.

<ul>
<li><a href="link.htm">Home</a></li>
<li><img src="border_image.jpg" /></li>
<li><a href="link2.htm">Away</a></li>
<li><img src="border_image.jpg" /></li>
</ul>

etc.

MargeS

right FYI.... I found a way to do it but it requires a lot of tweaking

put a background on the LI in the CSS
I am trying to keep all the styling in a CSS for handy maintenance.

DJB

MargeS wrote: »

right FYI.... I found a way to do it but it requires a lot of tweaking

put a background on the LI in the CSS
I am trying to keep all the styling in a CSS for handy maintenance.

That's the way I'd do it

MacAonghusa

should be handy enough to do what you want. have you tried any of the following?

http://cssmenumaker.com/
http://www.seoconsultants.com/css/menus/tutorial/
http://www.13styles.com/
http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml

lots more available via google...