SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jul 2002
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question css rollover problem

    I'm trying to create a nav bar with CSS rollovers. I've only placed one button so far (the BLOG button; site in question can be found HERE).

    Because I'm using an image instead of actual text, and I wish to use CSS to create a rollover effect by swapping out (actually, by moving to the left, a la this: http://wellstyled.com/css-nopreload-rollovers.html) the background image, I've placed in the navbar a transparent gif (which serves as the hyperlink) that is the same size as the button image.

    The button is 24px wide; the background image is 48px wide (shown HERE; the specific selector is #navblog), 24px of which are showing in the at-rest state, which is simply the image of the word "BLOG." Per the CSS file, in the a:hover state, the background image should move to the left 24px to reveal the word "BLOG" with a small, green bar below it. However, that's not happening, and I can't for the life of me figure out why. Anyone? (I'm also open to general guidance on better ways to accomplish what I wish to accomplish here.)

  2. #2
    SitePoint Addict Shockt's Avatar
    Join Date
    Jan 2005
    Location
    California
    Posts
    360
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seeing as your images are so small, I wouldnt worry about a no-preload roll-over. Use the simple solution of swapping the background images.

  3. #3
    SitePoint Enthusiast sbob's Avatar
    Join Date
    Jun 2005
    Location
    MN, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From your CSS:
    Code:
     #navblog {
        	margin-left: 44px;
        	background: url(images/nav_blog.gif) 0 0 no-repeat;
        	width: 24px;
        }
        
        #navblog a:hover {
        	background-position: -24px 0;
        }
    The problem is that you apply the background image to the #navblog div, but the background shift happens to a:hover, but the a tag doesn't have a background image, its container does, so nothing happens.

    However, rather than doing a pure CSS background shift rollover (however cool they may be) I would just recommend having the image stay static and setting a bottom border on hover, as that appears to be all you are trying to do. Try something like this:
    Code:
        #navblog {
         	margin-left: 44px;
       	height: 16px;
         	width: 24px;
         }
       
       #navblog a {
      	display: block;
        	height: 13px;
          	width: 24px;
       	background: url(images/nav_blog.gif) no-repeat;
          	border-bottom: 3px solid #FFF;
      }
         
         #navblog a:hover {
         	border-bottom: 3px solid #687F57;
       }

  4. #4
    SitePoint Addict
    Join Date
    Jul 2002
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, guys.
    sbob: Thanks for the CSS. Much simpler solution. (Of course, now that I have it working, I realize that I don't like it in action!)


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
  •