Positionieren von z-index 2 ?

andi16515 · #1 (**permalink**) 20.11.2013, 10:41

Hallo in die Runde ...
ich bin neu und beschäftige mich seit kurzem mit CSS. Leider stoße ich da - wie wohl viele andere vor mir auch - auf unerklärliche "Anfängergrenzen"

Ich möchte mich heute mal mit einer Frage an die Experten hier wenden.

In einem Container (920px breite) habe ich drei div (links, mitte, rechts).
Der Container ist mit margin-top: 50px; margin-right: auto; margin-left: auto; zentriert.
Über die rechte Spalte (div rechts) möchte ich nun einen halbtransparenten Layer gleicher Größe legen mit z-index 2.
Wie bekomme ich das hin, dass er immer genau darüber liegt, auch bei unterschiedlichen Bildschirmbreiten (15 / 17 / 19 Zoll) ?

Hier mal mein aktueller Stand:
CSS

Code:

.container {width: 920px; height: 500px;
margin-top: 50px;	
margin-right: auto;
margin-left: auto;
padding: 10px;	
background-color: #FFFFFF;
display: block;
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 
}

#links { float:left; width:520px; height: 250px;
 background-color:#c1c1c1;}

#mitte { float:left; width:100px; height: 250px;
 background-color:#b1b1b1;}

#rechts { float:left; width:300px; height: 250px;
 background-image: url(22.jpg);}

#clear { clear:left; }

HTML

Code:

  
<div class="container">
<div id="links>LINKS</div>
<div id="mitte">MITTE</div>
<div id="rechts">RECHTS</div>
<div class="clear"></div>
</div>

Hoffe ich hab mich verständlich ausgedrückt und danke vorab
in die Runde. Regnerische Grüße .....

explanator · #2 (**permalink**) 20.11.2013, 11:13

Zitat:

Zitat von andi16515

Über die rechte Spalte (div rechts) möchte ich nun einen halbtransparenten Layer gleicher Größe legen mit z-index 2.

Wozu soll das denn gut sein, oder anders gefragt, was ist Zweck und Sinn dieses Vorhabens?

andi16515 · #3 (**permalink**) 20.11.2013, 11:31

Zitat:

Zitat von explanator

Wozu soll das denn gut sein, oder anders gefragt, was ist Zweck und Sinn dieses Vorhabens?

Da ein Foto (Wechsel-gif) dahinterliegt brauch ich solch ein Effekt als "Designelemente" für eine Webseite.
Wenn dies auf Grund der unterschiedlichen Browserinterpretationen nicht oder schwer machbar ist, ist es auch kein Problem. Dann müsste ich mir was anderes einfallen lassen.
Habe hier diese vereinfachte Variante gepostet, um es leichter erklären zu können, da es mir in erster Linie um die Positionierung geht...

explanator · #4 (**permalink**) 20.11.2013, 11:38

Versuche mal Anhand der Beispiele und Erklärungen auf SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen es selbst hinzubekommen.

gaby · #5 (**permalink**) 20.11.2013, 12:11

Hallo,

Erstmal den Syntaxfehler beheben:

bei

Zitat:

id="links

fehlt das abschließende Anführungszeichen.

Zitat:

Zitat von andi16515

Regnerische Grüße .....

Hier ist sogar ein kleines Fetzchen blauer Himmel zu sehen.

Grüße
zurück

gaby · #6 (**permalink**) 20.11.2013, 12:43

Nachdem du die Positionierung anhand der Links von explanator hinbekommen hast:

Zitat:

Zitat von andi16515

Über die rechte Spalte (div rechts) möchte ich nun einen halbtransparenten Layer gleicher Größe legen mit z-index 2.
Wie bekomme ich das hin, dass er immer genau darüber liegt, auch bei unterschiedlichen Bildschirmbreiten (15 / 17 / 19 Zoll) ?

evtl so:

div#rechts bekommt ein Kind-Element (div class="layer")

mit

Code:

.layer {
    width: 88%;
    height: 77%;
    background: rgba(255, 255, 255, 0.5); 
}

Die Werte mußt du noch anpassen.
Der letzte Wert bei 'rgba' bestimmt die Transparenz.

andi16515 · #7 (**permalink**) 21.11.2013, 11:01

danke für die hilfe und tipps ...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Relatives Positionieren von Elementen zu beliebigen anderen Elementen im Dokument	dimension	CSS	1	25.07.2008 14:49
Bild absolut positionieren (bottom)	ZuMe	CSS	2	03.07.2008 09:14
mit Link hinterlegte Grafik in Tabellenzelle absolut positionieren...	jhartlep	CSS	0	01.11.2007 14:46
list-style-image vertikal positionieren?	derdiedas	CSS	2	05.03.2007 15:11