Tutorial für Suckerfish Menü / Dynamische Navigation

[Thorsten S.]

Hallo!

Ich suche ein leicht verständliches Tutorial für Suckerfish Menüs. Es sollen sechs Listenelemente horizontal angeordnet werden. Beim Überfahren eines der Listenelemente soll vertikal eine Liste mit sieben Elementen aufklappen (HTML-Code folgt unten). Ich habe hier Bücher wie "HTML von Kopf bis Fuß" und eine entsprechende Einführung von Jendryschik - beide machen Schluss, bevor sowas behandelt wird. Die selfhtml-Seite zu Navigation mit css ist für mich zu knapp gehalten, zuviel Code, zuwenig Erläuterungen. Und ein ausführliches, einfaches Tutorial habe ich bisher nicht gefunden. Hat vielleicht jemand einen Link?

Gruß,
Thorsten

<ul id="navigation">
     <li><a href="aktuell.php">aktuell</a></li>
     <li><span>band</span></li>
         <ul>
         <li><a href="katrin.php">Katrin</a></li>
         <li><a href="kery.php">Kery</a></li>
         <li><a href="kirsten.php">Kirsten</a></li>
         <li><a href="michael.php">Michael</a></li>
         <li><a href="oliver.php">Oliver</a></li>
         <li><a href="thomas.php">Thomas</a></li>
         <li><a href="thorsten.php">Thorsten</a></li>
         </ul>
     <li><a href="hoerproben.php">hörproben</a></li>
     <li><a href="bilder.php">bilder</a></li>
     <li><a href="kontakt.php">kontakt</a></li>
     <li><a href="links.php">links</a></li>
</ul>

[Felix Riesterer]

Lieber Thorsten S.,

Die selfhtml-Seite zu Navigation mit css ist für mich zu knapp gehalten,

da wollte ich Dich gerade hinschicken. Was daran ist Dir "zu knapp" (Du meinst wohl "unverständlich")? Frage, und man kann versuchen Deinem Verständnis auf die Sprünge zu helfen!

zuviel Code, zuwenig Erläuterungen.

Der Code ist doch in weiten Teilen die Erläuterung! Wenn Du die Grundlagen hast (die setzt das Kapitel natürlich voraus!), dann ist der Code die präzisestmögliche Erläuterung überhaupt! Und ergänzend dazu stehen unter jedem Beispiel umfangreiche Erläuterungen (hast Du das "beachten Sie" übersehen?)... reicht das nicht?

Und ein ausführliches, einfaches Tutorial habe ich bisher nicht gefunden.

Ausführlich? Eben war Dir noch zuviel Code im Kapitel... und wie "einfach" hättest Du's denn gerne? Mir scheint, Du willst Dich wohl um die Grundlagen drücken?

Hat vielleicht jemand einen Link?

Keinen besseren als das fragliche Kapitel.

Fang an die Grundlagen zu erarbeiten, bei Fragen kommst Du wieder. Wenn Du dann genügend CSS begriffen hast, dann kannst Du Dir obiges Kapitel erneut zur Brust nehmen. Sollten sich da dann auch Fragen auftun, fragst Du hier erneut nach. Helfen tun wir gerne, aber jemanden zum Jagen tragen müssen, begreifen die meisten hier nicht als Helfen.

Liebe Grüße,

Felix Riesterer.

[Thorsten S.]

Hmm. Für mich ist Code Code und Erklärung Erklärung. Wenn ich Notensatz mache, kann ich mir nur die Werke von J. S. Bach ansehen, oder das zumindest durch einen Blick in die Literatur ergänzen.

Hier habe ich ein entsprechendes Tutorial gefunden: http://www.alistapart.com/articles/dropdowns/

50% des Codes, dafür 50% mehr Erklärungen. Das Tutorial ist von 2003, ob es zeitgemäß ist, weiß ich nicht. Aber ich werde es erstmal damit versuchen, denn hier hier ist der z. B. der Code auf das wesentliche reduziert worden. Bei selfhtml werden gleich zahlreiche Hacks für den IE 5 und 6 eingebaut, hier geschieht das erst hinterher. Sowas wie "aktuelle Rubrik kennzeichnen"
und "aktuelle Unterseite kennzeichnen" wird hier komplett weggelassen. Bei selfhtml erschwert mir beides die Übersicht. Jetzt kann man sagen "Lass'  es doch weg", aber dieser Schritt wäre eine weitere mögliche Fehlerquelle ...

Gruß,
Thorsten

[Kai345]

