Jump to content



Photo

Styling list items

html css

  • Please log in to reply
7 replies to this topic

#1 plasmarox

plasmarox

    Neowinian

  • Joined: 04-January 09
  • Location: Cambridge, UK

Posted 27 February 2013 - 20:28

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


#2 spacer

spacer

    I'm awesome

  • Tech Issues Solved: 1
  • Joined: 09-November 06
  • Location: Connecticut, USA
  • OS: Windows 7
  • Phone: Nexus 4

Posted 27 February 2013 - 20:33

"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/

#3 lunamonkey

lunamonkey

    Ten years on Neowin.

  • Joined: 28-May 03
  • Location: Swindon, England

Posted 27 February 2013 - 20:34

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

#4 OP plasmarox

plasmarox

    Neowinian

  • Joined: 04-January 09
  • Location: Cambridge, UK

Posted 27 February 2013 - 20:39

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

#5 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 27 February 2013 - 20:52

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

See here.

#6 OP plasmarox

plasmarox

    Neowinian

  • Joined: 04-January 09
  • Location: Cambridge, UK

Posted 27 February 2013 - 21:08

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

See here.


Glad you like the yellow! :p

#7 OP plasmarox

plasmarox

    Neowinian

  • Joined: 04-January 09
  • Location: Cambridge, UK

Posted 27 February 2013 - 21:16

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

#8 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 27 February 2013 - 21:18

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