nicht angemeldet
Matthias Apsel
Der Martin
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Gunnar Bittersmann
Matthias Apsel
Ausgangssituation
Dazugehörige CSS Codes zu der Hauptnavigation class="navigation1" und zu der Nebennavigation class="navigation2" habe ich in eine externe CSS Datei ausgelagert. Die Nebennavigation befindet sich 20px unter der Hauptnavigation und soll den Besuchern das Rumstöbern komfortabler machen.
Mein Problem ist, dass die Nebennavigation im Vordergrund steht. Heißt, wenn man wieder die Hauptnavigation besuchen möchte geht das nicht, weil die Drop Down Menüs sich hinter die Nebennavigation schieben. Sieht erstens Blöd aus und zweitens kann man die Menüpunkte von der Hauptnavigation nicht mehr auswählen, weil... Im Hintergrund.
Mein HTML Quellcode sieht etwa so aus...
Hauptnavigation (Drop Down Menü)
<div class="navigation1">
<ul>
<li><a href="nauptnav1.html">Hauptnavigation 1</a></li>
<li><a href="nauptnav2.html">Hauptnavigation 2</a></li>
<ul>
<li><a href="nauptnav2.1.html">Hauptnavigation 2.1</a>
<ul>
<li><a href="nauptnav2.1.1.html">Hauptnavigation 2.1.1</a></li>
<li><a href="nauptnav2.1.1.html">Hauptnavigation 2.1.1</a></li>
</ul>
</li>
<li><a href="nauptnav2.2.html">Hauptnavigation 2.2</a></li>
<li><a href="nauptnav2.3.html">Hauptnavigation 2.3</a></li>
<li><a href="nauptnav2.4.html">Hauptnavigation 2.4</a></li>
<li><a href="nauptnav2.5.html">Hauptnavigation 2.5</a></li>
</ul>
<li><a href="nauptnav3.html">Hauptnavigation 3</a></li>
<ul>
<li><a href="nauptnav3.1.html">Hauptnavigation 3.1</a></li>
<li><a href="nauptnav3.2.html">Hauptnavigation 3.2</a></li>
<li><a href="nauptnav3.3.html">Hauptnavigation 3.3</a></li>
</ul>
</li>
<li><a href="nauptnav4.html">Hauptnavigation 4</a></li>
<ul>
<li><a href="nauptnav4.1.html">Hauptnavigation 4.1</a></li>
<li><a href="nauptnav4.2.html">Hauptnavigation 4.2</a></li>
<ul>
<li><a href="nauptnav4.2.1.html">Hauptnavigation 4.2.1</a></li>
<li><a href="nauptnav4.2.2.html">Hauptnavigation 4.2.2</a></li>
</ul>
</li>
<li><a href="nauptnav4.3.html">Hauptnavigation 4.3</a></li>
<li><a href="nauptnav4.4.html">Hauptnavigation 4.4</a></li>
<li><a href="nauptnav4.5.html">Hauptnavigation 4.5</a></li>
</ul>
</li>
<li><a href="nauptnav5.html">Hauptnavigation 5</a></li>
</ul>
</div>
<ul class="navigation2">
<li><a href="nauptnav2.1.html">Hauptnavigation 2.1</a></li>
<li><a href="nauptnav2.2.html">Hauptnavigation 2.2</a></li>
<li><a href="nauptnav2.3.html">Hauptnavigation 2.3</a></li>
<li><a href="nauptnav2.4.html">Hauptnavigation 2.4</a></li>
<li><a href="nauptnav2.5.html">Hauptnavigation 2.5</a></li>
</ul>
Wie könnte ich dieses Problem Lösen?
Vielen Dank im Voraus
Habe schon folgendes ausprobiert...
In den HEAD Tag folgendes eingefügt.
<style type="text/css">
/* Reihenfolge Navigation */
.hauptnavigation {
z-index:200;
}
/* Reihenfolge Nebennavigation */
.nebennavigation {
z-index:100;
}
</style>
Und dann der Hauptnavigation ein DIV Tag mit class="hauptnavigation" und der Nebennavigation ein DIV Tag class="nebennavigation" zugewiesen.
Leider ohne Erfolg. Ich weiß gar nicht mehr wo ich noch ansetzen soll.
Wie könnte ich dieses Problem Lösen?
Vielen Dank im Voraus
Hi Spider
Ist vielleicht 'ne blöde Idee, aber ich kenn das, dass dieses z-index irgendwie nicht wirklich funzt. Hier meine - vielleicht total bescheuerte - Idee:
Stelle einfach die Navigation2 an den Anfang deines HTML-Codes, weise ihr aber eine absolute Position mittels css zu.
Danach erst folgt die Navigation1, der du - so weit ich das beurteilen kann, ebenfalls eine absolute Position zuweisen kannst, aber nicht musst.
Somit liegt die Nav 1 im Quelltext "unter" Nav2, die zuerst ausgeführt wird - was heißt: Von den Ebenen her ist dann Nav1 immer über Nav2.
Gruß Rawir
Om nah hoo pez nyeetz, Rawir!
... aber ich kenn das, dass dieses z-index irgendwie nicht wirklich funzt.
z-index wirkt nur auf Elemente, deren Wert der CSS-Eigenschaft position verschieden von static ist, also zum Beispiel relative.
Matthias
z-index wirkt nur auf Elemente, deren Wert der CSS-Eigenschaft position verschieden von static ist, also zum Beispiel relative.
Matthias
Hallo Matthias
Beide Navigationen besitzen den Wert "relative".
Also habe ich meinem Body den Wert "absolut" zugewiesen.
So wie ich den Artikel verstanden habe wird Element "absolut" in der Hirarchie ganz vorne gesetzt und alle weiteren Elemente mit "relative" der Reihe nach wie diese in der CSS Datei stehen. Hat leider auch nicht funktioniert... Oder hab ich was übersehen?
Hallo,
So wie ich den Artikel verstanden habe wird Element "absolut" in der Hirarchie ganz vorne gesetzt und alle weiteren Elemente mit "relative" der Reihe nach wie diese in der CSS Datei stehen.
dann hast du es falsch verstanden. Ganz knapp zusammengefasst:
1. Elemente mit position:absolute werden aus dem Dokumentfluss herausgelöst und bilden einen
eigenen Kontext. Sie beeinflussen die Position und Größe anderer Elemente nicht mehr, was
ein unerwünschter Nebeneffekt sein kann (das deutet dann aber darauf hin, dass absolute
Positionierung nicht das Mittel der Wahl ist).
Position und Größe des positionierten Elements werden über eine sinnvolle Kombination von
top, left, bottom, right, width und height festgelegt; außerdem kann z-index wirken.
2. Elemente mit position:relative bleiben im normalen Dokumentfluss und werden lediglich um
einen Offset, der mit top, left, bottom oder right angegeben wird, gegenüber ihrer Normal-
lage verschoben.
In beiden Fällen ist das positionierte Element dasjenige, an dem sich absolut positionierte Kindelemente ausrichten. Deshalb ist mitunter sogar position:relative mit einem Offset von 0 (Defaultwert) sinnvoll.
Ciao,
Martin
z-index wirkt nur auf Elemente, deren Wert der CSS-Eigenschaft position verschieden von static ist, also zum Beispiel relative.
Matthias
Hallo Matthias
Sorry Matthias
war zu schnell. Position hat nicht mit der Reihenfolge zu tun, sondern lediglich mit der Position.
Auf jeden Fall kriege ich es nicht hin und brauche Hilfe.
Om nah hoo pez nyeetz, Spider!
Auf jeden Fall kriege ich es nicht hin und brauche Hilfe.
Dann wäre es jetzt an der Zeit, die Seite zu zeigen.
Matthias
Om nah hoo pez nyeetz, Spider!
Auf jeden Fall kriege ich es nicht hin und brauche Hilfe.
Dann wäre es jetzt an der Zeit, die Seite zu zeigen.
Matthias
Hallo Matthias
Hab das bis jetzt nicht gemacht, damit die Leute hier nicht denken, dass ich Schleichwerbung verbreiten möchte oder so. Man muss schon gewisse Regeln respektieren...
Hier die Seite.
P.S. Die Seite ist noch im Aufbau also bitte nicht so sehr an dem Aussehen aufhalten. ;-)
Möchte erstmal die Navigation zum Laufen kriegen...
Om nah hoo pez nyeetz, Spider!
Was soll denn dieser Code?
<ul>
<li>
<b class="p1"></b>
<b class="p2"></b>
<b class="p3"></b>
<b class="p4"></b>
<a href="../index.html">Willkommen</a>
</li>
Matthias
Was soll denn dieser Code?
Das ist der Verlauf von den Buttons oben p1 bis p4 (Hauptnavigation)
p5 - p8 Verlauf von Rollover Buttons (Hauptnavigation)
Om nah hoo pez nyeetz, Spider!
Das ist der Verlauf von den Buttons oben p1 bis p4 (Hauptnavigation)
p5 - p8 Verlauf von Rollover Buttons (Hauptnavigation)
Das versteh ich nicht. Muss ich wahrscheinlich auch nicht. Ich noch mal in deinen QuÄltext geguckt. Wenn du wirklich noch am Anfang stehst, verzichte auf Tabellenlayout. Fang von vorn an, ohne Tabellen zur Gestaltung zu missbrauchen.
Matthias
Das versteh ich nicht. Muss ich wahrscheinlich auch nicht.
Schau her...
CSS Auszug
/* Formatierung Verlauf Button Normal-Ansicht*/
.navigation b {display:block; overflow:hidden; height:1px;}
.navigation b.p1 {background:#0CF; margin:0px 5px;}
.navigation b.p2 {background:#B0B0B0; border:2px solid #0CF; border-width:0 2px; margin:0 3px;}
.navigation b.p3 {background:#999; margin:0 2px; border:1px solid #0CF; border-width:0 1px;}
.navigation b.p4 {height:2px; background:#797979; margin:0 1px; border:1px solid #0CF; border-width:0 1px;}
.navigation b.p5 {background:#A3EBFA; margin:0 5px;}
.navigation b.p6 {background:#5ADAF5; margin:0 3px;}
.navigation b.p7 {background:#42D6F4; margin:0 2px;}
.navigation b.p8 {height:2px; background:#21CEF3; margin:0 1px;}
/* Formatierung Verlauf Button Rollover-Ansicht*/
.navigation li:hover b.p2, .navigation a:hover b.p2 {background:#DBDBDB;}
.navigation li:hover b.p3, .navigation a:hover b.p3 {background:#C0C0C0;}
.navigation li:hover b.p4, .navigation a:hover b.p4 {background:#B1B1B1;}
Da wird Streifen für Streifen ein Verlauf aufgebaut. Sieht halt schön aus.
Wenn du auf Rollover Menüs gehst wirst du sehen, dass bei Überfahren ein Rechteck in GRAU markiert wird und ein Abgerundeter Verlauf unten und oben von BLAU in WEISS da ist, der die Farbe nicht ändert. p5 bis p8
Ich noch mal in deinen QuÄltext geguckt. Wenn du wirklich noch am Anfang stehst, verzichte auf Tabellenlayout. Fang von vorn an, ohne Tabellen zur Gestaltung zu missbrauchen.
Ich bin, wie so viele anderen... Und gehe den Weg des geringsten Wiederstandes. :-) Die Positionierung fällt mit den Tabellen viel einfacher.
Werde mich da noch genauer reinarbeiten, hab aber leider momentan nicht die Zeit dafür. Momentan zählt für mich das Endergebniss. Und sobald alles läuft kann ich mich an die Optimierung machen...
Aber jetzt zu dem eigentlichem Problem...
Eine Idee wie ich die Hauptnavigation in den Vordergrund kriege?
Om nah hoo pez nyeetz, Spider!
Eine Idee wie ich die Hauptnavigation in den Vordergrund kriege?
Ja. Ich hatte dem falschen geantwortet. Wenn du dich anmeldest, kannst du alle Antworten fortlaufend sehen, da wäre dir meine sicher aufgefallen.
Matthias
Keine Chance Matthias...
Hab schon aus Verzweiflung jeder Eigenschaft der Hauptnavigation ein z-index 100 und jeder Eigenschaft der Nebennavigation ein z-index 10 zugewiesen.
Funktioniert immer noch nicht.
Das habe ich schon am Anfang ausprobiert. Und jetzt gerade auch :-(
Deswegen die Idee mit dem DIV Tag.
Über eine Anmeldung habe ich auch schon nachgedacht. Beim nächsten Thema folg die Anmeldung. ;-)
Hab jetzt die Lösung rausgefunden.
(Das hier ist jetzt nur an die Anfänger, wie ich es auch bin, gerichtet)
Und Zwar...
Ich nahm an, dass wenn wenn man eine bestimmte Definition in CSS beschreibt die Reihenfolge der Eigenschaften total unwichtig wäre. z.B.
.navigation b.p2 {
background:#B0B0B0;
border:2px solid #0CF;
border-width:0 2px;
margin:0 3px;
z-index:100;
}
So ist das aber nicht.
Mein Fehler war, dass ich die Eigenschaft z-index:100; an das Ende der Beschreibung gesetzt habe. Diese Eigenschaft gehört aber an den Anfang der Beschreibung, weil die darauf folgende Beschreibungen die Eigenschaft z-index:100; automatisch übernehmen. So ist es also richtig.
.navigation b.p2 {
background:#B0B0B0;
border:2px solid #0CF;
border-width:0 2px;
margin:0 3px;
z-index:100;
}
Danke noch mal für die Unterstützung
Om nah hoo pez nyeetz, Spider!
Du redest wirr ;-)
Bearbeite den entsprechenden Abschnitt im wiki. Verwende auch die richtigen Fachbegriffe. Das ist vor allem für die Anfänger wichtig und vor allem für diese darf dein Posting nicht unkommentiert stehen bleiben.
Ich nahm an, dass wenn wenn man eine bestimmte Definition in CSS beschreibt die Reihenfolge der Eigenschaften total unwichtig wäre. z.B.
die Reihenfolge der Wertzuweisungen ist völlig egal, solange es sich um verschiedene Eigenschaften handelt.
{border: 1px solid red; margin: 5px;} und {margin: 5px; border: 1px solid red;} sind völlig identisch.
(Teilweise) gleichlautende Zuweisungen überschreiben vorhergehende.
{border: 5px solid red; border-left-color: blue;} ist nicht identisch zu {border-left-color: blue; border: 5px solid red;}
border-width:0 2px;
... ist ungültiges CSS
Mein Fehler war, dass ich die Eigenschaft z-index:100; an das Ende der Beschreibung gesetzt habe. Diese Eigenschaft gehört aber an den Anfang der Beschreibung, weil die darauf folgende Beschreibungen die Eigenschaft z-index:100; automatisch übernehmen.
Das ist so falsch.
Nachfolgenden "Beschreibungen" = Deklarationsblöcken oder Regelsätzen ist völlig egal, welche Regelsätze es noch gibt.
Richtig ist, dass Kindelemente im DOM (= HTML-Dokument) bestimmte Eigenschaften ihres Elternelements erben. Farben und Schriftarten werden beispielsweise vererbt, Hintergründe oder Rahmen beispielsweise nicht.
z-index wird auch nicht vererbt. ABER: Die Nachfahrenelemente bilden wieder einen eigenen Stapel. Siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=selfhtml dort: Erläuterung.
Matthias
Hallo,
border-width:0 2px;
... ist ungültiges CSS
nein, wie kommst du darauf?
Die Eigenschaft border-width kann ein bis vier Parameter haben, und wenn der Parameterwert 0 ist, muss auch keine Einheit angegeben sein.
border-width:0 2px;
heißt: border-top-width und border-bottom-width sind 0, border-right-width und border-left-width sind 2px.
Ciao,
Martin
Om nah hoo pez nyeetz, Der Martin!
[gültiges CSS]
... ist ungültiges CSSnein, wie kommst du darauf?
Stimmt.
Matthias
@@Spider:
nuqneH
Das ist der Verlauf von den Buttons oben p1 bis p4 (Hauptnavigation)
p5 - p8 Verlauf von Rollover Buttons (Hauptnavigation)
Autsch! Für Verläufe gibt es Gradienten (mit -ms-, -moz-, -o-, -webkit--Präfixen). Für IE 9 wegen der runden Ecken SVG.
Für IE < 9 nimmst du ein Hintergrundbild (CSS-Sprite, evtl. sliding doors) (in anderen Fällen als deinem Filter).
Qapla'
Om nah hoo pez nyeetz, Matthias Apsel!
Auf jeden Fall kriege ich es nicht hin und brauche Hilfe.
Deine hellblauen Ausklappmenüs brauchen einen höheren z-index als deine Nebennavigation.
Matthias
Deine hellblauen Ausklappmenüs brauchen einen höheren z-index als deine Nebennavigation.
Keine Chance Matthias.
Hab schon aus Verzweiflung jeder Eigenschaft der Hauptnavigation ein z-index 100 und jeder Eigenschaft der Nebennavigation ein z-index 10 zugewiesen. Funktioniert immer noch nicht.
P.S. Über das Anmelden hab ich auch schon nachgedacht. Beim nächsten Thema folg eine Anmeldung.
Om nah hoo pez nyeetz, Spider!
Deine hellblauen Ausklappmenüs brauchen einen höheren z-index als deine Nebennavigation.
Keine Chance Matthias.
Ich habe deinem Selektor
.navigation ul ul
z-index: 11;
~~~ [\*]
hinzugefügt und es funktioniert (im FF10). Möglicherweise stolpern andere Browser über die [Fehler](http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.berufliche-freiheit.com%2FHTML%2Fihre_chance.html).
[\*] Weil du der Nebennavigation den z-index 10 gegeben hast
Matthias
--
1/z ist kein Blatt Papier.
Stelle einfach die Navigation2 an den Anfang deines HTML-Codes, weise ihr aber eine absolute Position mittels css zu.
Danach erst folgt die Navigation1, der du - so weit ich das beurteilen kann, ebenfalls eine absolute Position zuweisen kannst, aber nicht musst.
Moin
Die Idee ist grundsätzlich gut, dann müsste ich mir nämlich überhaupt keine Gedanken über das Verdecken machen, aber das sieht dann blöd aus und macht kein Sinn. Ich probier mal darzustellen wie das bei mir ausschaut.
Also erst die Hauptnavigation "Nav" (unter dem Banner) mit Drop Down Menü
Angonommen Nav2 hat jetzt Mehrere Unterpunkte Sollte das etwa so aussehen wenn man auf die Seite Nav2 wechselt, damit die Besucher nicht immer wieder auf die Drop Down Leiste gehen müssen.
Nav1 Nav2 Nav3 Nav4 Nav5
nav2.1 nav2.2 nav2.3 nav2.4 nav2.5
Dabei ist die untere Navigationsleiste kein Drop Down Menü sondern einfach nur Text der bei überfahren hervorgehoben wird.
Wenn ich nun die Reihenfolge in HTML tauschen würde, würde das den kompletten Sinn verlieren.
Ist vielleicht 'ne blöde Idee, aber ich kenn das, dass dieses z-index irgendwie nicht wirklich funzt.
Hallo Rawir
Ich weiß es nicht wie ich dir direkt Schreiben kann daher probiere ich es auf diesem Wege.
Hab jetzt die Lösung rausgefunden.
Und Zwar...
Ich nahm an, dass wenn wenn man eine bestimmte Definition in CSS beschreibt die Reihenfolge der Eigenschaften total unwichtig wäre. z.B.
.navigation b.p2 {
background:#B0B0B0;
border:2px solid #0CF;
border-width:0 2px;
margin:0 3px;
z-index:100;
}
So ist das aber nicht.
Mein Fehler war, dass ich die Eigenschaft z-index:100; an das Ende der Beschreibung gesetzt habe. Diese Eigenschaft gehört aber an den Anfang der Beschreibung, weil die darauf folgende Beschreibungen die Eigenschaft z-index:100; automatisch übernehmen. So ist es also richtig.
.navigation b.p2 {
background:#B0B0B0;
border:2px solid #0CF;
border-width:0 2px;
margin:0 3px;
z-index:100;
}
Danke noch mal für die Unterstützung
Om nah hoo pez nyeetz, Spider!
Es ist nicht notwendig, identische Postings abzusetzen.
Matthias