Navigation: DropDown funktioniert irgendwie nicht ...
Alexander fragt
Navigation: DropDown funktioniert irgendwie nicht ...
Alexander fragt
Matthias Apsel
Camping_RIDERIch bastle an einem neuen Layout und die Testseite ist noch nicht fertig, aber es hängt gerade nach vielen Tagen und immer neuen Versuchen am Navigationsmenü. Dieses war zuvor links und ist jetzt horizontal und "ausklappbar" angedacht.
Die Version mit "visibility" funktioniert besser, aber keinesfalls einsatzbereit. Und mit "font" und "z-index" hatte ich noch weniger Erfolg.
Über die TESTSEITE könnt Ihr den aktuellen Stand sehen:
1. Dropdown-Menüs verschwinden hinter "contentfield".
2. Maus-Navigation irgendwie fehlerhaft (Dropdown-Punkte nicht auswählbar).
Kurz zur Struktur die wichtigsten HTML- und CSS-Einstellungen:
index.2014.php
<div id="header">
</div>
<div id="navigation">
</div>
<div id="contentfield">
<div id="content">
</div>
<div id="right">
</div>
</div>
<div id="footer">
</div>
styles.2014.css
#contentfield {
position: relative;
width: 100%;
clear: both;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 152px;
height: 450px;
margin: 25px 0 0 0;
padding: 0;
}
nav,
nav ul,
nav ul li,
nav ul ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
nav ul {
padding: 0px 0px;
margin: 0px;
text-align: center;
}
nav ul li {
display: inline-block;
float: left;
position: relative;
list-style: none;
letter-spacing:0.05em;
text-transform: uppercase;
text-decoration: none;
text-align: center;
padding: 0px;
}
nav ul li a {
display: block;
color: rgb(0,0,0);
text-decoration: none;
width: 163px;
font-weight:none;
padding: 20px 0px;
}
nav ul li a:hover {
float: left;
background-color: #B9A254;
color: #FFFFFF;
text-decoration:none;
}
nav ul li:hover ul {
visibility: visible;
//font: inherit;
//z-index: auto;
}
nav ul li ul {
display: inline;
position: absolute;
padding: 0px;
top: 4em;
left: -0.1em;
visibility: hidden;
//font: 0/0 serif;
//z-index: -1;
}
nav ul li ul li {
float: none;
display: block;
}
nav ul li ul li a {
width: 163px;
padding: 5px 0px;
}
Es würde mich riesig freuen, wenn Ihr mir weiterhelfen könnt. Ich bin für jegliche Tipps dankbar und hoffe immer noch, dass es irgendwo einen Denkfehler gibt.
Ganz herzlichen Dank
Alexander
P.S. Die beiden Links der letzten Frage zur Navigation hatte ich übrigens in Vorbereitung auf die Programmierung schon gelesen und daraus auch den Code.
-
Om nah hoo pez nyeetz, Alexander fragt!
Du solltest als erstes deine Quelltexte in utf-8 konvertieren und auch so abspeichern.
Zweites solltes du auf HTML5 umsteigen.
Drittens war http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Menüs nicht ganz optimal, das hat sich inzwischen geändert.2 charset-Angaben in einem Dokument sind nicht notwendig, das Dokument kann nur in einer Kodierung verwendet werden.
Matthias
-
Om nah hoo pez nyeetz, Alexander fragt!
Hm, müsste ich das verstehen. ;)
Du solltest als erstes deine Quelltexte in utf-8 konvertieren und auch so abspeichern.
Wie oben geschrieben, geht es mir aktuell um das Menü. Den Zeichensatz habe ich bei den Inhalten noch nicht abgeändert. Erstmal muss mein Gerüst stehen.
Zweites solltes du auf HTML5 umsteigen.
Da die Basis der Website seit 1999 online ist, würde mich dazu interessieren: Wie gehe ich das am Besten an? Als HMTL5 im <head> definieren und ...?
Drittens war http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Menüs nicht ganz optimal, das hat sich inzwischen geändert.
Wo finde ich denn ein optimales Beispiel?
2 charset-Angaben in einem Dokument sind nicht notwendig, das Dokument kann nur in einer Kodierung verwendet werden.
Liegt an einer (noch) Zwischenlösung, da manche Seiten schon den neuen Zeichensatz haben.
Matthias
Vielen Dank - ebenso für die weitere Mühe!
-
Om nah hoo pez nyeetz, Alexander fragt!
Drittens war http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Menüs nicht ganz optimal, das hat sich inzwischen geändert.
Wo finde ich denn ein optimales Beispiel?Jetzt kannnst du dich beruhigt dort orientieren.
Matthias
-
Wo finde ich denn ein optimales Beispiel?
Jetzt kannnst du dich beruhigt dort orientieren.Danke, Matthias!
-
-
-
-
Aloha ;)
Die Version mit "visibility" funktioniert besser, aber keinesfalls einsatzbereit. Und mit "font" und "z-index" hatte ich noch weniger Erfolg.
[...]
nav ul li:hover ul {
visibility: visible;
//font: inherit;
//z-index: auto;
}
nav ul li ul {
display: inline;
position: absolute;
padding: 0px;
top: 4em;
left: -0.1em;visibility: hidden;
//font: 0/0 serif;
//z-index: -1;
}
[...]Ja, dass der z-Index so nicht funktioniert ist nicht verwunderlich :) z-Index ist zum "Übereinanderstapeln" von Elementen. Also eigentlich schon das was du suchst. Aber: Das was weiter oben liegt (also das sichtbare, das was näher am Betrachter liegt), hat den höheren z-Index. `z-index: auto;`{:.language-css} ist soviel wie `z-index: 0;`{:.language-css}, d.h. dein Inhalt und deine Navigation haben "denselben" z-Index, d.h. keins der beiden ist vorzugsweise sichtbar. Mit `z-index: -1;`{:.language-css} sorgst du sogar dafür, dass deine Navigation sogar noch hinter einem eventuellen background-image des body auftaucht... Die Einstellung die du suchst ist: `z-index: 1;`{:.language-css} oder fast besser (die Navigation soll ja immer vorne sein, selbst wenn es noch Elemente zwischen Textkörper und navi gibt): `z-index: 10;`{:.language-css} Ich nehm für Navigationen sogar gerne einen z-Index von 100... Wenn du das geändert hast, wirst du feststellen, dass die Navigation zwar sichtbar ist, aber immer noch nicht funktioniert (es tritt ein "Flackern" der Hover-Effekte beim drüberfahren auf). Das kann unterschiedliche Ursachen haben; vielleicht ist es ja eine der Folgenden, die mir spontan auf-/einfallen: 1\.: du solltest darüber nachdenken, statt `nav ul li a:hover { ... }`{:.language-css} das hier: `nav ul li:hover a { ... }`{:.language-css} verwenden. Damit stellst du sicher, dass der hover Effekt erscheint, solange das li-Element gehovert wird. Natürlich ist das im Prinzip das Gleiche (denn `a`{:.language-css} soll `li`{:.language-css} ja vollständig ausfüllen), aber du umgehst damit eine Fehlerquelle, die Flackern erzeugen kann: Und zwar wenn der Link aus irgendeinem Grund doch kleiner ist als das `li`{:.language-css} (z.B. padding/margin), dann wird trotzdem das `li`{:.language-css} gehovert selbst wenn du den a nicht sofort triffst... 2\.: mir fällt auf (wie du mit beliebigen Entwicklerwerkzeugen wie Firebug oder den Google-Chrome-Webdevtools prüfen kannst), dass deine li's beim hovern des darunterliegenden a massiv höher werden (etwa doppelt so hoch). Ich schätze, dass das der Hauptgrund für das Flackern ist. Versuche sicherzustellen, dass die height deiner li's hartcodiert ist, um so ein Springen zu vermeiden. Außerdem ist es sicher im Sinne des Erfinders, dass die Navigationseinträge alle denselben "Platz" einnehmen. 3\.: Das padding der a's: Ich hab das vorher (eventuell zu Unrecht?) schon als mögliche Fehlerquelle gescholten. Aber selbst wenn es das nicht ist: Vielleicht ist es sinnvoller, in diesem Anwendungsfall (ich schätze es geht nur darum, die Schrift "mittig" darzustellen), [vertical-align](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Textausrichtung/vertical-align) statt padding zu nutzen. (Anm.: Ich bin aktuell nicht 100% sicher ob das geht, müsste aber meiner Meinung nach... bin nur gerade zu faul zum testen :P) Ich hoffe das hilft dir weiter, für Nachfragen etc. stehe ich selbstverständlich zur Verfügung ;) Grüße, RIDER -- Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[-
Aloha ;)
Vielen Dank für die schnelle Rückmeldung!
Nach wiederum einigen Tests ... leider in keine Richtung erfolgreich ... :(z-index: 10;
Ich nehm für Navigationen sogar gerne einen z-Index von 100...Ich habe 100 eingesetzt und auch getestet, ob mir ein z-Index von 1 bei #contentfield etwas nützt, aber immer ist das Dropdown-Menü hinter dem div-Layer ...
1.: du solltest darüber nachdenken, statt
nav ul li a:hover { ... }
das hier:
nav ul li:hover a { ... }Ja, geändert.
2.: mir fällt auf (wie du mit beliebigen Entwicklerwerkzeugen wie Firebug oder den Google-Chrome-Webdevtools prüfen kannst), dass deine li's beim hovern des darunterliegenden a massiv höher werden (etwa doppelt so hoch). Ich schätze, dass das der Hauptgrund für das Flackern ist. Versuche sicherzustellen, dass die height deiner li's hartcodiert ist, um so ein Springen zu vermeiden. Außerdem ist es sicher im Sinne des Erfinders, dass die Navigationseinträge alle denselben "Platz" einnehmen.
Auch das geändert.
3.: Das padding der a's: Ich hab das vorher (eventuell zu Unrecht?) schon als mögliche Fehlerquelle gescholten. Aber selbst wenn es das nicht ist: Vielleicht ist es sinnvoller, in diesem Anwendungsfall (ich schätze es geht nur darum, die Schrift "mittig" darzustellen), vertical-align statt padding zu nutzen. (Anm.: Ich bin aktuell nicht 100% sicher ob das geht, müsste aber meiner Meinung nach... bin nur gerade zu faul zum testen :P)
Beides probiert.
Aktuell mit "vertical-align".Ich hoffe das hilft dir weiter, für Nachfragen etc. stehe ich selbstverständlich zur Verfügung ;)
Das nutze ich gerne. ;)
Ich bin echt ratlos. Wo liegt der Fehler?
Jetzt sieht alles noch chaotischer aus. "visibility" ist jetzt ganz rausgenommen.Bin gespannt, ob ich da noch eine Lösung finde ...
Vielen Dank!-
Vorhin noch geantwortet und schon habe ich einen nächsten Ansatz gefunden:
z-Index:
• ul > 1
• ul li:hover ul > 10
• ul li ul > -1Das hat das Menü endlich nach vorne gebracht.
Nun kämpfe ich "nur" noch damit, dass das Untermenü bereits komplett ausgewählt ist. Also wie bei "hover" markiert. Hast du dazu eventuell noch einen Tipp?
Vielen Dank
Alexander-
Nun kämpfe ich "nur" noch damit, dass das Untermenü bereits komplett ausgewählt ist. Also wie bei "hover" markiert. Hast du dazu eventuell noch einen Tipp?
Extrem verrückt:
Ich kann Hintergrund und Textfarbe des "ul ul"-Menüs nicht separat ändern. Ist das richtig? Es nimmt immer die Farben von "ul li:hover a" an?
Somit kann ich die Navigation nur deutlich machen, indem ich wiederum "ul ul li:hover a" ändere?Ich würde gerne das Dropdown-Menü anders gestalten als die "gewählten" Hauptkategorien.
Gibt es dafür noch einen Tipp?
Sonst vielen Dank, die Impulse haben mich genau richtig geleitet!
-
Aloha ;)
Extrem verrückt:
Ich kann Hintergrund und Textfarbe des "ul ul"-Menüs nicht separat ändern. Ist das richtig? Es nimmt immer die Farben von "ul li:hover a" an?
Somit kann ich die Navigation nur deutlich machen, indem ich wiederum "ul ul li:hover a" ändere?Ich würde gerne das Dropdown-Menü anders gestalten als die "gewählten" Hauptkategorien.
Um es wie die Ents zu sagen: Humm-Homm...
Wenn ich dich richtig verstehe liegt die Antwort eigentlich auf der Hand:
Die a
s füllen ihre lis komplett aus und diese wiederum füllen ihre uls komplett aus. Daher siehst du die "ul ul"s gar nicht, sondern immer nur eine Menge verschiedener as, deren Styles von "ul li:hover a" abhängt. Wenn du die "ul ul"s anderst stylen willst, bieten sich extra regeln für die "ul ul li:hover a" an, oder sogar (wenn die einzelnen ul ul anders aussehen sollen) für jedes i-te "ul ul" ein "ul:nth-child(i) ul li:hover a". Wenn die ul uls schon ungehovert unterscheidbar sein sollen, dann jeweils Regeln mit li statt li:hover...Hoffe, das klärt alles. Am liebsten würde ich dir ja mein aktuelles Projekt verlinken (da habe ich exakt das getan), dieses ist aber noch nicht komplett fertig, daher (wie von meinem Auftraggeber gewünscht) nicht öffentlich verfügbar. Ab dem 15.12. wahrscheinlich dann aber schon (unter http://www.eja-aalen.de - vorsicht: alles was da vor dem 15.12. ist hab ich nix mit am Hut :D).
Unter diesen Umständen vielleicht noch ein kleiner Tipp: Wenn du noch mehr Ebenen präzise stylen willst, lege ich dir mal allgemein die Verwendung des Kindselektor > nahe.
Grüße,
RIDER
P.S.: Ich empfehle dir auf jeden Fall obigen Weg. Wenn du aber unbedingt über die ul uls stylen willst gienge das auch. Du müsstest dann aber alle li und a auf background-color: transparent bzw. über rgba mit 255,255,255,0 einstellen... Sollte imho auch gehen, ich rate aber ab. Finde ich etwas unsauber ;)
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
-
-
-
-
