Vad gör jag för fel? HMTL/CSS
Hej, håller på och försöker göra en meny inte helt olikt den som finns här på Sweclockers, dvs tabbar med sliding-doors effekt. Men jag kan inte få det att fungera. Problemet som jag har är att när jag klickar på en av tabbarna så byts bilderna precis i klick stunden men sen återgår dem på direkten till de första bilderna, jag vill att dem nya bilderna ska stanna för att sedan återgå till dem första bilderna när man byter tabb. Hittills har jag bara använt mig av HTML och CSS men det här kanske är ett jobb för ett JavaScript?
Min HTML och CSS ser ut så här:
<!DOCTYPE html />
<html>
<head>
<title>Min Sida</title>
<link href="../Stylesheet/StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<ul>
<li><a href="#" title="Link 1"><span>Main</span></a></li>
<li><a href="#" title="Link 2"><span>Projects</span></a></li>
<li><a href="#" title="Link 3"><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>
body {
background:#fff;
margin:0;
padding:0;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
} html>body {font-size:small;}
#header {
float:left;
width:100%;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("../images/norm_left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
float:left;
display:block;
background:url("../images/norm_right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#header a:hover {
color:#333;
}
#header a:active {
background-image:url("../images/norm_right_on.gif");
color:#333;
padding-bottom:5px;
}
#header li:active {
background-image:url("../images/norm_left_on.gif");
}