[latex]Mae  govannen![/latex]

<ul id="navigation">

[...]

<li><span>band</span></li>
         <ul>

[...]

</ul>
     <li><a href="hoerproben.php">hörproben</a></li>

[...]

</ul>

Diese Anordnung der Elemente ist nicht gestattet. ul darf kein direkter Nachfahre von ul sein.

Stur lächeln und winken, Männer!
Kai

[Thorsten S.]

Erklär'  mir bitte genauer, worauf Du Dich beziehst. Ich habe ein <ul>-Tag, darin ein <li>-Tag. Und in letzterem ist wieder ein <ul>-Tag. Das müsste doch OK sein?

[Matthias Apsel]

Om nah hoo pez nyeetz, Thorsten S.!

Erklär'  mir bitte genauer, worauf Du Dich beziehst. Ich habe ein <ul>-Tag, darin ein <li>-Tag. Und in letzterem ist wieder ein <ul>-Tag.

Nein, hast du nicht.

Schau genau!

<ul id="navigation">      <li><a href="aktuell.php">aktuell</a></li>      <li><span>band</span></li>          <ul>          <li><a href="katrin.php">Katrin</a></li>

Du beginnst mit dem Tag <ul id="navigation"> ein ul-Element, dieses darf nur li-Elemente enthalten. Ein li-Element hingegen darf auch ul-Elemente enthalten.

<tag>Elementinhalt</tag>

Matthias

[Thorsten S.]

Ahhh danke!

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

<tag>Elementinhalt</tag>

noch mal anschaulich, weil es so eigentlich auch nicht korrekt ist.

Matthias

[Thorsten S.]

Sooo ... ich bin dank der Hinweise von Kai und Matthias und dem Tutorial (http://www.alistapart.com/articles/dropdowns/) eine ganze Ecke weiter. Ziel ist jetzt erstmal, das ganze im Firefox zum Laufen zu kriegen. Mögliche Probleme mit dem IE kommen später dran.

Es gibt im Firefox aber noch zwei ganz konkrete Probleme:

• Ich möchte eine vertikale Liste unter dem Listenelement "band" platzieren. Wenn ich die Maus über "band" bewege, erscheint die vertikale Liste aber unter dem Listenelement "hoerproben" - und ich kriege nicht raus, warum das so ist und wie ich es ändern kann.

• Ich musste in beiden Listen separat "list-style-type: none" setzen. Müsste sich das nicht vom ersten <ul>-Tag auf seine <li>-Tags und von dort auf das zweite <ul>-Tag vererben?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title>Dynamische Navigation</title>

<style type="text/css">

ul#navigation {
            list-style-type: none;
}

li {
            padding: 0px 10px 0px 10px;
            float: left;
            position: relative;
}

li ul {
            display: none;
            position: absolute;
            list-style-type: none;
}

li ul li {
            width: 4em;
}

li > ul {
            top: auto;
            left: auto;
}

li:hover ul {
            display: block;
}

</style>
</head>

<body>

<ul id="navigation">
     <li><a href="aktuell.php">aktuell</a></li>

<li>band
         <ul>
         <li><a href="katrin.php">Katrin</a></li>
         <li><a href="kery.php">Kery</a></li>
         <li><a href="kirsten.php">Kirsten</a></li>
         <li><a href="michael.php">Michael</a></li>
         <li><a href="oliver.php">Oliver</a></li>
         <li><a href="thomas.php">Thomas</a></li>
         <li><a href="thorsten.php">Thorsten</a></li>
         </ul>
     </li>

<li><a href="hoerproben.php">hörproben</a></li>
     <li><a href="bilder.php">bilder</a></li>
     <li><a href="kontakt.php">kontakt</a></li>
     <li><a href="links.php">links</a></li>
</ul>

</body>
</html>

[Matthias Apsel]

Om nah hoo pez nyeetz, Thorsten S.!

• Ich möchte eine vertikale Liste unter dem Listenelement "band" platzieren. Wenn ich die Maus über "band" bewege, erscheint die vertikale Liste aber unter dem Listenelement "hoerproben" - und ich kriege nicht raus, warum das so ist und wie ich es ändern kann.

vergib einen entsprechenden Wert für left.

Möglicherweise interessant: position richtig verwenden, css-sprite

• Ich musste in beiden Listen separat "list-style-type: none" setzen. Müsste sich das nicht vom ersten <ul>-Tag auf seine <li>-Tags und von dort auf das zweite <ul>-Tag vererben?

