CSS sprite menu help

HTML & CSS
1

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!

}
	#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; }

<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

I’m not sure if the problem is with my image perhaps…
Here is the image just in case:

3

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.


<!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

Wow, thank you so much! It works perfectly. I truly appreciate it!!

5

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

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 :slight_smile:

7

Okay, I slightly resized the image itself. I’m hoping this will make it 100% center.

1.png

8

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 :).

9

Thank you very much! It works great :slight_smile:

10

Glad it worked :). You’re welcome.