Frage stellen
Also, ich bin dabei eine CSS Gallerie für ein paar Bilder zu erstellen. Hat auch alles super geklappt, bis ich irgendwann was geändert habe. Ich komme einfach nicht hinter den Fehler. Wie gesagt es lief vor ner Stunde (auch im IE). Vllt hab ich auch nur zu lange davor gesessen und sehe den Fehler jetzt einfach nicht.
--->Hier die Seite online zum Testen<---
Naja zum Problem:
Beim hover wird das bereits geladene Bild in (bzw. über) dem Kasten angezeigt. Beim focus bleibt es dann stehen. Durch den Z-Index ist es aber weiterhin möglich, sich die anderen Bilder per hover anzeigen zu lassen. (hoffe es ist verständlich ?!?!
)
Naja und nun gehtes nicht mehr im IE.
Hier der HTML-Code inklusive dem CSS-Code. Ich schätze mal die Bilder Braucht ihr nicht.
- Code: Alles auswählen
<style type="text/css">
#pic {
height:250px;
width: 500px;
border:0px;
position:relative;
}
#pic a.p1, #pic a.p1:visited {float : right; margin : 4px 10px 4px 10px; border:0px; top:0; left:0; border:0;}
#pic a .large {position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px; z-index:100;}
#pic a.p1:hover .large {position:absolute; top:15px; left:13px; width:316px; height:180px; z-index:100;}
#pic a.p1:active .large {position:absolute; top:15px; left:13px; width:316px; height:180px; z-index:10;}
#pic a.p1:focus .large {position:absolute; top:15px; left:13px; width:316px; height:180px; z-index:10;}
#pic a img {border:#CCCCCC 1px solid;}
#picthumbs {
float : left;
height : 180px;
width : 110px;
padding : 5px 0px 13px 0px;
overflow: hidden;
border-left: #999999 1px solid;
border-bottom: #999999 1px dotted ;
margin: 10px 0px 0px 27px;
text-decoration:none;
}
#picweiter {
height : 25px;
width : 110px;
float : left;
padding-top : 5px;
overflow: hidden;
margin: 0px 0px 0px 27px;
border-left: #999999 1px solid;
text-align:center;
}
#picpic {
height : 226px;
width : 324px;
float : left;
padding : auto;
overflow: hidden;
margin: 10px 0px 0px 8px;
border: #999999 1px solid;
background: #E5E5E5;
}
#pictext {
font-style:italic;
font-size:30px;
font-family: "Monotype Corsiva";
text-align:center;
position:absolute;
top: 80px;
left:110px;
color:#666666;
}
#pictext2 {
font-size:16px;
font-family: "Monotype Corsiva";
text-align:center;
position:absolute;
top: 115px;
left:145px;
color:#666666;
}
</style>
<div id="pic" >
<div id="picpic">
<div id="pictext">Have Fun !</div>
<div id="pictext2">-Seite 2-</div>
</div>
<div id="picthumbs">
<a class="p1" href="#nogo" title="thumbnail image">
<img alt="Bild 1" src="images/fotos/small/thumb1.jpg"/>
<img alt="Bild 2" src="images/fotos/medium/pic1.jpg" class="large"/>
</a>
<a class="p1" href="#nogo" title="thumbnail image">
<img alt="Bild 3" src="images/fotos/small/thumb2.jpg"/>
<img alt="Bild 4" src="images/fotos/medium/pic2.jpg" class="large"/>
</a>
<a class="p1" href="#nogo" title="thumbnail image">
<img alt="Bild 5" src="images/fotos/small/thumb3.jpg"/>
<img alt="Bild 6" src="images/fotos/medium/pic3.jpg" class="large"/>
</a>
</div>
<div id="picweiter">
<a href="main.php?action=foto1">1</a>
<a href="main.php?action=foto2">2</a>
<a href="main.php?action=foto3">3</a>
<a href="main.php?action=foto4">4</a>
</div>
</div>
Danke schon einmal im Voraus!
