...

View Full Version : 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&amp;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>&copy; 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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum