#1
  1. The Queen of Typos
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2004
    Location
    Treasure Coast
    Posts
    1,471
    Rep Power
    195

    Issue with Background-Position


    I'm currently using the tutorial located at Use Sprites to Create an Awesomeness-Filled Navigation Menu

    Based on that I've created a sprite image that is 960x88.

    I've got my menu in place, but the background-position completely fails. While I can change the width of each item, revealing more or less of the image it still only shows the first part of the image, repeating "Home". See attached screenshot for example of what it's doing.

    Here is my HTML and CSS:

    html Code:
      <nav>
        <ul id="main_nav">
          <li><a href="#" class="home"></a></li>
          <li><a href="#" class="case_studies"></a></li>
          <li><a href="#" class="solutions"></a></li>
          <li><a href="#" class="free_quotes"></a></li>
          <li><a href="#" class="government"></a></li>
          <li><a href="#" class="recycle"></a></li>
          <li><a href="#" class="resources"></a></li>
          <li><a href="#" class="about_us"></a></li>
          <li><a href="#" class="contact_us"></a></li>
          <li><a href="#" class="login"></a></li>
        </ul>
      </nav>

    css Code:
     
    #main_nav {
    	height: 40px;
    }
    #main_nav li {
    	float: left;
    }
    #main_nav li a {
    	background:url(../images/main_nav_sprite.png);
    	display: block;
    	height: 40px;
    }
    .home {
    	background-position: 0px 0px;
    	width: 60px;
    	height: 40px;
    }
    .case_studies {
    	background-position: -60px 0px;
    	width:120px;
    	height:40px
    }
    .solutions {
    	background-position: -180px 0px;
    	width:100px;
    	height:40px
    }
    .free_quotes {
    	background-position: -280px 0px;
    	width:100px;
    	height:40px
    }
    .government {
    	background-position: -380px 0px;
    	width:120px;
    	height:40px
    }
    .recycle {
    	background-position: -455px 0px;
    	width:75px;
    	height:40px
    }
    .resources {
    	background-position: -555px 0px;
    	width:100px;
    	height:40px
    }
    .about_us {
    	background-position: -642px 0px;
    	width:87px;
    	height:40px
    }
    .contact_us {
    	background-position: -748px 0px;
    	width:106px;
    	height:40px
    }
    .login {
    	background-position: -822px 0px;
    	width:74px;
    	height:40px
    }
    Attached Images
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    363
    Rep Power
    133
    Hi there elkehinze,

    try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title> navigation menu with sprite</title>
    
    <style type="text/css">
    #main_nav {
        height:40px;
        padding:0;
        margin:0;
        list-style-type:none;
     }
    #main_nav li {
        float: left;
     }
    #main_nav li a {
        background-image:url(../images/main_nav_sprite.png);
        display:block;
        height:40px;
        text-indent:-9999px;
        outline:none;
     }
    #home {
        width:63px;
        background-position:0 0;
     }
    #home:hover {
        background-position:0 -40px;
     }
    #case_studies {
        width:116px;
        background-position:-63px 0;
     }
    #case_studies:hover {
        background-position:-63px -40px;
     }
    #solutions {
        width:102px;
        background-position: -179px 0;
     }
    #solutions:hover {
        background-position: -179px -40px;
     }
    #free_quotes {
        width:105px;
        background-position:-281px 0;
     }
    #free_quotes:hover {
        background-position:-281px -40px;
     }
    #government {
        width:120px;
        background-position:-386px 0;
     }
    #government:hover {
        background-position:-386px -40px;
     }
    #recycle {
        width:79px;
        background-position:-506px 0;
     }
    #recycle:hover {
        background-position:-506px -40px;
     }
    #resources {
        width:101px;
        background-position:-585px 0;
     }
    #resources:hover {
        background-position:-585px -40px;
     }
    #about_us {
        width:93px;
        background-position:-686px 0;
     }
    #about_us:hover {
        background-position:-686px -40px;
     }
    #contact_us {
        width:108px;
        background-position:-779px 0;
     }
    #contact_us:hover {
        background-position:-779px -40px;
     }
    #login {
        width:75px;
        background-position:-887px 0;
     } 
    #login:hover {
        background-position:-887px -40px;
     } 
    </style>
    
    </head>
    <body>
    
    <ul id="main_nav">
     <li><a href="#" id="home">HOME</a></li>
     <li><a href="#" id="case_studies">CASE STUDIES</a></li>
     <li><a href="#" id="solutions">SOLUTIONS</a></li>
     <li><a href="#" id="free_quotes">FREE QUOTES</a></li>
     <li><a href="#" id="government">GOVERNMENT</a></li>
     <li><a href="#" id="recycle">RECYCLE</a></li>
     <li><a href="#" id="resources">RESOURCES</a></li>
     <li><a href="#" id="about_us">ABOUT US</a></li>
     <li><a href="#" id="contact_us">CONTACT US</a></li>
     <li><a href="#" id="login">LOGIN</a></li>
    </ul>
    
    </body>
    </html>
    
    coothead
    ~ the original bald headed old fart ~
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,125
    Rep Power
    4309
    You should really add some text to those links. I use and recommend the Gilder/Levin Method of CSS Image Replacement, which, while more complex than a negative text-indent (as coothead suggests), allows the text to be visible when the image(s) haven't loaded.

    Anyway, this problem is quite tricky to figure out when you first run into it. It's caused by the use of the "background" shortcut property. You see, it sets any unspecified value back to its initial value. In this case, we care that the background-position property is being set back to "0 0". Since "#main_nav li a" has a higher specificity (because of the ID) than just a single class, e.g. ".home", the background-position property set in the rule for each item is overridden. The solution is to either use the "background-image" property instead of the "background" property or increase the specificity of the selectors for the individual links.
    Last edited by Kravvitz; December 18th, 2010 at 10:48 AM.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,125
    Rep Power
    4309
    elkehinze, perhaps you didn't know that we replied because the topic reply notification email messages weren't being sent. (It seems to be fixed now.)
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo