nicht angemeldet
z-index wird nicht übernommen...
0 
Gunnar Bittersmann
0 0 0 Gunnar Bittersmann
z-index wird nicht übernommen...
Ich habe das Problem, dass ich es einfach nicht schaffe, das eine Liste über ein z-index in den Vordergrund zu rücken. Der gekürzte html-Code ist
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel</title>
<link rel="stylesheet" href="stylesheets/style.css" media="screen" type="text/css" />
</head>
<body>
<div id="body">
<div id="Rahmen">
<ul id="Navigation">
<li id="menueins">
<a href="anfang.php" class="liste">Zum Anfang</a>
<ul>
<li><a href="dings.php">link</a></li>
</ul>
</li>
<li id="menuzwei">
<a href="praktisches.php" class="liste">Praktisches</a>
<ul>
<li><a href="dingszwei.php">Link</a></li>
</ul>
</li>
</ul>
<div id="inhalt">
Lorem ipsum...
</div>
</div>
</div>
</body>
</html>
Die gekürzte CSS-Datei ist, es geht um die Klasse menueins. Das fixed ist nur ein Beispiel, absolute und relative habe ich auch schon getestet.
ul#Navigation {
margin: auto;
z-index: 3;
}
ul#Navigation li {
position: relative;
z-index: 4;
}
ul#Navigation li ul {
z-index: 2;
position: absolute;
display: none;
}
ul#Navigation li ul li a {
z-index: 1000;
}
ul#Navigation li:hover ul {
display: block;
}
li#menueins {
background-color: pink;
/*Farbe testweise, um diesen Teil geht es*/
position: fixed;
z-index: 2000;
}
ul#Navigation li ul li {
left: 0em;
float: none;
display: block;
}
ul#Navigation a {
display: block;
}
#inhalt {
position: relative;
z-index: 1;
}
Wer weiß, woran das liegt? Wenn ich das z-index (wie in der zweiten Liste) direkt formatiere wird es übernommen... Würde mich freuen, wenn jemand weiterweiß.
Falls die Kurversion keine Hinweise bietet, gibt es den gesamten Quelltext + CSS unter http://www.opera-tutorial.de/
Gruß Das Ende
-
@@Das Ende:
Ich habe das Problem, dass ich es einfach nicht schaffe, das eine Liste über ein z-index in den Vordergrund zu rücken. […] Wer weiß, woran das liegt?
RTFM!
„'z-index' […] Angewendet auf: Positionierte Elemente“ [CSS2 §9.9.1
Was das bedeutet, steht in [CSS2 §9.3.2]: „Ein Element ist positioniert, wenn seine 'position'-Eigenschaft einen anderen Wert als 'static' hat.“
Live long and prosper,
Gunnar--
„Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)-
@@Das Ende:
Ich habe das Problem, dass ich es einfach nicht schaffe, das eine Liste über ein z-index in den Vordergrund zu rücken. […] Wer weiß, woran das liegt?
RTFM!
„'z-index' […] Angewendet auf: Positionierte Elemente“ [CSS2 §9.9.1
Was das bedeutet, steht in [CSS2 §9.3.2]: „Ein Element ist positioniert, wenn seine 'position'-Eigenschaft einen anderen Wert als 'static' hat.“
Live long and prosper,
GunnarDann solltest du wenigstens meinen Post richtig lesen ;) ... das postion ist bei mir fixed, ich schrieb, dass ich auch relative und absolute ergebnisslos getestet habe.
-
Hi,
Dann solltest du wenigstens meinen Post richtig lesen ;)
stimmt :-)
... das postion ist bei mir fixed,
Nein, es ist relative. Und der z-index steht auf 4. Der Selektor "ul#Navigation li" ist spezifischer als "li#menueins", wird also bei konkurrierenden Eigenschaften gewinnen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
Dann solltest du wenigstens meinen Post richtig lesen ;)
stimmt :-)
... das postion ist bei mir fixed,
Nein, es ist relative. Und der z-index steht auf 4. Der Selektor "ul#Navigation li" ist spezifischer als "li#menueins", wird also bei konkurrierenden Eigenschaften gewinnen.
Cheatah
Dankeschön.
Hab schon etwas an meinem Verstand gezweifelt ;) !important war die entsprechende Lösung.
-
Hi,
Der Selektor "ul#Navigation li" ist spezifischer als "li#menueins", wird also bei konkurrierenden Eigenschaften gewinnen.
Hab schon etwas an meinem Verstand gezweifelt ;) !important war die entsprechende Lösung.
Wenn du !important als Loesung betrachtest, anstatt deinem Wunsch mehr entsprechende Selektoren zu waehlen - dann bleiben die Zweifel bestehen.
MfG ChrisB
-
Hi,
!important war die entsprechende Lösung.
"important" ist etwas anderes als "override". Wenn Du nach dem Löschen aller anderen Regeln noch immer der Ansicht bist, !important sei angebracht, *dann* besteht eine Chance, dass es richtig eingesetzt ist.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Hab den Code jetzt etwas verschlankt. Das !important ist jetzt überflüssig, also keine Sorge. Hab das Ganze gestern nur auf die schnelle Art gelöst. Ich konnte mir jetzt aber mehr Zeit nehmen.
Aber Danke nochmal für die Tips und Hilfe.
-
-
-
@@Das Ende:
Dann solltest du wenigstens meinen Post richtig lesen ;)
Zumindest
ul#Navigation {
margin: auto;
z-index: 3;
}hab ich so gelesen, dass die 'z-index'-Angabe dort ziemlich wirkungslos ist.
Dass du noch was von einer „Klasse menueins“ schriebst, hatte ich in der Tat erst später gelesen. Eine solche aber nicht entdecken könnnen. ;-) (Lassen wir’s mal als Vertipper durchgehen.)
Was ist dein Problem? Ich kann bei http://www.opera-tutorial.de/ keins festellen. (Firefox)
Live long and prosper,
Gunnar--
„Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)-
@@Gunnar Bittersmann:
Was ist dein Problem? Ich kann bei http://www.opera-tutorial.de/ keins festellen. (Firefox)
Naja, dass die Schrift bei längeren Menüpunkten („Torrent-Downloads“) aus dem Rahmen herausragt, ist schon ein Problem.
Live long and prosper,
GunnarPS: Wozu sollte das überflüssige
<div id="body">gut sein? Tip: Auch das 'html'-Element lässt sich formatieren.--
„Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)-
@@Gunnar Bittersmann:
Was ist dein Problem? Ich kann bei http://www.opera-tutorial.de/ keins festellen. (Firefox)
Das Problem tritt bei meiner aktuellen Seite nicht auf, weil die Menüs dort direkt formatiert sind und ich die Klassen nicht anwende. Es geht auch nicht um das z-index:3, das klappt alles wunderbar. Ich möchte zusätzlich erreichen, dass bei einen schmalen Browserfenster, wenn meine Menüleiste umbricht, das ausgeklappte Menü "über" den nächsten liegt, weil es sonst schwer unbenutzbar wäre.
Es geht um die Klasse #menueins in meinem Beispiel. Auf meiner Seite ist das nicht bisher eingebaut, ich möchte es erst einmal funktionierend haben...
Naja, dass die Schrift bei längeren Menüpunkten („Torrent-Downloads“) aus dem Rahmen herausragt, ist schon ein Problem.
Ist mir nicht aufgefallen. Ist nur etwas knapp bei mir, aber werde die Menüs deshalb bissl verbreitern, danke
Live long and prosper,
GunnarPS: Wozu sollte das überflüssige
<div id="body">gut sein? Tip: Auch das 'html'-Element lässt sich formatieren.Ist für den Rahmen. Aber Danke für den Tip, habe festgestellt, dass ich einfach 'body' formatieren kann.
-
@@Das Ende:
Es geht um die Klasse #menueins in meinem Beispiel.
Jetzt lassen wir’s aber nicht mehr als Vertipper durchgehen.
Den Unterschied zwischen Klassen und IDs habe ich versucht in [CLASS-ID] zu veranschaulichen.
Naja, dass die Schrift bei längeren Menüpunkten („Torrent-Downloads“) aus dem Rahmen herausragt, ist schon ein Problem.
Ist mir nicht aufgefallen. Ist nur etwas knapp bei mir, aber werde die Menüs deshalb bissl verbreitern, danke
Das mag kurzzeitig Abhilfe schaffen, löst aber nicht das Problem generell. Spätestens, wenn du nach einer späteren Änderung des Inhalts einen noch längeren Menüpunkt hat, tritt es wieder auf.
Live long and prosper,
Gunnar--
„Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)-
Hi,
Den Unterschied zwischen Klassen und IDs habe ich versucht in [CLASS-ID] zu veranschaulichen.
Mit einem Beispiel, welches ausgerechnet ungueltige Werte (Personalausweisnummern) fuer IDs verwendet, tststs ...
SCNR ChrisB
-
-
-
-
-
-