CSS Menu 1

[TamedTech]

Hi Guys,

I'm using CSS so I can turn an Un-Ordered List into a nice looking menu,

All is working fine, but I am after a technique to format the final <li> of the list so that it is different from the others, anoyone have a nice idea on how to do this best?

Thanks,

Rob

 

[Foamcow]

You could add a class to it then make changes to that class.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[Foamcow]

There is also a CSS 3 psuedo class that might help, but I am not sure how well it's supported at the moment (if at all)

:last-child

More info at

http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[TamedTech]

Thanks Foamcow, i'll give the psuedo class a go and check if my browsers support it.

I was going to use your oriognal suggestion, but the hope is to have my meny list driven from a database so there could be any number of <li> tags.

I'll let you know how i get on,

Just checked your site by the way ... awsome!

Rob

 

[Foamcow]

I'd go with option 1.

You could still apply the class even if it is driven from a database.
When outputting the list, look for the last element and apply the class to it when you output the html.

Alternately, and less unbreakable would be to use javascript to find the last element and apply a class to it.

Either of those methods is more likely to succeed than the CSS3 selector, support for which will be patchy.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[TamedTech]

Thanks Foamcow, thats a real help ... i'll have a play with it this afernoon and see what happends, i'm using the first option at the moment with a static page ... i'll flick it over to the dynamic version later and see how it sits.

Rob

 

[ChrisHunt]

If you're building the menu from a database, "option 1" becomes more practical than it is with static, hand-coded pages. Once you've written the code to do it, the database won't forget to put the class into the last <li>. If you're maintaining the code by hand, sooner or later you're bound to!

In any case, :last-child just isn't a contender at the moment - unless you're on an intranet and can force your visitors to use one of the few browsers that will understand it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd