CSS Sprites Navigation Menu Horizontal Alignment Problem

jestergraphics · 02-07-2012, 05:51 AM

I'm re-designing my website, 960px wide, with a more interactive and user friendly navigation bar. I'm using 5 separate png images as each button (home, about, services, portfolio, contact us) designed on photoshop. These buttons are [150px by 135px] in size each, with the three different states (inactive, hover, click) being displayed [150px by 45px] in each state. I can't figure out the CSS coding to orient this list horizontally instead of vertically. How do I make each button butt up side by side horizontally instead of top to bottom vertically??

---------------------------------------html -----------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jester Graphics - Creative Design Studios</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<style type="text/css">
body
{
background-image:url('images/bgnd.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>

<body><div id=container>
<a href="index.html" title="home"><img src="/Users/chadhunkele/Desktop/jester-graphics/img/head.png" width="960px" />
<header role="banner"><nav id="navmenu">
<ul><li><a href="index.html" title="home" class="button1">
<img src="/Users/chadhunkele/Desktop/jester-graphics/img/home.png" width="150" height="37" border="0" style="border:none;"
alt="Home Button" /></a></li>
<li><a href="about.html" title="About" class="button2">
<img src="/Users/chadhunkele/Desktop/jestergraphics/images/about.png" width="150" height="135" border="0" style="border:none;"
alt="About Button" /></a></li>
<li><a href="services.html" title="Services" class="button3">
<img src="/Users/chadhunkele/Desktop/jester-graphics/img/services.png" width="150" height="37" border="0" style="border:none;"
alt="Services Button" /></a></li>
<li><a href="portfolio.html" title="Portfolio" class="button4">
<img src="/Users/chadhunkele/Desktop/jester-graphics/img/portfolio.png" width="150" height="37" border="0" style="border:none;"
alt="Portfolio Button" /></a></li>
<li><a href="contact.html" title="Contact Us" class="button5">
<img src="/Users/chadhunkele/Desktop/jester-graphics/img/contact.png" width="150" height="37" border="0" style="border:none;"
alt="Contact Us Button" /></a></li></ul>

<div id="icons"><a href="https://twitter.com/#!/JesterGraphics" target="_blank" title="Jester Graphics Twitter">
<img src="/Users/chadhunkele/Desktop/jester-graphics/img/ticon.png" width="37" height="37" border="0" style="border:none;"
alt="Twitter Icon" /></a>
<a href="http://jestergraphics.wordpress.com/" target="_blank" rel="external"
title="Jester Graphics Blog">
<img src="/Users/chadhunkele/Desktop/jester-graphics/img/wicon.png" width="40" height="40" border="0" style="border:none;"
alt="Wordpress Icon" /></a>
<a href="http://www.flickr.com/photos/jestergraphics/" rel="external" target="_blank">
<img src="/Users/chadhunkele/Desktop/jester-graphics/img/ficon.png" width="37" height="37" border="0" style="border:none;"
alt="Flickr Icon" /></a>
<a href="http://www.linkedin.com/profile/view?id=163716148&trk=tab_pro" rel="external" target="_blank">
<img src="/Users/chadhunkele/Desktop/jester-graphics/img/licon.png" width="37" height="37" border="0" style="border:none;"
alt="LinkedIn Icon" /></a></div></nav></header>

<footer role="contentinfo"><p><small>© Copyright Jester Graphics L.L.C. 2012 Design by: Craig Hunkele</small></p></footer>

</div></body></html>

-------------------------------------------CSS----------------------------------------

#container {
position: relative;
margin: auto;
width: 960px;
height: auto;

}

.content-nav {
list-style: none;
padding: 0;
}
.button1 {
background: url(/Users/chadhunkele/Desktop/jestergraphics/images/home.png) no-repeat 0 0;
width: 150px;
height: 45px;
display: block;
text-indent: -9999px;
}

.button1:hover {

background-position: 0 -45px;

}

.button1:active { background-position: 0 -90px; }

.button2 {
background: url(/Users/chadhunkele/Desktop/jestergraphics/images/about.png) no-repeat 0 0;
width: 150px;
height: 45px;
display: block;
text-indent: -9999px;
}

.button2:hover {

background-position: 0 -45px;

}

.button2:active { background-position: 0 -90px; }

.button3 {
background: url(/Users/chadhunkele/Desktop/jestergraphics/images/services.png) no-repeat 0 0;
width: 150px;
height: 45px;
display: block;
text-indent: -9999px;
}

.button3:hover {

background-position: 0 -45px;

}

.button3:active { background-position: 0 -90px; }

.button4 {
background: url(/Users/chadhunkele/Desktop/jestergraphics/images/portfolio.png) no-repeat 0 0;
width: 150px;
height: 45px;
display: block;
text-indent: -9999px;
}

.button4:hover {

background-position: 0 -45px;

}

.button4:active { background-position: 0 -90px; }

.button5 {
background: url(/Users/chadhunkele/Desktop/jestergraphics/images/contact.png) no-repeat 0 0;
width: 150px;
height: 45px;
display: block;
text-indent: -9999px;
}

.button5:hover {

background-position: 0 -45px;

}

.button5:active { background-position: 0 -90px; }

aaronhockey_09 · 02-07-2012, 02:57 PM

try

#navmenu ul li { float:left; }

jestergraphics · 02-07-2012, 06:52 PM

I figured it out, I was calling up the link images in both, my html and my css so the images were duplicated and overflowing with each other. I deleted the html call up for each image and used absolute positioning to line them up overtop my main header image. Thanks