Laut Spezifikation sollte es so sein. Es ist jedoch so, dass im Browserstylesheet Angaben zu untergeordneten Listen gemacht sind.

Matthias

[Thorsten S.]

vergib einen entsprechenden Wert für left.

Kannst Du mir sagen, welcher Wert wohin muss?

Die horizontalen Listenelemente haben ein position: relative. Wenn ich in eins dieser Elemente eine vertikale Liste einbette, müssten die linken Ränder doch zusammenfallen, oder?
Ich habe auch schon versucht, der vertikalen Liste ein left: 0px zu geben. Das hat nichts bewirkt. Auch andere Werte bewirken nichts. Im Selektor li:hover ul dagegen bewirkt z. B. left: -3em eine Verschiebung nach links, wie ich sie haben möchte. Aber das ist doch bestimmt nicht das, was Du meinst.

[Matthias Apsel]

Om nah hoo pez nyeetz, Thorsten S.!

Die horizontalen Listenelemente haben ein position: relative.

Aus welchem Grund haben sie position: relative? Lies meinen Artikel.

Wenn ich in eins dieser Elemente eine vertikale Liste einbette, müssten die linken Ränder doch zusammenfallen, oder?

Wo käme denn ohne deine Einflussnahme das Element hin? Verdeutliche dir das, indem du den li einen Hintergrund oder Rahmen gibst.

Ich habe auch schon versucht, der vertikalen Liste ein left: 0px zu geben.

Die absolut positioniert ist. Was bedeutet dann die Angabe left: 0? Lies meinen Artikel

bei li:hover ul dagegen bewirkt z. B. left: -3em eine Verschiebung nach links, wie ich sie haben möchte.

Warum ist das so? Was bedeutet diese Angabe

Aber das ist doch bestimmt nicht das, was Du meinst.

Doch.

Du kannst dir übrigens display: none / display: block sparen, wenn du nur mit left hantierst. Wie?

Matthias

[Thorsten S.]

OK ... Ich hatte mir einen Deiner Texte, den zur Positionierung, bereits angesehen. Ich hatte auch gedacht, dass ich das soweit verstehen. Da ich aber nicht zum gewünschten Ergebnis komme, muss es bei mir einen Denkfehler, ein Missverständnis, eine Unwissenheit geben. Ich weiß aber nicht, wo. Deshalb hier mal einige Gedanken von mir, vielleicht kann mir ja jemand zeigen, was daran nicht stimmt:

Die horizontalen Listenelemente haben ein position: relative, damit die mit position: absolute positionierte, vertikale Liste an dem horizontalen Listenelement ausgerichtet wird, in das sie eingebettet ist.

Das klappt auch wunderbar. Wenn ich der eingebetteten Liste ein background-color gebe, sehe ich, dass der linke Rand der vertikalen Liste mit dem linken Rand des horizontalen Listenelements zusammenfällt.

Was ich nicht verstehe ist, warum der linke Rand der Liste nicht mit dem Text der vertikalen Listenelemente zusammenfällt. Woher kommt dieser 40px große Innenabstand?

Absolute Positionierung bedeutet, dass man Elemente relativ zu ihren Elternelementen positioniert. Wenn ich der absolut positionierten Liste ein left: 10px, top: 10px; gebe, dann müsste diese Liste 10px rechts von und 10px unterhalb der linken oberen Ecke des Elternelements beginnen.

Das klappt jedoch nicht. left: ... und top: ..., die ich der vertikalen Liste gebe, werden nicht umgesetzt. Ein left: -40px; funktioniert zwar beim Selektor li:hover ul, nicht aber beim Selektor li ul. Aber siehe oben: Mein eigentliches Problem besteht darin, dass ich nicht verstehe, warum ich überhaupt die -40px vergeben muss ...

[Matthias Apsel]

Om nah hoo pez nyeetz, Thorsten S.!

Was ich nicht verstehe ist, warum der linke Rand der Liste nicht mit dem Text der vertikalen Listenelemente zusammenfällt. Woher kommt dieser 40px große Innenabstand?

Dies ist wieder eine Festlegung des Browserstylesheets. Die Browser machen es übrigens unterschiedlich, die einen mit padding, die anderen mit margin. Du kannst die Liste normalisieren.

Ein left: -40px; funktioniert zwar beim Selektor li:hover ul, nicht aber beim Selektor li ul.

Warum das so ist, kann man jetzt ohne Quelltext nicht sagen, möglicherweise liegt es an der Spezifität der Selektoren.

Matthias