PDA

View Full Version : css button rollover issue


Cult Classic
22 Dec 2009, 01:59 AM
I'm trying to make a menu using this gif imagethis (http://i49.tinypic.com/10364ps.gif) image and and I cant get the second link to work at all. The "adventures" works but when I try to add in "places" it just starts ****ing up.

the html

<!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><link rel="stylesheet" type="text/css" href="index.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>


<div class="nav">
<h1 class="logo"><a id="logolink" href="#">Alexander May</a></h1>
<div class="menu">
<a class="adventures" href="#">adventures</a>
<span class="hidden"> | </span>
<a class="places" href="#">places</a>
<span class="hidden"> | </span>
<a class="people" href="#">people</a>
<span class="hidden"> | </span>
<a class="dog" href="#">dogdays</a>
<span class="hidden"> | </span>
<a class="contact" href="#">contact</a>

</div>




</body>
</html>


the css

@charset "utf-8";
/* CSS Document */

.nav {
position:absolute;
left:-2px;
top:22px;
width:220px;
height:42px;
overflow:hidden;
}

.nav a:link,
.nav a:visited,
.nav a:active,
.nav a:hover {
position:absolute;
left:0;
display:block;
overflow:hidden;
width:220px;
height:22px;
margin:0;
padding:22px 0 0 0;
background-color:#FFFFFF;
background-image:url("images/menu.gif");
background-repeat:no-repeat;
}
.menu {
position:absolute;
left:-2px;
top:22px;
width:220px;
height:45px;
overflow:hidden;
}

.menu a:link,
.menu a:visited,
.menu a:active,
.menu a:hover {
position:absolute;
left:0;
display:block;
overflow:hidden;
width:220px;
height:45px;
margin:0;
padding:22px 0 0 0;
background-color:#FFFFFF;
background-image:url("images/menu.gif");
background-repeat:no-repeat;
}

h1.logo {
position:relative;
left:-2px;
width:220px;
height:20px;
overflow:hidden;
margin:0 0 10px 0;
}
a.logolink:link,
a.logolink:visited,
a.logolink:active,
a.logolink:hover {
display:block;
width:200px;
height:20px;
margin:0;
padding:24px 0 0 0;
background-color:#FFFFFF;
background-image:url("images/menu.gif");
background-repeat:no-repeat;
background-position:0 -110px;
}
a.logolink:hover {
background-position:0 -110px;
}
a.adventures:link,
a.adventures:visited,
a.adventures:active,
a.adventures:hover {
top:0;
background-position:0 -26px;
}
a.adventures:hover,
a.adventures.on {
background-position:0 -185px;
}