SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    32
    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
    32
    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,374
    Mentioned
    180 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
    32
    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
    32
    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,623
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    32
    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,623
    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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    32
    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,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked . You're welcome.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •