Ich mal wieder - mit dem nächsten Problem...
Ich hoffe, dass der Themenbereich der Richtige ist, weil ich zwar GoLive benutze, aber das folgende kein wirkliches Golive Problem ist...
Ich habe die Lightbox in meine Seite eingebunden. Weil mir die Bilposition zu niedrig war, wollte ich durch die Veränderung von 2 Parametern (die mit top:-40px) die Position der sich öffnenden Bilder nach oben schieben (habe ich mir so zusammengelesen...). Auf den ersten Blick klappt es, aber nach dem Bruchteil einer Sekunde rutscht der untere Teil (mit der Bildinformation und dem Close Button) ca. 1 cm nach unten.
Kann mir jemand sagen, warum, und wie das zu beheben ist?
Hier der Code:
HTML-Code:
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
top:-30px;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat}
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; top:-30px }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: -0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Grüße,
Lutz
