Css-Problem mit line-heigt und Liste

Diskutiere mit über: Css-Problem mit line-heigt und Liste im Web Page Design Forum

  1. mec

    mec Thread Starter MacUser Mitglied

    Beiträge:
    384
    Zustimmungen:
    1
    Registriert seit:
    17.12.2003
    Hallo,

    ich habe folgendes Problem: ich habe eine Liste, für die ich die Zeilenhöhe mit line-height angegeben haben. Die einzelnen Listenpunkte sollen einen geringeren Abstand haben, wenn sie über mehrere Zeilen gehen. So sieht es mit line-heigt:2em aus:

    1. Hunde

    2. Katzen

    3. Kühe und

    Pferde

    4. Kaninchen


    Ich möchte es aber so:

    1. Hunde

    2. Katzen

    3. Kühe und
    Pferde

    4. Kaninchen

    Wenn ich für Punkt 3 eine andere line-heigt angeben, kommt immer folgendes raus (Punkt 4 klebt an Punkt 3):

    1. Hunde

    2. Katzen

    3. Kühe und
    Pferde
    4. Kaninchen

    Hab´s mit <span> probiert, aber war nichts...

    Hoffe, ihr versteht mein Problem und könnt mir weiterhelfen.

    Gruß
    mec
     
  2. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    Registriert seit:
    20.03.2005
    Könnte man das mal als Code sehen? So ist zwar klar was du willst, ohne deine Implementierung zu sehen ist aber der Fehler schwer auszumachen.

    Ins blaue getippt ist line-height der falsche Ansatz (zumal du das für einen optischen Abstand mißbrauchen willst), du solltest lieber mit paddings an den <li>s arbeiten.

    Matt
     
  3. mec

    mec Thread Starter MacUser Mitglied

    Beiträge:
    384
    Zustimmungen:
    1
    Registriert seit:
    17.12.2003
    Ok, hier also der Ausgangs-Code:
    Code:
    <div id="submenue">
      <ul>
          <li><a href="#">Hunde</a></li>
          <li><a href="#">Katzen</a></li>
          <li class="eng"><a href="#">K&uuml;he und Pferde </a></li>
          <li><a href="#">Kaninchen </a></li>
        </ul>
      </div>
    CSS:
    Code:
    #submenue {
    font:12px Verdana, Arial, Helvetica, sans-serif;
    width:155px;
    margin:0;
    padding-top:3px;
    height:100%;
    }
    
    #submenue a:link {
    text-decoration:none;
    color:#000000;
    }
    
    ul {
    list-style-type:none;
    margin:0;
    padding:15px 0 0 15px;
    }
    
    li {
    line-height:2em;
    }
    
    .eng {
    line-height:1em;
    }
    
     
  4. ostersau

    ostersau MacUser Mitglied

    Beiträge:
    780
    Zustimmungen:
    0
    Registriert seit:
    27.06.2005
    Ich stimme msslovi0 zu, ich würde statt mit "line-height" mit padding arbeiten.
    Lass die line-height z.B einheitlich auf 1em, und setzte für li ein padding-bottom ein. Dann solltest Du Dein gewünschtes Ergebnis erhalten.
     
  5. mec

    mec Thread Starter MacUser Mitglied

    Beiträge:
    384
    Zustimmungen:
    1
    Registriert seit:
    17.12.2003
    Tausend Dank,
    ich hab´s jetzt mit padding-bottom gemacht, Ergebnis wie gewünscht. Super, habt mir echt geholfen!!!
     
Die Seite wird geladen...
Ähnliche Themen - Css Problem line Forum Datum
CSS Problem mit Breiten von ul/li Web Page Design 07.10.2014
Roll-Over-Navigation Problem Web Page Design 05.08.2013
Problem mit Hintergrundbildern in ausgelagerter CSS-Datei Web Page Design 03.07.2011
CSS- Problem, auch ohne a:visited werden im Submenü Farben der links geändert Web Page Design 09.09.2010
CSS Problem, mehrere container nebeneinander... Web Page Design 23.03.2009

Diese Seite empfehlen

Benutzerdefinierte Suche