zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit z-index - funzt nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.10.2009, 09:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.10.2009
Beiträge: 3
RizzzO befindet sich auf einem aufstrebenden Ast
Frage 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;       
}
Danke für eure Hilfe!

RizzzO
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.10.2009, 10:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.10.2009, 10:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.10.2009
Beiträge: 3
RizzzO befindet sich auf einem aufstrebenden Ast
Standard

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 10:36 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 15.10.2009, 11:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von RizzzO Beitrag anzeigen
1. neuer Stapelkontext: Heisst das konkret dass es keine saubere Lösung für mein Problem gibt?
Es gibt sicher eine Lösung.
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:
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...
Du wendest einen filter auf das alphtransparente PNG an. Das Zeug muss alles raus!

Zitat:
3. Positionierung von #logo: Stimmt - was empfielst du mir als Alternative?
Alternative zu was? Zur relativen Verschiebung?
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.
Mit Zitat antworten
  #5 (permalink)  
Alt 15.10.2009, 11:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.10.2009
Beiträge: 3
RizzzO befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Es gibt sicher eine Lösung.
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.
Mach ich.

Zitat:
Zitat von fricca Beitrag anzeigen
Du wendest einen filter auf das alphtransparente PNG an. Das Zeug muss alles raus!
Wo ist hier ein Filter??

Code:
#header-bkg {
	width: 772px;
	height: 110px;
	margin: 0 auto;
        border: 0;
	background: url(images/header_w_75.png) no-repeat;
Zitat:
Zitat von fricca Beitrag anzeigen
Alternative zu was? Zur relativen Verschiebung?
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.
Ich klemm mich mal dahinter. Du hast absolut recht, ich versteh noch zu wenig von positionieren - daher die Frage, wie man das besser löst (auch wenns nur ein Bild ist).

Zitat:
Zitat von fricca Beitrag anzeigen
Meine allgemeine Empfehlung lautet: Lass als Einsteiger die Finger von Transparenz. Aber ich bezweifle, dass du das hören willst.
Nein - die Seite muss bis nächsten Donnerstag stehen. Mir ist absolut bewusst, dass diese nicht perfekt gecodet sein wird, und ich werd mich sicher auch noch dahinter klemmen, wenn ich CSS mal etwas besser intus habe. Aber momentan ist das Ziel reine Funktionalität.

RizzzO
Mit Zitat antworten
  #6 (permalink)  
Alt 15.10.2009, 11:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von RizzzO Beitrag anzeigen
Wo ist hier ein Filter??
#wrapper!!

Zitat:
Ich klemm mich mal dahinter. Du hast absolut recht, ich versteh noch zu wenig von positionieren - daher die Frage, wie man das besser löst (auch wenns nur ein Bild ist).
Bilder reagieren auf text-align. Für Abstände gibt es margin und padding.

Geändert von fricca (15.10.2009 um 11:46 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 15.10.2009, 12:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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!
Mit Zitat antworten
  #8 (permalink)  
Alt 16.10.2009, 09:44
Neuer Benutzer
neuer user
 
Registriert seit: 06.09.2009
Beiträge: 9
Nicolas Certa befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #9 (permalink)  
Alt 19.10.2009, 22:51
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Nicolas Certa Beitrag anzeigen
Mein Tipp: Kaufen! Und zwar sofort die Bände 1 und 2. Es gibt auch 0...
Dem kann ich nur zustimmen

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 22:53 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
ie8, z-index

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
Problem mit WordPress und dem Bilder Upload Maxefix Serveradministration und serverseitige Scripte 0 19.12.2006 14:58
Problem bei Div's - zwei mal das gleiche und doch nicht ... Niriel CSS 10 09.06.2005 17:39
Problem mit einem CSS Layout nARC CSS 20 21.05.2005 06:28
Problem mit Background-Color im FireFox to.ni CSS 2 31.08.2004 11:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:44 Uhr.