wissensdurstig
Hallo zusammen,
habe zu meiner neuen Website 'ne Lightbox hinzugefügt, doch hatte ich dann das Problem, dass der schwarze Hintergrund nicht den ganzen Monitor bedeckte, sondern, nur etwas über die Hälfte. Habe anschliessend etwas an der lightbox.css rumgeschraubt, genauergesagt, habe ich mich mit den "width" Werten etwas gespielt, denn ich dachte, dass da wohl das Problem liegt, aber kam ich da leider auch auf keinengrünen Zweig. dann habe ich den Wert wieder zurückgesetzt (auf width:100%), aber nun ist zusätzlich zu dem Problem, dass die Lightbox nicht fullscreen ist, auch noch das Problem, das die Bilder viel zu weit unten dargestellt werden.
Weiß jemand, was ich einstellen muss, damit meine Lightbox Bildschirmfüllend dargestellt wird?
Hier ist die Lightbox.css:
#lightbox{
position: relative;
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 so sieht die Seite momentan aus:
Danke für eure Hilfe!
habe zu meiner neuen Website 'ne Lightbox hinzugefügt, doch hatte ich dann das Problem, dass der schwarze Hintergrund nicht den ganzen Monitor bedeckte, sondern, nur etwas über die Hälfte. Habe anschliessend etwas an der lightbox.css rumgeschraubt, genauergesagt, habe ich mich mit den "width" Werten etwas gespielt, denn ich dachte, dass da wohl das Problem liegt, aber kam ich da leider auch auf keinengrünen Zweig. dann habe ich den Wert wieder zurückgesetzt (auf width:100%), aber nun ist zusätzlich zu dem Problem, dass die Lightbox nicht fullscreen ist, auch noch das Problem, das die Bilder viel zu weit unten dargestellt werden.
Weiß jemand, was ich einstellen muss, damit meine Lightbox Bildschirmfüllend dargestellt wird?
Hier ist die Lightbox.css:
#lightbox{
position: relative;
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 so sieht die Seite momentan aus:
Danke für eure Hilfe!
