|
|||
Problem mit z-index - funzt nicht
Hallo zusammen
ich bin blutiger CSS Anfänger, und hab mir grade eine neue Website gebastelt. Das ganze ist concrete5, basiert auf einem gratis Template welches ich stark modifiziert habe. Textcube GmbH Das Problem bisher war, dass das Logo immer die opacity settings des headers geerbt hat. Daher habe ich nun dieses nicht mehr als child definiert, sondern einfach als separates #div. Es sieht nun zwar gut aus, aber es scheint sich nicht hinter dem Menu plazieren lassen zu wollen. Man sieht deutlich, dass man die zwei Buttons links anklicken kann, sobald man aber auf der Höhe des Logos ist (es ist ein rechteckiges PNG auf transparentem Hintergrund) passiert nichts mehr. Interessant ist: In IE8 funzt das Ganze perfekt! Hier lassen sich alle menu buttons klicken, und das Menu ist auch nicht semi-transparent (man siehts an der weissen Schrift, und den stärkeren rot bei Hover.) In Opera, IE7 und Firefox scheint mein Gebrauch von z-index nichts zu nützen... Meine Frage: Was mach ich falsch? Wieso reagiert IE8 auf die Reihenfolge von z-index (#nav und #navinner sind höher als #logo), die anderen Browser aber nicht? Warum erbt das Menu in den anderen Browsern die Transparenz des Bodys, und in IE8 nicht? Der code (style.css): Code:
/* ----- Structure and Layout ----- */ body { position: relative; top: -205px; text-align : center; background: url(images/background01_mountain_1920_low.jpg); min-width : 770px ; } #logo { /* padding: 16px 0 0 218px;*/ position: relative; top: 122px; left: 50px; z-index:5; } #wrapper { width : 770px; text-align : left; margin-left : auto ; margin-right : auto ; filter:alpha(opacity=75); position:relative; /* z-index:2;*/ } #header { padding-top: 10px; position:relative; /* z-index:3;*/ } #header-bkg { width: 772px; height: 110px; margin: 0 auto; border: 0; background: url(images/header_w.png) no-repeat; filter:alpha(opacity=75); opacity: 0.75; /* position:relative;*/ /* z-index:4;*/ } #maincontainer { float: left; width : 770px; background-color: #ffffff; filter:alpha(opacity=75); opacity: 0.75; position:relative; /* z-index:-100;*/ } #padding { clear: both; padding: 30px 0 0 0; position:relative; z-index:-100; } #content { float: left; width: 380px; padding: 0 0 10px 40px; position:relative; z-index:3; } #newsbox { float: right; padding: 5px 0 0 0; } #content-left { float: left; width: 375px; padding: 0 0 10px 0px; } #newsbox-left { float: left; padding: 5px 0 0 40px; } #content-hdr { width: 375px; overflow: hidden; } #innernews { width: 250px; margin: 40px 40px 0 0; padding: 10px 10px 10px 10px; background: #EDF3EB; filter:alpha(opacity=75); opacity: 0.75; border: 1px solid #DCEAD7; } /* ----- Navigation ----- */ #nav { float: left; padding: 0 0 2px 13px; margin: 0; position:relative; z-index:10; } #navinner { float: center; width: 500px; height: 43px; background: url(images/background_black_round_w500.png); background-repeat: no-repeat; position:relative; z-index:15; /* border-top: 2px solid #e2001a; */ /* border-bottom: 2px solid #e2001a; */ } #nav ul { margin: 0; padding: 0 0 0 27px; list-style: none; } #nav li { float: left; margin: 0; padding: 0 2px 0 8px; } #nav li a { float: left; text-align: center; margin: 5px 0 0 0; padding: 4px 12px; font-weight: bold; border-bottom: 2px solid #e2001a; border-right: 2px solid #e2001a; } #nav li a:hover { border-bottom: 2px solid #e2001a; border-right: 2px solid #e2001a; } #nav li a.active { background: #e2001a; border-bottom: 2px solid #e2001a; border-right: 2px solid #e2001a; } /* ----- Typography ----- */ #innernews p { margin-left: 10px; padding: 0 10px 0 10px; border-left: 1px dashed #422100; } /* ------ Footer ----- */ #footer { clear:both; } RizzzO |
Sponsored Links |
|
|||
In Browsern die opacity kennen, schafft diese Eigenschaft (meist) einen neuen Stapelkontext. Du kannst also deiner Navigation z-index geben so viel du willst -- es ist #maincontainer, der über das Verhältnis zum Logo entscheidet.
opacity gehört zu CSS3 und ist alles andere als leicht einzusetzen, gerade wenn es um Stapeleien geht. Wenn du als "blutiger Anfänger" unbedingt transparente Hintergründe (nein, opacity ist kein transparenter Hintergrund!) willst: Leg alphatransparente PNGs in den Hintergrund. Damit haben dann wenigstens nur alte IEs Probleme. BTW: Die relative Verschiebung von #logo ist überhaupt keine gute Idee. Damit erzeugst du einen horizontalen Scrollbalken. Insgesamt noch ein Rat: Leg dir das Buch Little Boxes zu. Das sieht doch alles mehr nach Ratespiel als nach bewusst angewandtem CSS aus.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Danke für deine Antwort.
1. neuer Stapelkontext: Heisst das konkret dass es keine saubere Lösung für mein Problem gibt? 2. Alphatransparente PNGs: Schau mal Textcube GmbH an. Da hab ich genau das beim Header probiert - in FF sieht das gut aus, aber sogar IE7 hat massive Probleme, das darzustellen... 3. Positionierung von #logo: Stimmt - was empfielst du mir als Alternative? 4. Das Buch schau ich mir gerne mal an, danke. Danke & Gruss RizzzO Geändert von RizzzO (15.10.2009 um 11:36 Uhr) |
|
|||
Zitat:
Aber ich kann dir nicht sagen, "ändere Zeile 5" und das war's. Du müsstest zuerst deinen Code aufräumen. Das fängt damit an, alle überflüssigen leeren Elemente aus dem HTML zu entfernen und geht weiter zum Stylesheet. Deshalb nochmal: Kauf dir ein Buch und lerne CSS von Grund auf. Zitat:
Zitat:
Wenn du relative Verschiebung verwenden willst, musst du zuerst lernen, wie das funktioniert. Und wieder hilft ein Buch. Du brauchst diese Elementmassen (die jetzt immerhin schon im Header liegen) nicht. Wenn du ein Bild im Kopfbereich willst, dann brauchst du nur genau dieses Bild. Dieses Bild braucht dann noch einen Alternativtext. Und wenn es die Überschrift für deine Seite sein soll, dann zeichne es als Überschrift aus. Alles andere weg. Dann kann man weitersehen. Meine allgemeine Empfehlung lautet: Lass als Einsteiger die Finger von Transparenz. Aber ich bezweifle, dass du das hören willst.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
||||
Zitat:
Zitat:
Code:
#header-bkg { width: 772px; height: 110px; margin: 0 auto; border: 0; background: url(images/header_w_75.png) no-repeat; Zitat:
Zitat:
RizzzO |
|
|||
#wrapper!!
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (15.10.2009 um 12:46 Uhr) |
|
|||
Gerade habe ich erfahren, dass Peter Müller beschlossen hat, sein Little Boxes (1) zu ... verschenken. Du musst also nicht mehr warten, bis [der Versand deiner Wahl] liefert: Little Boxes Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS
Viel Spaß beim Lernen!
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Hallo, Little Boxes online lesen macht allerdings wenig Spaß! Ich habe auch mit den Büchern angefangen und gerade zu beginn ist es wichtig, dass du die Beispiele "nachspielst". Dann nützt dir eine Internetseite herzlich wenig, wenn du im Buch mal eben blättern kannst.
Mein Tipp: Kaufen! Und zwar sofort die Bände 1 und 2. Es gibt auch 0... |
|
||||
Zitat:
Die Online-Version von Teil 1 ist m. E. gut geeignet, um bestimmte Themen zu lesen oder auch nur mal ins Buch reinzuschnuppern ohne es gleich kaufen zu müssen. Oder um in Foren direkte Links zu bestimmten Erklärungen wie Kaskade, Floats oder sonstwas zu setzen.
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao« Geändert von pmmueller (19.10.2009 um 23:53 Uhr) |
Sponsored Links |
Stichwörter |
ie8, z-index |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit WordPress und dem Bilder Upload | Maxefix | Serveradministration und serverseitige Scripte | 0 | 19.12.2006 15:58 |
Problem bei Div's - zwei mal das gleiche und doch nicht ... | Niriel | CSS | 10 | 09.06.2005 18:39 |
Problem mit einem CSS Layout | nARC | CSS | 20 | 21.05.2005 07:28 |
Problem mit Background-Color im FireFox | to.ni | CSS | 2 | 31.08.2004 12:13 |