Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts

    Question css sprite not working!?

    Every attempt I've tried just doesn't work
    How do I get this sprite to work?
    Is the attached image correct or too much?

    MENU:
    Code:
     
    <ul id="nav">
    <li id="nav_home"><a href="index.php">Home</a></li>
    <li id="nav_about"><a href="about.php">About</a></li>
    <li id="nav_gallery"><a href="gallery.php">Gallery</a></li>
    <li id="nav_services"><a href="services.php">Services</a></li>
    <li id="nav_contact"><a href="contact.php">Contact</a></li>
    </ul>
    CSS:
    Code:
     
    /* Default */
    #nav {
    width: 150px;
    height: 125px;
    position: relative;
    background: url(../img/sprite.png);
    margin: 0;
    padding: 0;
    }
    #nav li {
    float: left;
    }
    #nav li a {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    display: block;
    height: 25px;
    background: url(../img/sprite.png) no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    }
    /*up state*/
    li#nav_home a {
    left: 0;
    width: 150px;
    background-position: 0 0;
    }
    li#nav_about a {
    top: 25px;
    width: 150px;
    background-position: 150px 50px;
    }
    li#nav_gallery a {
    top: 50px;
    width: 150px;
    background-position: 150px 100px;
    }
    li#nav_services a {
    top: 75px;
    width: 150px;
    background-position: 150px 125px;
    }
    li#nav_contact a {
    top: 125px;
    width: 150px;
    background-position: 150px 0;
    }
    /*hover state*/
    li#nav_home a:hover {
    background-position: 300px 0;
    }
    li#nav_about a:hover {
    background-position: 300px 0;
    }
    li#nav_gallery a:hover {
    background-position: 450px 0;
    }
    li#nav_services a:hover {
    background-position: 435px 0;
    }
    li#nav_contact a:hover {
    background-position: 580px 0;
    }
    /*current state*/
    #body_home li#nav_home a {
    background-position: 0 -300px;
    }
    #body_about li#nav_about a {
    background-position: -150px -300px;
    }
    #body_gallery li#nav_gallery a {
    background-position: -290px -300px;
    }
    #body_services li#nav_services a {
    background-position: -290px -300px;
    }
    #body_contact li#nav_contact a {
    background-position: -290px -300px;
    }
    Attached Thumbnails Attached Thumbnails css sprite not working!?-sprite.png  
    Last edited by student101; 06-29-2010 at 10:57 AM. Reason: Can't delete post. Less code & image AND more thinking!
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #2
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts

    Thumbs up

    Can't delete post;
    Solved!
    Less code, less image AND more thinking!

    I have absolutely NO CLUE how I coded this!
    Code:
     
    <style type="text/css">
    img {
     border: 0px none;
    } 
    a{
      outline: none;
    }
    #menu a {
     width:150px;
     margin: 0em;
     padding:0px;
     font: bold 14px/1 sans-serif;
     color:#c60;
     background: url("images/autogen/newsprite.png") 0 0 no-repeat;
     text-decoration: none;
     height: auto;
     text-align: center;
     display: block;
    }
    #menu a:hover { 
    background-position: -304px 0;
    color: #E9BE75;
    }
    #menu a:active {
    background-position: -304px 0;
    color:white;
    }
    #menu .current {
    background-position: -456px 0;
    color:white;
    }
    #menu a:hover.current   {
    background-position: -151.5px 0;
    color:white;
    }
    #menu a span {
     font: normal 14px/24px tahoma, verdana, arial, helvetica, sans-serif;
     color: #313C29;
     margin: 0px;
     padding: 0px;
    }
    </style>
     
    <div id="menu">
    <a href="home.php"><span>Home</span></a>
    <a href="about.php" class="current"><span>About Us</span></a>
    <a href=""><span>Service</span></a>
    <a href=""><span>Location</span></a>
    <a href=""><span>Contact Us</span></a>
    </div>
    Attached Thumbnails Attached Thumbnails css sprite not working!?-newsprite.png  
    Last edited by student101; 06-29-2010 at 11:09 AM.
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:


  •  

    Posting Permissions

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