nullpunkt: Menü mit display: block wird auseinandergezogen

SELF-Forum

Menü mit display: block wird auseinandergezogen

nullpunkt
– Informationen zu den Bewertungsregeln

Hallo Forum!

Dies ist mein erster Eintrag im Forum. Ich beschäftige mich erst sehr kurze Zeit mit HTML und CSS, daher hoffe ich, dass meine Frage nicht zu blöde ist ;-)

Ich versuche mittels CSS ein Menü zu erzeugen. Hierzu nutze ich eine ungeordnete Liste. In den Formatierungen nutze ich "display: block", wodurch meine gesamten Aufzählungen "auseinandergerissen" werden.

Meine Frage ist: Wie unterbinde ich dies? Wie schaffe ich es, dass die einzelnen <li>-Punkte wieder enger beieinander liegen?

Vielen Dank für Eure Hilfe!

Torben

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Menü mit display: block wird auseinandergezogen

    Bobby
    – Informationen zu den Bewertungsregeln

    Moin

    Ich versuche mittels CSS ein Menü zu erzeugen. Hierzu nutze ich eine ungeordnete Liste. In den Formatierungen nutze ich "display: block", wodurch meine gesamten Aufzählungen "auseinandergerissen" werden.

    Was meinst du mit auseinandergerissen??

    Was hast du bereits versucht?

    So ohne Codeschnipsel oder genauer Fehlerbeschreibung können wir auch nur in den "Kristallkugel-Ratemodus" übergehen.

    Lies dir bitte die Tipps für Fragende durch.

    Gruß Bobby

    --
    -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
    -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
    ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Menü mit display: block wird auseinandergezogen

      nullpunkt
      – Informationen zu den Bewertungsregeln

      Okay, recht habt ihr natürlich :-)

      Also, im <style>-Bereich habe ich folgendes definiert:

      ul#menue {
        width: 400px;
        margin: 0px;
        padding: 0px;
      }

      ul#menu li {
        list-style: none;
        margin: 0px;
        padding: 0px;
      }

      ul#menue a {
        display: block;
        background-color: #000000;
        margin: 0px;
        padding: 0px;
      }

      ul#menue a:link { color: #000066; text-decoration: none; }
      ul#menue a:hover { color: #000066; text-decoration: underline; }

      ---------

      Ich möchte folgendes erreichen:

      Eine ungeordnete Liste enthält mehrere Aufzählungen, die jeweils einen Link enthalten. Die jeweiligen Link-Texte sind unterschiedlich lang farblich hinterlegt.
      Ohne "diplay: block" sieht es so aus, dass die farbliche Hinterlegung am Ende des Textes endet, was durch die unterschiedlich langen Zeichenfolgen unschön aussieht (quasi ein "Flattersatz").
      Nutze ich "display: block", werden die farblichen Hinterlegungen allesamt nach rechts auf einen von mir vorgegebenen Wert (width: 400px) gestreckt, was ich genau so haben möchte. Was allerdings auch passiert:
      Die einzelnen <li>-Bereiche werden plötzlich wie durch einen <p>-Tag "auseinandergerissen". Das heißt, dass zwischen den Zeilen der freie Raum erhöht wird. Das hat zur Folge, dass die einzelnen farblich hinterlegten Zeilen nicht mehr direkt aneinander liegen, sondern einen größeren Abstand voneinander haben, den ich wieder unterbinden möchte.

      Ich hoffe, es ist etwas klarer geworden.

      Vielen Dank schonmal für Eure Mühe,
      Torben

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Menü mit display: block wird auseinandergezogen

        Bobby
        – Informationen zu den Bewertungsregeln

        Moin

        ul#menu li {
          list-style: none;
          margin: 0px;
          padding: 0px;
        }

        3 Sachen die mir aufgefallen sind, und dein Problem lösen:

        1. Gib in deiner Fehlerbeschreibung das nächste mal bitte an, das dein Problem nur im IE auftaucht!

        2.

        ul#menu li {

        es muss "ul#menue li {" heißen. Du hast das "e" am Ende bei menue vergessen

        3. Liegt dein Problem am falsch gesetzten Doctype. Bei folgenden beiden Doctypes (getestet) tritt dein Problem nicht auf:

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

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        Bitte mache dich mit der Grundstruktur einer HTML-Seite vertraut und lies dir die Bedeutung des Doctypes durch. Eine gute Quelle ist auch wenn nicht ganz aktuell z.B.: http://www.css4you.de/wsdoctypeswitch/dtsw01.html

        Gruß Bobby

        --
        -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
        -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
        ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Menü mit display: block wird auseinandergezogen

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Ich versuche mittels CSS ein Menü zu erzeugen. Hierzu nutze ich eine ungeordnete Liste. In den Formatierungen nutze ich "display: block", wodurch meine gesamten Aufzählungen "auseinandergerissen" werden.

    Meine Frage ist: Wie unterbinde ich dies?

    Bevor du irgendwas unterbindest, beschreibst du bitte dieses "irgendwas" erst mal so, dass nachvollziehbar wird, wovon du eigentlich redest - ich kann mir unter deinem "auseinandergerissen" wenig vorstellen.

    Wie schaffe ich es, dass die einzelnen <li>-Punkte wieder enger beieinander liegen?

    Fuer Abstaende sind margin/padding zustaendig, falls du "irgendwie" das meinen solltest.

    MfG ChrisB

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln