Jump to content
  • 0
Sign in to follow this  
Followers 0

html Styling list items


Question

Posted

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 :)

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted

"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 [i]very[/i] rough fiddle: [url="http://jsfiddle.net/hN5ju/1/"]http://jsfiddle.net/hN5ju/1/[/url]

Share this post


Link to post
Share on other sites
  • 0

Posted

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.....

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='spacer' timestamp='1361997220' post='595547870']
"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.
[/quote]


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...

[quote name='lunamonkey' timestamp='1361997295' post='595547878']

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.....
[/quote]

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 ;)

Share this post


Link to post
Share on other sites
  • 0

Posted

That yellow is a bit bright :laugh:

That said, this will sort out the link issue:
[CODE]
ul li { padding: 0; margin: 0; }
ul a { padding: 5px; display: block; }
[/CODE]

See [url="http://css-tricks.com/keep-margins-out-of-link-lists/"]here[/url].

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='threetonesun' timestamp='1361998378' post='595547920']
That yellow is a bit bright :laugh:

That said, this will sort out the link issue:
[CODE]
ul li { padding: 0; margin: 0; }
ul a { padding: 5px; display: block; }
[/CODE]

See [url="http://css-tricks.com/keep-margins-out-of-link-lists/"]here[/url].
[/quote]

Glad you like the yellow! :p

Share this post


Link to post
Share on other sites
  • 0

Posted

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

Share this post


Link to post
Share on other sites
  • 0

Posted

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

Share this post


Link to post
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
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.