Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Lightbox ist nicht Bildschirmfüllend“

Tease

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!
 

cebito

undefined

AW: Lightbox ist nicht Bildschirmfüllend

Ersetz doch deine "kaputte" css durch die Originale, bevor jetzt einer anfängt all deine Änderungen da rauszusuchen, die du vergessen hast rückgängig zu machen. Wenn dein Problem dann noch besteht, dann poste den Link nochmal...
 

Tease

wissensdurstig

AW: Lightbox ist nicht Bildschirmfüllend

Okay, das habe ich jetz gemacht. Alles upgeloaded aber der Fehler bleibt bestehen. So sieht das momentan aus:


hier der link, falls es sich jemand "live" ansehen möchte:

Und hier nun der Lightbox-css-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;
}


Braucht ihr auch noch den CSS und HTML - Code der "Fotos.php"?

Vielen Dank schon mal!
 

Tease

wissensdurstig

AW: Lightbox ist nicht Bildschirmfüllend

Nein, ich habe überhaupt nix geändert. Sind alles quasi die Default-Settings.
Was mir jetzt gerade etwas komisch vorkommt ist, dass es bei mir lokal ja funktioniert. Kann jemand vielleicht mal ausprobieren, ob's bei euch online funktioniert, wenn ihr dem Link folgt?
 

cebito

undefined

AW: Lightbox ist nicht Bildschirmfüllend

Das Problem liegt (glaub ich) bei dir, denn bei mir siehts richtig aus...
 

Tease

wissensdurstig

AW: Lightbox ist nicht Bildschirmfüllend

Hmmm, da ich das Problem nun bereits auf zwei Rechnern gesehen habe, kann ich mir das nun doch nicht vorstellen. Bei mir zu Hause auf nem Mac mit Firefox, und jetzt auch bei mir in der Arbeit mit Windows und IE7. Lightbiox ist zwar etwas "größer" als auf meinem ersten Screenshot, aber das liegt vermutlich an der unterschiedlichen Bildschirmauflösung.
Aktueller Screenshot von Win + IE7:

Ich vermute, dass es daran liegen könnte, dass die Lightbox in meinem Body-Tag liegt, das eine festgeschrieben width von 942px hat und die Lightbox, diese Größe nun übernimmt (weil ja "width=100%"), aber weiß nicht wie ich das nun ändern soll und dann hätten ja wohl mehrere Leute so ein Problem, oder?
 

WebMediaService

Nicht mehr ganz neu hier

AW: Lightbox ist nicht Bildschirmfüllend

Deine Leightbox ist nur 942pcx breit. Du hast die falsche Breite bestimmt.
Gib dem body keine Breit und Höhe, sondern entwickle einen Maincontainer, indem deine Seite ausgegeben wird. Damit ist dein body frei von "Formaten" und deine Lightbox wird richtig angezeigt.
 

K-Dawg

********

AW: Lightbox ist nicht Bildschirmfüllend

Bei mir geht es auch ohne Probs.

Getestet auf Kubuntu (Linux) 9.10
Firefox
Konqueror
Ies4Linux (IE 5.5, 6 und 7)
Epiphany

Greetz
 

Tease

wissensdurstig

AW: Lightbox ist nicht Bildschirmfüllend

Ah, cool. Mittlerweile habe ich das Problem auch (hoffentlich) gelöst. Habe es so gemacht, wie Web media service vorgeschlagen hat (Danke!). Die Breitenangabe bei meinem Body rausgenommen und dafür einen Container eine Ebene unter den Body reingesetzt und dem diese Attribute gegeben. Auf diese Art und Weise funktioniert es.
Dank' euch!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben