SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS sprite menu help

    Hi there, I'm a beginner and followed a tutorial on creating a sprite menu. I'm having some issues with it though. It's cut off, pushed down, and to the right when I look at my site. I want it to fit within my 'main-nav' div.

    Any help would be so greatly appreciated!
    Code CSS:
    }
    	#main-nav {
    	background-color: #FFFFFF;
    	height: 50px;
    	padding-bottom: 13px;
    	padding-top: 1px;
    	clear: both;
    }
    ul#main-nav {
    	width: 800px;
    	list-style: none;
    }
     
    ul#main-nav li { display: inline; }
     
    ul#main-nav li a {
    	display: block; float: left; height: 50px; 
    	background-image: url(nav.png); text-indent: -9999px;
    }
     
    	ul#main-nav li a.home {
    		width: 84px; background-position: 0 0;	
    	}
     
    	ul#main-nav li a.about {
    		width: 98px; background-position: -84px 0;	
    	}
     
    	ul#main-nav li a.entertainers {
    		width: 98px; background-position: -182px 0;	
    	}
     
    	ul#main-nav li a.live {
    		width: 99px; background-position: -280px 0;	
    	}
     
    	ul#main-nav li a.performance {
    		width: 97px; background-position: -379px 0;	
    	}
    	ul#main-nav li a.upgrades {
    		width: 97px; background-position: -476px 0;	
    	}
    	ul#main-nav li a.contact {
    		width: 98px; background-position: -573px 0;	
    	}
    	ul#main-nav li a.design {
    		width: 96px; background-position: -671px 0;	
    	}
     
    	ul#main-nav li a.home:hover, ul#main-nav li a.home:focus {
    		background-position: 0 -50px;	
    	}
     
    	ul#main-nav li a.about:hover, ul#main-nav li a.about:focus {
    		background-position: -84px -50px;	
    	}
     
    	ul#main-nav li a.entertainers:hover, ul#main-nav li a.entertainers:focus {
    		background-position: -182px -50px;	
    	}
     
    	ul#main-nav li a.live:hover, ul#main-nav li a.live:focus {
    		background-position: -280px -50px;	
    	}
     
    	ul#main-nav li a.performance:hover, ul#main-nav li a.performance:focus {
    		background-position: -379px -50px;	
    	}
    	ul#main-nav li a.upgrades:hover, ul#main-nav li a.upgrades:focus {
    		background-position: -476px -50px;	
    	}
    	ul#main-nav li a.contact:hover, ul#main-nav li a.contact:focus {
    		background-position: -573px -50px;	
    	}
    	ul#main-nav li a.design:hover, ul#main-nav li a.design:focus {
    		background-position: -671px -50px;	
    	}
     
    a { outline: none; }
    Code HTML4Strict:
    <div id="page-container">
     
    	<div id="header"></div>
     
      <div id="main-nav">
        <ul id="main-nav">
    		<li><a href="#home" class="home">home</a></li>
            <li><a href="#about" class="about">about</a></li>
            <li><a href="#entertainers" class="entertainers">entertainers</a></li>
            <li><a href="#live" class="live">live</a></li>
            <li><a href="#performance" class="performance">performance</a></li>
            <li><a href="#upgrades" class="upgrades">upgrades</a></li>
            <li><a href="#contact" class="contact">contact</a></li>
            <li><a href="#design" class="design">design</a></li>
    	</ul>
        </div>

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure if the problem is with my image perhaps...
    Here is the image just in case:


  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The measurements don't seem to match up properly and the image is off centre a little bit.

    This should get you back on track.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #main-nav-wrap {
        background-color: #FFFFFF;
        height: 50px;
        padding-bottom: 13px;
        padding-top: 1px;
        clear: both;
    }
    ul#main-nav {
        width: 800px;
        list-style: none;
        margin:0;
        padding:0;
        height:50px;
    }
    ul#main-nav li {
        float:left;
    }
    ul#main-nav li a {
        display: block;
        float: left;
        height: 50px;
        background-image: url(http://i114.photobucket.com/albums/n247/sunsetdrivecruzn/Nav.png);
        text-indent: -9999px;
    }
    ul#main-nav li a.home {
        width: 85px;
        background-position: 0 0;
    }
    ul#main-nav li a.about {
        width: 79px;
        background-position: -85px 0;
    }
    ul#main-nav li a.entertainers {
        width: 135px;
        background-position: -164px 0;
    }
    ul#main-nav li a.live {
        width: 67px;
        background-position: -299px 0;
    }
    ul#main-nav li a.performance {
        width: 136px;
        background-position: -366px 0;
    }
    ul#main-nav li a.upgrades {
        width: 107px;
        background-position: -503px 0;
    }
    ul#main-nav li a.contact {
        width: 94px;
        background-position: -610px 0;
    }
    ul#main-nav li a.design {
        width: 96px;
        background-position: -704px 0;
    }
    ul#main-nav li a.home:hover, ul#main-nav li a.home:focus {
        background-position: 0 -50px;
    }
    ul#main-nav li a.about:hover, ul#main-nav li a.about:focus {
        background-position: -85px -50px;
    }
    ul#main-nav li a.entertainers:hover, ul#main-nav li a.entertainers:focus {
        background-position: -164px -50px;
    }
    ul#main-nav li a.live:hover, ul#main-nav li a.live:focus {
        background-position: -299px -50px;
    }
    ul#main-nav li a.performance:hover, ul#main-nav li a.performance:focus {
        background-position: -366px -50px;
    }
    ul#main-nav li a.upgrades:hover, ul#main-nav li a.upgrades:focus {
        background-position: -503px -50px;
    }
    ul#main-nav li a.contact:hover, ul#main-nav li a.contact:focus {
        background-position: -610px -50px;
    }
    ul#main-nav li a.design:hover, ul#main-nav li a.design:focus {
        background-position: -704px -50px;
    }
    a {
        outline: none;
    }
    ul#main-nav li a:hover{position:relative;top:2px;}
    </style>
    </head>
    <body>
    <div id="page-container">
    <div id="header"></div>
    <div id="main-nav-wrap">
        <ul id="main-nav">
            <li><a href="#home" class="home">home</a></li>
            <li><a href="#about" class="about">about</a></li>
            <li><a href="#entertainers" class="entertainers">entertainers</a></li>
            <li><a href="#live" class="live">live</a></li>
            <li><a href="#performance" class="performance">performance</a></li>
            <li><a href="#upgrades" class="upgrades">upgrades</a></li>
            <li><a href="#contact" class="contact">contact</a></li>
            <li><a href="#design" class="design">design</a></li>
        </ul>
    </div>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thank you so much! It works perfectly. I truly appreciate it!!

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I happen to fix my image in Photoshop to center it, what will I need to do to the code to even everything out? It's only off by a hair now.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you changed the measurements of each tab and or the whole width/height of the image then you will need to recalclulate it. Can you post the new image you created?
    And I'm assuming your using Pauls full code
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I slightly resized the image itself. I'm hoping this will make it 100% center.

    1.png

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the image size is the same, however the changes you say you have made to both images are so small I can't really tell.

    In the background-position property you can change the first value until it lines up, I don't know which way you changed the image (whether text to the right or left) so I can't really help .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much! It works great

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked . You're welcome.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •