zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Positionieren von z-index 2 ?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.11.2013, 10:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.11.2013
Beiträge: 3
andi16515 befindet sich auf einem aufstrebenden Ast
Standard 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"

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 .....
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.11.2013, 11:13
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von andi16515 Beitrag anzeigen
Ü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?
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.11.2013, 11:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.11.2013
Beiträge: 3
andi16515 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
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...
Mit Zitat antworten
  #4 (permalink)  
Alt 20.11.2013, 11:38
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Versuche mal Anhand der Beispiele und Erklärungen auf SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen es selbst hinzubekommen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.11.2013, 12:11
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo,

Erstmal den Syntaxfehler beheben:

bei
Zitat:
id="links
fehlt das abschließende Anführungszeichen.

Zitat:
Zitat von andi16515 Beitrag anzeigen
Regnerische Grüße .....
Hier ist sogar ein kleines Fetzchen blauer Himmel zu sehen.
Grüße
zurück
Mit Zitat antworten
  #6 (permalink)  
Alt 20.11.2013, 12:43
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

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

Zitat:
Zitat von andi16515 Beitrag anzeigen
Ü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.
Mit Zitat antworten
  #7 (permalink)  
Alt 21.11.2013, 11:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.11.2013
Beiträge: 3
andi16515 befindet sich auf einem aufstrebenden Ast
Standard

danke für die hilfe und tipps ...
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:57 Uhr.