nicht angemeldet
Hallo,
ich habe eine kleine CSS-Galerie gebaut.
... und ich bin froh, dass sie zum größten Teil funktioniert! =)
Leider hat sie einen Bug: Wenn gleich mit dem ersten Klick (egal auf welchen Thumb) verschwindet der 4. und damit letzte Thumb spurlos und taucht auch nichtmehr auf. Klickt man danach auf den 3. Thumb, wechelt der sich mit dem 4. (am selben Platz) ab (Siehe Bild-Info-Text).
Kann mir jemand den entscheidenden Tipp geben, was noch fehlt, bzw. was hier das Problem sein könnte?
Vielen Dank schonmal! =)
Viele Grüße, darock
Hier ist die Galerie:
<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style media="screen" type="text/css">
~~~~~~css
a {
text-decoration: none;
}
a:focus {
outline:none;
}
.box {
position: absolute;
width: 600px;
height:300px;
padding:0;
margin:0;
border:solid;
border-color:#000000;
}
ul {
position: absolute;
padding:0;
margin:0;
border:0;
right:20px;
top:40px;
list-style:none;
}
ul li img {
height:24px;
width:24px;
padding:0;
margin:5px;
border:0;
}
ul li a:focus.hor img, .galerie ul li a:active.hor img {
position:absolute;
left:-370px;
top:0;
width:320px;
height:240px;
}
ul li a:focus.hor img, .galerie ul li a:active.hor img {
position:absolute;
left:-370px;
top:0;
width:320px;
height:240px;
}
ul li a b {
display:block;
position:absolute;
width:150px;
height:250px;
right: 4000px;
top: 150px;
padding:0;
margin:0;
border:0;
}
ul li a:focus b, ul li a:active b {
display:block;
position:absolute;
width:150px;
height:250px;
right: 400px;
top: 150px;
padding:0;
margin:0;
border:0;
}
ul li a:active, ul li a:focus {
position:static;
}
~~~~~~html
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#nogo1" class="hor"><img src="ziege.jpg" /><b>Hier steht die Info Übers Bild1</b></a></li>
<li><a href="#nogo2" class="hor"><img src="ziege.jpg" /><b>Hier steht die Info Übers Bild2</b></a></li>
<li><a href="#nogo3" class="hor"><img src="ziege.jpg" /><b>Hier steht die Info Übers Bild3</b></a></li>
<li><a href="#nogo4" class="hor"><img src="ziege.jpg" /><b>Hier steht die Info Übers Bild4</b></a></li>
</ul>
</div>
</body>
</html>