Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Lightbox wegen Overlay halbtransparent“

SWFP

SWFP Mitglied

Hi,
wie kann ich verhindern, dass die Lightbox auch halbtransparent wird, bzw. was habe ich falsch gemacht?

Code:
.overlay {
background-color: black;
opacity: 0.6;
z-index: 100;
padding: 80px;
width: 100%;
height: 100%;
margin-left: -80px;
margin-top: -500px;
margin-bottom: -100px;
}

.lightbox {
padding: 10px;
background-color: white;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin-bottom: 10px;
z-index: 200;
align: middle;
margin: 100px;
position: absolute;
top: 200px;
left: 200px;
width: 50%;
height: 50%;
box-shadow: 10px;
-webkit-box-shadow: 10px 10px 10px;
-moz-box-shadow: 10px 10px 10px;
}

und dann in HMTL:
Code:
<div class="overlay"><div class="lightbox"></div></div>

Ich habe auch schon
Code:
<div class="overlay"></div><div class="lightbox"></div>
ausprobiert, aber dann was die Lightbox ganz woanders.
MfG
SWFP
 

Myhar

Hat es drauf

AW: Lightbox wegen Overlay halbtransparent

Du solltest wirklich die Grundlagen der Grundlagen von HTML und CSS erlernen. Erst dann solltest du dich mit Javascript beschäftigen. Auch den Umgang mit Firebug solltest du schnellstens erlernen, der ist unerlässlich und lässt dich solche Probleme selber analysieren.

Was ist bei dir der Unterschied zwischen einer Lightbox und einem Overlay?
Du hast in deinem CSS angegeben: opacity: 0.6; Eine Grundlage von CSS ist, dass sich Styles auch auf nachfolgende Elemente auswirken. (Nicht alle, aber es ist durchaus logisch, welche sich auswirken und welche nicht)
Ist ein Container also transparent, dann ist logischerweise auch der Inhalt transparent. Ist dein Lightbox-Container im Overlay-Container? Ja, folglich ist der auch transparent.
Änderst du dein HTML auf deinen zweiten Versuch um, dann ist es auch nicht verwunderlich, dass die Lightbox woanders erscheint. Schließlich positionierst du sie absolut und wie man weiß, bzw. nachlesen kann, orientiert sich die absolute Position an den Elternelementen.
Um nochmal auf dein Problem zurück zu kommen und dir gleichzeitig auch zu erklären, wie du solche Probleme selber lösen kannst:
Untersuchst du dein lightbox-Element mit Firebug (das sollte immer der erste Schritt sein!) siehst du, welche Stile dieses hat. Dann solltest du auch sehen, warum es transparent ist.
Du kannst nun dem lightbox Element einen Opacity Wert von 1 zuweisen, aber du wirst sehen, dass sich nichts ändert. Das liegt daran, dass man etwas, was einmal transparent gemacht wurde, nicht mehr intransparent machen kann. Möchtest du nur einen transparenten Hintergrund haben, so verwende transparente Hintergrundfarbe (RGBA, bzw HSLA Angabe)

Anmerkung zu Firebug: Ein Add-On für Firefox, welches für das erstellen von Websites unerlässlich ist. Chrome hat auch so einen Debugger, welcher von Anfang an vorhanden ist (Rechtsklick -> Element untersuchen) Welchen du verwendest ist deine Entscheidung.
Auch IE hat so etwas eingebaut, das ist meiner Erfahrung nach für Anfänger jedoch gänzlich ungeeignet.
 

SWFP

SWFP Mitglied

AW: Lightbox wegen Overlay halbtransparent

Vielen Dank erstmal. Aber einige wenige Elemente sind nicht vom Overlay verdeckt.
 

Myhar

Hat es drauf

AW: Lightbox wegen Overlay halbtransparent

Ja ein overlay legt sich auch nicht (selten) zu 100% über eine Seite. Zumindest denke ich, dass du das meinst. Mehr kann ich aus deinem kurzen Satz nicht herauslesen.
 

SWFP

SWFP Mitglied

AW: Lightbox wegen Overlay halbtransparent

Ich möchte, dass das Overlay komplett über die ganze Seite geht und alle Elemente außer der Lightbox damit einschließt.
 

Myhar

Hat es drauf

AW: Lightbox wegen Overlay halbtransparent

Ich rate einfach mal: Du möchtest eine Maske, welche die restlichen Elemente abdunkelt, so dass das Overlay gut sichtbar und im Vordergrund ist?
Dann muss dein HTML Aufbau folgendermaßen aussehen
HTML:
<div id="mask"></div>

<div class="overlay">
<!-- Hier der Inhalt vom Overlay -->
</div>
</body>
CSS: 
#mask{position:absolute;width:100%;height:100%;opacity:.6;background-color:#000}
.overlay{/*Hier die Stile vom Overlay, also dorthin positionieren wo du es brauchst, Farben, Abstände etc. definieren*/}
 

SWFP

SWFP Mitglied

AW: Lightbox wegen Overlay halbtransparent

Danke, so einfach, da hätte ich auch allein drauf kommen können. Es war anscheinend nur das position:absolute.
 
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.156
Beiträge
2.581.859
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben