XHTMLforum - Positionieren von z-index 2 ?

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Positionieren von z-index 2 ? (http://xhtmlforum.de/showthread.php?t=70286)

Positionieren von z-index 2 ?

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" :oops:

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 .....

Zitat:

Zitat von andi16515 (Beitrag 535231)

Ü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?

Zitat:

Zitat von explanator (Beitrag 535233)

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...

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

Hallo,

Erstmal den Syntaxfehler beheben:

bei

Zitat:

id="links

fehlt das abschließende Anführungszeichen.

Zitat:

Zitat von andi16515 (Beitrag 535231)

Regnerische Grüße .....

Hier ist sogar ein kleines Fetzchen blauer Himmel zu sehen. ;)
Grüße
zurück

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

Zitat:

Zitat von andi16515 (Beitrag 535231)

Ü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.

danke für die hilfe und tipps ... :D