CSS-Klasse vs. direkte style-Angabe beim Element

[Andreas Heyer]

Hallo Forum!

Ich habe mir ein kleines Menü gebastelt, wo nach dem klicken auf einen Eintrag die Untermenüeinträge angezeigt werden. Dies funktioniert auch recht gut.
Hier ein kleiner Ausschnitt:

...
<p id="6">
  <a href="..." onclick='nav_section("6_1")'>Ebene 1</a>
  <blockquote id="6_1" style="position: relative; display: none; white-space: nowrap">
    <a href="..">Untermenüeintrag 1</a>
    <br>
    <a href="...">Untermenüeintrag 2</a>
  </blockquote>
</p>
...

Mit dem folgenden Script wird nach anklicken des Links der Ebene 1 das Untermenü (blockquote) ein- oder ausgebelendet:

function nav_section(section)
{
 var navdoc=top.navigation.document;
 var sec=navdoc.getElementById(section);

if(sec.style.display != "none")
  sec.style.display="none";
 else
  sec.style.display="block";

return void(0);

}
(Nutzung in einem Frameset)

Und wie gesagt, das funktioniert auch ohne Probleme. Nun wollte ich aber die style-Eigenschaften des blockqoutes auslagern und habe dafür eine Klasse blockquote.sec geschaffen:

blockquote.sec
{position: relative; display: none; white-space: nowrap}

Die blockquotes erhalten nun statt style="" die Angabe class="sec".
Doch nun muss ich zweimal auf einen übergeordeneten Menüeintrag klicken, damit das Untermenü angezeigt wird! Danach wechselt der zustand bei jedem Klick wie erwartet. Mit der direkten Styleangabe beim blockquote erfolgt schon wie gewollt beim ersten Klick das Erscheinen des Untermenüs.

Kann mir jemand sagen, warum das so ist und wie ich mit der CSS-Klasse ebenfalls eine Reaktion beim ersten Klick erreiche?

MfG
Andreas Heyer

[Hans Thomas Vogler]

Hallo Forum!

Meinst Du mich?

Doch nun muss ich zweimal auf einen übergeordeneten Menüeintrag klicken, damit das Untermenü angezeigt wird! Danach wechselt der zustand bei jedem Klick wie erwartet. Mit der direkten Styleangabe beim blockquote erfolgt schon wie gewollt beim ersten Klick das Erscheinen des Untermenüs.

Kann mir jemand sagen, warum das so ist und wie ich mit der CSS-Klasse ebenfalls eine Reaktion beim ersten Klick erreiche?

Aus irgendwelchen Gründen geht das nicht, weil Javascript eine per separater Style-Definition zugewiesene Eigenschaft als "leer" erkennt. Beim ersten Anklicken trifft also die Bedingung "...style.display != 'none'" zu und setzt das Display auf 'none'. Nur scheinbar passiert also gar nichts. Beim zweiten Mal wird 'none' erkannt und entsprechend auf 'block' gesetzt, ab da funktioniert es dann richtig.

Du brauchst es also nur umzukehren und aus der negierenden Bedingung "Nicht 'none'" die affirmierende "Gleich 'block'" zu machen.:

[code on]
if(sec.style.display == "block")
  sec.style.display="none";
 else
  sec.style.display="block";
[code off]

MfG
Andreas Heyer

servus,
T.

[Andreas Heyer]

» Meinst Du mich?

Ja, hallo DU ;-)

» Aus irgendwelchen Gründen geht das nicht, weil Javascript eine per separater Style-Definition zugewiesene Eigenschaft als "leer" erkennt. Beim ersten Anklicken trifft also die Bedingung "...style.display != 'none'" zu und setzt das Display auf 'none'. Nur scheinbar passiert also gar nichts. Beim zweiten Mal wird 'none' erkannt und entsprechend auf 'block' gesetzt, ab da funktioniert es dann richtig.

Klingt irgendwie nach Bug, oder??? Ist aber auch beim Mozilla so. Warum wurde das noch nicht geändert, sind doch sont so fix.

MfG
Andreas

[molily]

Hallo Andreas,

<blockquote id="6_1"

Das blockquote-Element ist für Zitate gedacht, nicht für visuelle Einrückungen. Dies kannst du mit CSS erreichen (margin, padding). Für deine Verschachtelung wären ul- oder ol-Elemente passend (welche du nach Belieben mit CSS formatieren kannst, sodass sie so aussehen, wie du möchtest).

http://selfhtml.teamone.de/html/allgemein/stil.htm#zweckentfremden

Grüße,
Mathias

[Tim Tepaße]

Hallo Andreas, Hallo Mathias,

Für deine Verschachtelung wären ul- oder ol-Elemente passend (welche du nach
Belieben mit CSS formatieren kannst, sodass sie so aussehen, wie du
möchtest).

Diese "vorbildlichere Variante" von Navigationsmenüs ist leider noch
etwas unbekannt. Ich kann sie nur empfehlen, schon alleine, da (irgendwann)
in XHTML 2 Navigationslisten kommen werden:

<nl>
  <label>Menü</label>
  <li>eins</li>
  <li>zwei</li>
  <li>drei</li>
</nl>

Als intellektuelle Vorbereitung auf dieses Paradigma eignen sich normale
geordnete oder ungeordnete Liste (Oder gar Definitionslisten) hervorragen.
Und es ist eine nette Spielerei.

Da viele noch etwas vor dem Berg stehen, wie man so etwas genauer mit CSS
gestaltet hier noch ein Link auf einen der Klassiker zum Gestalten von
Navigationslisten:

http://www.alistapart.com/stories/taminglists/

• Tim

[Andreas Heyer]

Hallo Mathias, hallo Tim

Ich werde es mir überlegen ;-) War auch nur ein erster Designtest. Obwohl ich finde, dass gegen Blockqoutes nichts spricht (machen doch schöne Einrückungen), aber vielleicht sind Listen doch besser. Mal probieren, wie das auf den verschiedenen Browsern rüberkommt. Und wo wir schon bei Browsern sind: Ich habe schon eine Variante mit relativ positionierten divs, aber da gibt es teilweise Fehler beim Ein- oder Ausblenden. Und der hochgelobte Mozilla stellt die Version mit blockquotes anders dar als Konqueror und IE und produziert Fehler.

MfG
Andreas

[molily]

Hallo,

Obwohl ich finde, dass gegen Blockqoutes nichts spricht (machen doch schöne Einrückungen)

Dann vertrete diese Auffassung doch bitte auch konsequent und benutze q-, var- oder address-Elemente für schönen kursiven Text, code- oder kbd-Elemente für schöne diktengleiche Schrift, ins-Elemente für schöne unterstrichene Überschriften, fieldset-Elemente für schöne Rahmen et cetera.

Das ist absurd. Manche Clients werden deine Navigation wie ein Blockzitat ausgeben (»Zitat: [Navigation] Zitat Ende«).

Mathias

[Andreas Heyer]

Hallo Mathias,

Das ist absurd. Manche Clients werden deine Navigation wie ein Blockzitat ausgeben (»Zitat: [Navigation] Zitat Ende«).

Nicht gleich so giftig werden. Bis jetzt habe ich bei noch keinem Browser so ein Verhalten gesehen, daher war es mir auch nicht bewusst. Aber du hast Recht, und ich werde das Menü noch einmal umbauen (liste oder divs).

MfG
Andreas

[molily]

Andreas,

Nicht gleich so giftig werden.

Es war nicht giftig gemeint.

Mathias