SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ul li a:hover height issue

    Why is it I cannot apply a height attribute to a div list item?

    Code:
    #header ul
        {
        position: relative;
        list-style: none;
        font-family: Arial, sans-serif;
        font-size: 10pt;
        z-index: 10;
        }
        
    #header ul li
        {
        display: inline;
        padding-right: 11px;
        font-weight: 600;
        height: 200px;
        }
        
    #header ul li a:link
        {
        color: brown;
        }
    
    #header ul li a:hover
        {
        color: yellow;
        background-image: url(../images/header/bottomcookiemenu.png);
        }
    I want a background image to appear on hover which should appear below the linked text. For some reason the height attribute is ignored for a list item and the bg-image only appears simply within the area of the linked text.

    Is there a better way or even correct way to achieve this?
    Thanks
    Rich
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site

  2. #2
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well you didn't really give us much to work with, but:

    Since you have text in your list items, you can add the property "line-height: 10pt;" where the number "10" is however large you want the line height to be. This wont change the size of your text. Add this propertay to your a inside of the li. Does this help?

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Links are inline elements. When you change the background image on hover, you're only changing the backgorund of the link, not the list item it's contained in. If you want the background to apply to the whole list item, you'll have to make the link's width and height fill the list item with something like this:
    Code:
    #header ul li a:link
        {
        color: brown;
        display: block;
        height: 100%;
        }
    
    #header ul li a:hover
        {
        color: yellow;
        background-image: url(../images/header/bottomcookiemenu.png);
        }

  4. #4
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK - let me show you what I am working on.

    http://www.divvies.com/pub

    I tried line-height but it was simply adding 'padding' arrou nd the links but still not creating a larger link area.

    I want a larger visible link area so I can prop the cookie graphic below the text link.

    Also I would like the cookie graphics to sit below the blue area.
    the graphic I am trying to set below is this:
    http://www.divvies.com/pub/images/he...cookiemenu.png

    Hope this clears things up some.
    Thanks for the help.
    Rich
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site

  5. #5
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like vinnie said: links are inline elements. You cannot change the height or width of an inline element, it needs to be converted to a block-level element. You do that by following vinnies example. About placing the cookie link at the bottom, you will need to create a height for the link that will allow for whatever the height of the cookie image to rest on bottom, and then input this inot your css:

    Code:
    #header ul li a:hover
    {
        color: yellow;
        background: url("../images/header/bottomcookiemenu.png") no-repeat bottom center;
    }
    Hope that helps.


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
  •