Zur Navigation

Steuerung der Slimbox via css

1 elena

Ich habe mal versuchsweise die Slimbox installiert, ein Ableger der Lightbox. Sie wird via "slimbox.css" gesteuert.

/* SLIMBOX */

#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(loading.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 300px;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}

Bei mir sieht das dann auf der Testseite so aus:

http://www.gautinger-weltenbummler.de/start_html/test-slimbox.php

Ich schaffe es leider nicht, das Bild in die Mitte zu kriegen.
Wo liegt mein Fehler??

Warum ich die Slimbox gerne nehmen möchte? Beim IE8 wird bei der Lightbox der Hintergrund komischerweise nicht mehr schwarz.

22.04.2009 17:30

2 Jörg Kruse

Die horizontale Position kannst du mit dem left Wert verändern

#lbImage {
	position: absolute;
	left: 300px;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

22.04.2009 20:00

3 elena

Das weiß ich. Aber ich da kann hineinschreiben, was ich will, das bringt nichts. 300px steht ja schon drin, ich habe es mit höheren, niedrigeren, negativen (unlogisch) oder mit 0 probiert. Es hilft nichts.

Bei der lytebox klappt alles wunderbar:

http://www.gautinger-weltenbummler.de/start_html/test.php
Nur habe ich hier im IE 8 keinen durchgängigen schwarzen Hintergrund mehr. Und das schaut nicht schön aus.
Einzig in der Slimbox funktioniert alles in allen Brwosern bis auf die falsche horizontale Position.

23.04.2009 09:19

4 Jörg Kruse

Doch das Bild wird verschoben, aber der übergeordnete weiße Container nicht, so dass das Bild dann wegen des "overflow: hidden" nicht mehr zu sehen ist.

Wahrscheinlich muss das so:

#lbCenter, #lbBottomContainer {
	position: absolute;
	top: 0;
	left: 600px;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

23.04.2009 09:51 | geändert: 23.04.2009 09:53

5 elena

Ja, so klappt es. Jetzt kann ich weiter herumexperimentieren. Ich habe bei "left" im #lbcenter, #lbBottomContainer den Wert 50% gesetzt, dann ist es immer korrekt in der Mitte.

Und mit dem Befehl "overflow:hidden" muß ich mich eingehender beschäftigen, damit das nicht wieder passiert.

Danke für die schnelle Hilfe!!

23.04.2009 10:28

Zum Schreiben einloggen

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]