html Styling list items

[plasmarox]

Hi all,

I've been designing a website for someone I know and I've come across some problems doing the navigation.

Basically, when I produced the code for the navigation, I put the <a href... as a child of the UL, so the whole list item <li.... would be clickable.

However, i just tried to validate it, and it doesn't validate on the grounds the "a" cannot be a child element of "ul". So I made the "a" around the text inside the "li" instead. But, obviously, now only the text is clickable not the whole "li", which is how i wanted it.

So basically, I need a way of making the whole "li" clickable and it still validating. I know you can do it by making the "li"s float next to each other, but if I do that, I can't get them the center using "margin:0 auto".

Help me please :)

[spacer]

"li" (list items) are the only valid child elements for "ul" and "ol" elements.

You can always change the anchor tags to display "block" or "inline-block". That will allow you to give them dimensions, and it will allow you to achieve the "whole li is clickable" functionality that you want.

A very rough fiddle: http://jsfiddle.net/hN5ju/1/

[lnmnky]

Can't you set the LI to have zero padding, and then make the LI and the A block elements.

When you float the LI, they should collapse, but still be block level.

What part do you want center? The UL or each LI? Or just the text inside the LI?

You might need to force a width onto both the LI and A so that they take the same space up.

A link would help.....

[plasmarox]

"li" (list items) are the only valid child elements for "ul" and "ol" elements.

You can always change the anchor tags to display "block" or "inline-block". That will allow you to give them dimensions, and it will allow you to achieve the "whole li is clickable" functionality that you want.

OK - I'll give this a go. I guess it doesn't matter too much about cross-browser compliance since the hitzones won't be visible as such...

Can't you set the LI to have zero padding, and then make the LI and the A block elements.

When you float the LI, they should collapse, but still be block level.

What part do you want center? The UL or each LI? Or just the text inside the LI?

You might need to force a width onto both the LI and A so that they take the same space up.

A link would help.....

Basically I want the LIs to center in the middle of the screen. Here's a link: http://bgcmotorsport.co.uk/test/

Any comments on the general look and feel of the site are welcome, even begged ;)

[threetonesun]

That yellow is a bit bright :laugh:

That said, this will sort out the link issue:

ul li { padding: 0; margin: 0; }
ul a { padding: 5px; display: block; }
[/CODE]

See here.

[plasmarox]

That yellow is a bit bright :laugh:

That said, this will sort out the link issue:

ul li { padding: 0; margin: 0; }
ul a { padding: 5px; display: block; }
[/CODE]

See here.

Glad you like the yellow! :p

[plasmarox]

OK - fixed it! It's also fixed my funny colour hover text, because I had to apply the :hover to the "a" rather than the "li" which actually works better.

Thanks for your help :D

[threetonesun]

No but seriously, when you hover over the link change the text color too, it's completely illegible against that yellow.