SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    make a link stretch the size of a li

    you can't really make li items link from what i know. but often i'd like the whole area of one to be clickable. one trick i have found is setting the height of the li to be 1%. but not sure what css needs to be applied the a property. anyone have examples of this?

    making a cell of a calendar clickable is one application of what i'm talking about.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Anchors are inline elements and therefore they have no height or width apart form the content they hold. To make them stretch the full width of their parent you need to set them to display:block.

    IE6 needs haslayout to make the whole area active which is where you saw the height:1% hack being used but it must be given only to ie6.

    Some examples here:

    http://www.pmob.co.uk/temp/link-hover.htm

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you! the interesting thing about that example is i don't see height declared anywhere.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You would only need a height if the parent had a height defined

    At present it is the content creating the height so it will stretch the parent automatically so parent and child are always the same height.

    If you set the parent to height 300px for example then the content would only be 100px high and the background would only change on the content and not the whole parent. In that case you'd need a height on the child also to match.

    Most times you would want to avoid setting heights unless you are trying to make a number of elements the same size. the problem with setting a height is that it can never grow and if text is resized or content increased the content will overflow.

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i did a quick experiment armed with your info, and i seem to have it figured out. thank you


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •