css menu help please

LJackson

08-15-2010, 09:24 AM

Hi All,

Ihave been following a tutorial to create a menu but with one difference,in the tutorial they have an image for each button and each image consists of 3 individual images for the different states of the button(default, hover, active) and i have just the one image with all the individual images in this image.

the idea is to display certain parts of the image to show the correct individual images but for some reason i cant seem to get the default images to appear, hover works.

here is my page code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 { list-style: none; margin: 0; padding: 0; }
#main_nav li { float: left; }
#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; }

#home { background:url(menuIMG.png); width: 103px; }
#home:hover { background: url(menuIMG.png) 0 0 !important; }
#home.active { background: url(menuIMG.png) -103px 0; }
#main_nav:hover li a#home { background-position: -232px; }

#about { background:url(menuIMG.png); width: 103px; }
#about:hover { background: url(menuIMG.png) -464px 0 !important; }
#about.active { background: url(menuIMG.png) -464px 0; }
#main_nav:hover li a#about { background-position: -580px; }

#webdesign { background:url(menuIMG.png); width: 103px; }
#webdesign:hover { background: url(menuIMG.png) -825px 0 !important; }
#webdesign.active { background: url(menuIMG.png) -103px 0; }
#main_nav:hover li a#webdesign { background-position: -941px; }

#graphicdesign { background:url(menuIMG.png); width: 103px; }
#graphicdesign:hover { background: url(menuIMG.png) -812px 0 !important; }
#graphicdesign.active { background: url(menuIMG.png) -103px 0; }
#main_nav:hover li a#graphicdesign { background-position: -928px; }

#seo { background:url(menuIMG.png); width: 145px; }
#seo:hover { background: url(menuIMG.png) -1046px 0 !important; }
#seo.active { background: url(menuIMG.png) -103px 0; }
#main_nav:hover li a#seo { background-position: -1339px; }

#contact { background:url(menuIMG.png); width: 103px; }
#contact:hover { background: url(menuIMG.png) -1443px 0 !important; }
#contact.active { background: url(menuIMG.png) -103px 0; }
#main_nav:hover li a#contact { background-position: -1443px; }

#books { background:url(menuIMG.png); width: 103px; }
#books:hover { background: url(menuIMG.png) 0 0 !important; }
#books.active { background: url(menuIMG.png) -103px 0; }
#main_nav:hover li a#books { background-position: -232px; }

</style>
</head>

<body>
<ul id="main_nav">
<li><a href="index.html" accesskey="3" id="home" title="Home Page">Home Page</a></li>
<li><a href="about-us.html" accesskey="4" id="about" title="About 3.7 Designs">About Us</a></li>
<li><a href="graphic-design.html" accesskey="6" title="Graphic Design and Marketing" id="graphicdesign">Graphic Designs</a></li>
<li><a href="keyword-optimization/michigan-seo.html" accesskey="7" title="Search Engine Optimization and Marketing" id="seo">Search Engine Optimization SEO</a></li>
<li><a href="ann-arbor-marketing.html" accesskey="8" id="contact" title="Contact Us">Contact Us</a></li>
</ul>
</body>
</html>

and here is a link to my image
http://www.kernow-connect.com/images/menuIMG.png

here is my test page
http://www.kernow-connect.com/menu_test2.php

anyone able to help to get this working correctly?

many thanks
Luke

SB65

08-15-2010, 11:01 AM

I can't quite reconcile the ids on the menu to your graphic, but putting that aside you want something like:

#about {
background:url("images/menuIMG.png") repeat scroll -348px 0 transparent;
width:103px;
}

#graphicdesign {
background:url("images/menuIMG.png") repeat scroll -696px 0 transparent;
width:103px;
}

#seo {
background:url("images/menuIMG.png") repeat scroll -1046px 0 transparent;
width:145px;
}

LJackson

08-15-2010, 11:12 AM

WOW!!!

thanks very much, really appreciate the help mate

Luke

coothead

08-15-2010, 11:22 AM

Hi there LJackson,

I am assuming that your sprite is just for testing purposes as it far from perfect. ;)

Bearing that in mind, the navigation could be coded like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#main_nav {
padding:0;
margin:0;
list-style-type:none;
}
#main_nav li {
float:left;
}
#main_nav a {
display:block;
height:72px;
background-image:url(http://www.kernow-connect.com/images/menuIMG.png);
background-repeat:no-repeat;
text-indent:-9999px;
outline:none;
}
#home {
width:102px;
}
#home:hover {
background-position:-232px 0;
}
#dvds {
width:102px;
background-position:-348px 0;
}
#dvds:hover {
background-position:-580px 0;
}
#cds {
width:100px;
background-position:-698px 0;
}
#cds:hover {
background-position:-930px 0;
}
#vids{
width:129px;
background-position:-1044px 0;
}
#vids:hover {
background-position:-1340px 0;
}
#rays{
width:102px;
background-position:-1487px 0;
}
#rays:hover {
background-position:-1719px 0;
}
</style>

