Hallo zusammen,
Ich gav ein Css Code den Ich mir von einer Seite kopiert habe. Bei dem Code wird ein Bild immer mit dem anderen Bild überdeckt. Sprich man hat 3 Bilder von sich und man kann dann wenn man Bild 2 Klickt wird Bild 1 mit Bild 2 überdeckt. Problem hierbei ist, das nicht alle Bilder gleich groß sind.
Frage:
Was müsste man als änderung vornehmen das sich die Bilder nicht überdecken ?
Code:
<!--Profildiashow-->
<style type="text/css">
/* needed for IE to make :active state work first time */
a, a:visited {
color:#000;
text-align: left;
}
/* kleine bilder an der seite*/
a.gallery, a.gallery:visited {display:block; display:inline-block; color:#F33; text-decoration:none; border:1px solid #000; width:90px; float:left; margin:2px; z-index:50;}
a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #F33;}
/* styling for RIGHT gallery */
#container_right {position:relative; width:400px; height:420px; background:#FFF; border:0px solid #a49188; margin:0em auto;}
#container_right img {border:0;}
#container_right .thumbs {width:100px; position:absolute; right:0; top:0;}
#container_right a.gallery:hover span {display:block; position:absolute; width:402px; height:50px; top:265px; left:-430px; padding:5px; font-style:italic; color:#FFF; z-index:100;}
/*Bild nach links und rechts verschieben!!! bei dem left*/
#container_right div.thumbs em.default, #container_right a.gallery:active em, #container_right a.gallery:focus em {display:block; position:absolute; width:250px; height:370px; top:5px; left:-270px; padding:5px; border-bottom-color:#F00; border:1px solid #3d330f; z-index:50;}
</style>
<style>
a:hover {text-decoration:underline; color:green;}
a {text-decoration:none;}
</style>