Michael Hoffmann: Menü formatieren

Hallo zusammen,

vorab habe ich alles relevante hier hochgeladen: <a href="http://www.webcrow.de">www.webcrow.de</a>

Mein Problem liegt in der Formatierung der Liste. Die Dateien unten drunter ist das dazugehörige CSS und JS.

Ich möchte gerne, dass die Oberpunkte, also z. B. "Über H - IT - S" genauso breit werden wie die Untermenus.

Habe schon in sämtlichen Klassen und IDs die Breite festgelegt, aber nichts tut sich.

Kann mich jemand auf die Spur bringen, warum es nicht gehen kann, oder wenn es geht, was und wo ich etwas bearbeiten muss!

Danke schon mal!

  1. Hi,

    Ich möchte gerne, dass die Oberpunkte, also z. B. "Über H - IT - S" genauso breit werden wie die Untermenus.

    Dann mußt Du sie display:block formatieren und - um sie nebeneinander zu setzen - floaten lassen.

    Übrigens interessant, was manche Leite für aufwendige Javascripts entwickeln für etwas, das mit CSS viel einfacher geht und lediglich für den IE ein paar Zeilen Javascript vonnöten sind, siehe http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm - hier hast Du auch gleiche Breiten.

    freundliche Grüße
    Ingo

    1. Hi Ingo und Michael,

      Übrigens interessant, was manche Leite für aufwendige Javascripts entwickeln für etwas, das mit CSS viel einfacher geht und lediglich für den IE ein paar Zeilen Javascript vonnöten sind, siehe http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm - hier hast Du auch gleiche Breiten.

      Es ist vor allem sehr sinnvoll, per JS einen link auf ein stylesheet reinzuschreiben - "for non-javascript browsers":

      // Load up the stylesheet for the menus. This code is here rather than in the html
      // document to allow for non-javascript browsers to render a seperately styled non-
      // interactive list rather than the DHTML menu
      document.write("<link rel='stylesheet' href='cssmenu.css' type='text/css' />");

      Wenn man die Seite ohne JS öffnet, sieht man nämlich nur die <ul>s.

      Und ich würde die "dritte Dimension" des Menüs farblich hervorheben - das sieht nicht wirklich gut aus, wenn das Zweite die gleiche Farbe hat wie das Dritte.

      Gruß, Marian

      1. Hi,

        ist deine Anmerkung mit dem Script ironisch gemeint?

        Meine Meinung ist, wenn JS deaktiviert ist, haben diese Benutzer immer noch die Möglichkeit über die Liste zu navigieren.

        Das sieht zwar nicht schön aus, aber die Seite ist noch benutzbar!

        Was die Farbe angeht, wird mir das Menü dann langsam zu bunt aber ich werde es auf jeden Fall testen! Danke für den Tipp!

        Aber im Moment habe ich das Problem, dass das Menü zwar so aussieht wie ich wollte, aber dafür funktioniert es im IE nicht mehr!

        MfG

        Michael

        1. Hi Michael Hoffmann,

          ist deine Anmerkung mit dem Script ironisch gemeint?

          Ja!

          Meine Meinung ist, wenn JS deaktiviert ist, haben diese Benutzer immer noch die Möglichkeit über die Liste zu navigieren.

          Aber wenn du einfach statt (in die JS-Datei):
          document.write("<link rel='stylesheet' href='cssmenu.css' type='text/css' />");
          (in die Haupt-HTML-Datei) schreibst:
          <link rel="stylesheet" href="cssmenu.css" type="text/css" />
          ?

          Das sieht zwar nicht schön aus, aber die Seite ist noch benutzbar!

          Ja. Aber mit o.g. Methode ist sie beides - auch für ohne JS!

          Was die Farbe angeht, wird mir das Menü dann langsam zu bunt aber ich werde es auf jeden Fall testen! Danke für den Tipp!

          Bitte!

          Aber im Moment habe ich das Problem, dass das Menü zwar so aussieht wie ich wollte, aber dafür funktioniert es im IE nicht mehr!

          Ja, weil er kein CSS versteht (jedenfalls nicht richtig).

          Lies mal bitte http://de.selfhtml.org/css/layouts/navigationsleisten.htm und mach es so wie es da steht - dann brauchst du (fast *) kein JavaScript.

          ____________
          * Nur ein paar Zeilen für den IE

          Gruß, Marian

      2. Hi,

        Es ist vor allem sehr sinnvoll, per JS einen link auf ein stylesheet reinzuschreiben - "for non-javascript browsers":

        wieso?
        Du hast die Anmerkung gelesen?
        "... und Sie sollten auf die beim nach oben obigen Beispiel angesprochene alternative Verlinkung nicht verzichten."
        und dort dann:
        "Sofern Sie die Menüpunkte der ersten Ebene mit Übersichtsseiten für ältere Browser verlinken und damit auch einer Tastatursteuerung zugänglich machen, ist eine solche dynamische Navigationsleiste auch praktisch einsetzbar."

        Warum sollte hier über Javascript ein spezielles CSS geladen werden, daß zumindest für moderne Browser auch völlig unnötig wäre? Und selbst wenn für den IE die Unternavigation auch ohne Javascript sichtbar sein soll, reicht der Child-Selektor zum Ausblenden aus.

        freundliche Grüße
        Ingo

    2. Hi,

      erstmal ganz herzlichen Dank!

      Das hat mich ein ganzes Stück weiter gebracht!

      Im Firefox ist jetzt auch alles so wie ich es haben wollte! Aber im IE kann ich die Untermenüs nicht mehr auswählen und alle erscheinen unter dem 1. Oberpunkt!

      Wäre klasse, wenn du dir das noch einmal anschauen könntest!

      MfG

      Michael