</head>
<body>

<ul id="main_nav">
<li><a id="home" href="#">Home Page</a></li>
<li><a id="dvds" href="#">DVDs</a></li>
<li><a id="cds" href="#">CDs</a></li>
<li><a id="vids" href="#">Video Games</a></li>
<li><a id="rays" href="#">Blue-Rays</a></li>
</ul>

</body>
</html>

coothead

LJackson

08-15-2010, 11:40 AM

hi coothead,

thanks for your reply! yeah the sprite is just for testing lol will be perfect when finished :)

i will check out your code as its always nice to see alternative ways of doing things.

cheers mate
luke

coothead

08-15-2010, 11:45 AM

No problem, you're very welcome. ;)

LJackson

08-15-2010, 12:48 PM

hi coothead,

quick update, i've just tried your code and its great the only problem with it is that i want all other images 'blurred' except the one currently hovered over, at the moment the one hovered is being 'blurred' and the others are not?

any ideas?
thanks mate
luke

coothead

08-15-2010, 01:05 PM

Hi there LJackson,

you just need to swap the background positions for each link....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#main_nav {
padding:0;
margin:0;
list-style-type:none;
}
#main_nav li {
float:left;
}
#main_nav a {
display:block;
height:72px;
background-image:url(http://www.kernow-connect.com/images/menuIMG.png);
background-repeat:no-repeat;
text-indent:-9999px;
outline:none;
}
#home {
width:102px;
background-position:-232px 0;
}
#home:hover {
background-position:0 0;
}
#dvds {
width:102px;
background-position:-580px 0;
}
#dvds:hover {
background-position:-348px 0;
}
#cds {
width:100px;
background-position:-930px 0;
}
#cds:hover {
background-position:-698px 0;
}
#vids{
width:129px;
background-position:-1340px 0;
}
#vids:hover {
background-position:-1044px 0;
}
#rays{
width:102px;
background-position:-1719px 0;
}
#rays:hover {
background-position:-1487px 0;
}
</style>

</head>
<body>

<ul id="main_nav">
<li><a id="home" href="#">Home Page</a></li>
<li><a id="dvds" href="#">DVDs</a></li>
<li><a id="cds" href="#">CDs</a></li>
<li><a id="vids" href="#">Video Games</a></li>
<li><a id="rays" href="#">Blue-Rays</a></li>
</ul>

</body>
</html>

coothead

LJackson

08-15-2010, 01:12 PM

Hi mate,

ah but ow they start off blurred?

what im after is to strt off normal then when hovered over all other 'links' are then blurred leaving the one which is hovered still normal :)

if that makes sence
look at this link to see what i mean
http://www.3point7designs.com/web-design2.html

cheers

coothead

08-15-2010, 01:59 PM

Hi there LJackson,

right, I see what you mean. ;)

Note though that this will not work in IE6, as that browser only renders hover on the a element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#main_nav {
padding:0;
margin:0;
list-style-type:none;
}
#main_nav li {
float:left;
}
#main_nav a {
display:block;
height:72px;
background-image:url(http://www.kernow-connect.com/images/menuIMG.png);
background-repeat:no-repeat;
text-indent:-9999px;
outline:none;
}

#main_nav:hover #home {
background-position:-232px 0;
}
#main_nav:hover #dvds {
background-position:-580px 0;
}
#main_nav:hover #cds {
background-position:-930px 0;
}
#main_nav:hover #vids {
background-position:-1340px 0;
}
#main_nav:hover #rays {
background-position:-1719px 0;
}

#home {
width:102px;
background-position:0 0;
}
#home:hover {
background-position:0 0!important;
}
#dvds {
width:102px;
background-position:-348px 0;
}
#dvds:hover {
background-position:-348px 0!important;
}
#cds {
width:100px;
background-position:-698px 0;
}
#cds:hover {
background-position:-698px 0!important;
}
#vids{
width:129px;
background-position:-1044px 0;
}
#vids:hover {
background-position:-1044px 0!important;
}
#rays{
width:102px;
background-position:-1487px 0;
}
#rays:hover {
background-position:-1487px 0!important;
}
</style>

</head>
<body>

<ul id="main_nav">
<li><a id="home" href="#">Home Page</a></li>
<li><a id="dvds" href="#">DVDs</a></li>
<li><a id="cds" href="#">CDs</a></li>
<li><a id="vids" href="#">Video Games</a></li>
<li><a id="rays" href="#">Blue-Rays</a></li>
</ul>

</body>
</html>

coothead