SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hover Navigation Background not working

    Hi all,

    I am baffled as to why the background I have assigned to the HOME button will not show up when I roll over the other buttons. You can view the page here.

    Any ideas?!
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The <a>s themselves are only as high as the current line height (being inline elements), and the home background has been applied as a background to the home image itself. Applying the hover to the other menu images will work :
    Code:
    #navigation a:hover img {
    	background-image: url(images/navigation_background.png);
    	background-repeat: no-repeat;
    	background-position: center center;
    }

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alternately, instead of the above, you could float the <a>s so they are block display :
    Code:
    #navigation a, #navigation a:link{
    float: left
    }

  4. #4
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a bunch! So since the menu items are images, you have to apply the background to the menu images for it to work? Is that what is being said? I used the Second post, since it's less code in any case... Thanks again!
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Either way will work as the link images are transparent and they have the padding, although it is usual to use the <a>s for the background. As the home button has the background image applied to the home image rather than the <a>, the hover on the <a> also gives the nice effect of a hover on the home link due to two png images being stacked.


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
  •