Hallo meine Lieben!
Da ich ein Problem mit meiner Lightbox habe und da mein Problem mit CSS zutun hat, habe ich mich hier mal direkt angemeldet
Und zwar geht es um folgendes:
Ich habe auf meiner Seite eine Lightbox für meine Fotos eingebunden.
Zum korrekten Funktionieren der Lightbox benötigt sie ein Stylesheet.
Ich habe zudem aber noch ein eigenes Stylesheet auf meiner Seite eingebunden, das für das Layout etc zuständig ist.
Wenn ich nun meine CSS Datei und die Lightbox CSS Datei beide seperat einbinde und anschließend auf ein Bild klicke, dann öffnet sich die Lightbox und das Bild wird angezeigt. Jedoch hält dieser Status nicht einmal eine Sekunde an, kurz: Das Bild verschwindet sofort wieder.
Das selbe Resultat erhalte ich wenn ich den Inhalt der Lightbox CSS Datei in meine eigene CSS Datei kopiere und nur meine CSS Datei einbinde.
Die einzige Variante, die funktioniert, ist, wenn ich
nur die Lightbox CSS Datei einbinde, also meine nicht.
Dann wird alles korrekt dargestellt, das Bild verschwindet nicht.
Also müssen sich scheinbar ein paar Einträge in den beiden CSS Dateien überschneiden, oder?
Ich muss noch hinzufügen, dass dieser Fehler nur unter Opera und Firefox entsteht. Mit dem IE7 läuft alles super.
Nun habe ich in einem anderen Forum gelesen, dass man den Eintrag
Code:
#hoverNav{
position: absolute; <<<--- Löschen
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1000;
}
in der Lightbox CSS Datei löschen soll, um eine korrekte Darstellung im Firefox zu erzielen.
Dies habe ich gemacht, das Bild bleibt nun auch, aber die "Next" und "Prev" Buttons rutschen nun ein ganzes Stück nach unten und der abgedunkelte Hintergrund reicht nicht mehr über die gesamte Seite; siehe auch hier:
Sobald ich dann auf das verrutschte "Next" klicke, gelange ich zum nächsten Bild, jedoch zerhaut's dort die ganze Lightbox; Der "Close" Button ist nicht mehr im Bild, der abgedunkelte Hintergrund und die Buttons sind wir beim ersten Bild verrutscht. Das Verrutschen des "Close" Buttons entsteht aber komischerweise nur beim zweiten Bild (und allen darauf folgenden), nicht beim ersten; siehe auch hier:
Zu guter letzt poste ich hier nochmal meine CSS Dateien, damit ihr sie einschauen könnt, denn ich bin mittlerweile mit meinem Latein, oder viel besser mit meinem CSS, am Ende:
Lightbox CSS Datei:
Code:
#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
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: transparent url(../images/blank.gif) no-repeat; /* 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%
}
#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; }
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}
Und hier meine CSS Datei (die standardmäßig ja sowieso auf meiner Seite eingebunden wird bzw das Layout für das Template ist):
Code:
/* $Id: clansphere.css 232 2006-08-19 16:07:22Z hajo $ */
html{min-height:100.01%}
body {
color:#F2F2F3;
font-family:Verdana,Helvetica,sans-serif;
font-size:8pt;
margin:20px;
text-align:center;
}
a:link, a:visited {
background-color:inherit;
color:#FFFFFF;
text-decoration:none;
}
a:active, a:hover {
background-color:inherit;
color:#004400;
text-decoration:underline;
}
div,span {
background-color:inherit;
color:#FFFFFF;
font-family:Verdana,Helvetica,sans-serif;
}
img {
border:0px;
}
form {
display:inline;
}
td {
background-color:inherit;
color:#F2F2F2;
font-size:8pt;
vertical-align:top;
}
textarea {
width:90%;
}
ul {
margin:0px;
}
#nav-left,#content,#bottom {
float:left;
margin:auto;
}
#nav-left {
width:14%;
}
#nav-right {
float:right;
width:20%;
}
#content {
background-color:inherit;
color:#FFFFFF;
text-align:center;
width:66%;
}
#bottom {
background-color:#709060;
color:inherit;
margin-top:20px;
padding:4px 0px 4px 0px;
width:100%;
}
#head {
background-color:#709060;
color:#F2F2F2;
font-size:25pt;
height:100px;
margin-bottom:20px;
text-align:center;
width:100%;
}
#debug {
height:150px;
margin-bottom:20px;
overflow:auto;
padding-left:4px;
width:100%;
text-align:left;
}
#errors {
color:#CC0000;
}
#sql {
color:#777777;
}
.h1 {
color: #333333;
font-size: 14pt;
font-weight: bold;
text-decoration: none;
}
.h2 {
color: #333333;
font-size: 16pt;
font-weight: normal;
text-decoration: none;
}
.h3 {
color: #333333;
font-size: 20pt;
font-weight: normal;
text-decoration: none;
}
.form {
background-color:#b8b7b7;
border:2px ridge #002200;
color:#002200;
font-family:Verdana,Helvetica,sans-serif;
font-size:8pt;
margin:2px;
padding-left:3px;
}
.forum {
background-color:#CCEEBB;
color:inherit;
margin:auto;
}
.headb {
background-color:#f74600;
color:#F2F2F2;
font-weight:bold;
padding:4px;
text-align:left;
}
.bottom {
background-color:#000000;
color:inherit;
padding:4px 6px 4px 8px;
text-align:left;
}
.newshead {
background-color:#f74600;
color:#F2F2F2;
font-size:11pt;
font-weight:bold;
padding:4px 6px 4px 8px;
text-align:left;
}
.left,.center,.right {
padding:1px;
}
.leftb,.centerb,.rightb {
background-color:#000000;
color:#FFFFFF;
padding:4px 6px 4px 8px;
}
.leftc,.centerc,.rightc {
background-color:#000000;
color:#FFFFFF;
padding:4px 6px 4px 8px;
}
.left,.leftb,.leftc {
text-align:left;
}
.center,.centerb,.centerc {
text-align:center;
}
.right,.rightb,.rightc {
text-align:right;
}
.quote {
background-color:#88BB55;
border:1px solid #CCEEBB;
color:inherit;
padding:6px;
text-align:left;
}
.navhead,.navhead2 {
background-color:#336600;
border:solid #CCEEBB;
border-width:1px 1px 0px 1px;
color:#F2F2F2;
font-weight:bold;
padding:4px;
text-align:center;
}
.navbodyb,.navbody2b {
background-color:#709060;
border:solid #CCEEBB;
border-width:1px 1px 0px 1px;
color:inherit;
list-style:none;
padding:4px 6px 4px 8px;
text-align:left;
}
.calhead {
background-color:#000000;
color:inherit;
padding:4px 2px 4px 2px;
text-align:center;
}
.calday,.calevent,.caltoday, .calweek {
padding:4px 2px 4px 2px;
text-align:right;
}
.calday {
background-color:#000000;
color:inherit;
}
.calevent {
background-color:#ff0000;
color:inherit;
}
.caltoday {
background-color:#f74600;
color:inherit;
}
.calweek {
background-color:#000000;
color:inherit;
border:2px #002200;
}
So, nun frage ich euch, liebe CSS-Asse..
was genau mache ich falsch?
Was muss ich tun, damit das Bild nicht mehr verschiwndet?
Wo liegt der Fehler in meiner CSS Programmierung?
Ich hab soviel gute über euer Forum gehört, ich hoffe ihr könnt mir helfen!
Grüße und besten Danken im Vorraus,
Robin