2008-10-20, 10:10 PM
I am having a problem with CSS sprites. I am trying to create a navbar in the style of apple's. This is my first time using CSS sprites and I have tried to follow all the tutorials correctly. I ended up with something totally different and I don't know why.
Here is the HTML and CSS:
All I get is this:
Here is the HTML and CSS:
<div id="globalnavbar">
<ul id="navbar">
<li id="navhome"><a href="{$mybb->settings['bburl']}/index.php">Home</a></li>
<li id="navsearch"><a href="{$mybb->settings['bburl']}/search.php">Search</a></li>
<li id="navmemberlist"><a href="{$mybb->settings['bburl']}/memberlist.php">Memberlist</a></li>
<li id="navhelp"><a href="{$mybb->settings['bburl']}/calendar.php">Help</a></li>
<li id="navclendar"><a href="{$mybb->settings['bburl']}/misc.php?action=help">Calendar</a></li>
</ul>
</div>
#globalnavbar #navbar ul {
list-style: none;
}
#globalnavbar #navbar li {
display: inline;
}
#globalnavbar #navbar li a {
background-image: url(images/iTunes/navbar.png);
background-repeat: no-repeat;
float: left;
height: 0;
padding-top: 35px;
overflow: hidden;
width: 100px;
}
#globalnavbar #navbar li#navhome {
background-position: 0 0;
}
#globalnavbar #navbar li#navsearch {
background-position: -93 0;
}
All I get is this: