• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Lightbox 2.04 - Position der loading Images im Browserfenster festlegen ?

J

Jellicoe

New member
Hallo zusammen,

ich hab auf meiner Website Bilder mit Lightbox organisiert ... funktioniert auch alles prima, nur die Position der loading Images lässt sich nicht einstellen. Im IE lädt er die Bilder on Top, im Mozilla und Google Chrome immer unten, sodass man scrollen muss usw. ... ich hab sämtliche Werte durchprobiert, ohne Ergebnis dazu. Was fehlt mir, damit ich den Bildern eine feste Position im Browserfenster zuweisen kann? Mein CSS-Code sieht so aus:

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; background-color: #fff; width: 200px; height: 200px; 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: 5; }
#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: #f49401; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #f49401; }
#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: 50px; background-color: #f7ae3f; }
 
Geht das nicht mit position:absolute, einer festen Höhe und einer festen Breite?
 
Ja, war auch meine Vermutung, aber ich hab alles durchprobiert ... ich glaube, das hängt gar nicht am CSS Code, sondern irgendwas fehlt an a href im HTML ... ich weiss aber nicht was.
 
Ich habe die Lightbox privat nicht im Gebrauch, aber ich habe vor einigen Tagen an meinem Arbeitsplatz damit zu tun gehabt. Ich habe den originalen CSS-Code der Lightbox einfach kopiert und es hat im FF,IE,... ohne Probleme funktioniert. Es wurde in allen Browsern on Top angezeigt. Bist du dir sicher das du immer noch den richtigen CSS-Code verwendest?

Ich glaube nicht das es an deinem a-Attribut liegt, denn das hat bei der Darstellung des Bildes nichts zu melden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben