---
title: "Listenmenu mit CSS - Zeilenabstand"
url: "https://www.typo3.net/d/37086-listenmenu-mit-css-zeilenabstand"
source: "typo3.net"
tags: ["Frontend","Styling","Frage","HTML & CSS"]
created: "2006-01-31"
last_reply: "2006-02-02"
replies: 6
solved: false
page: 1
pages: 1
lang: "de"
---

# Listenmenu mit CSS - Zeilenabstand

Frontend › Styling · 6 Antworten · gestartet 2006-01-31

## Eröffnungsbeitrag

**Andrea_Herzog** · 2006-01-31 · [Beitrag #1](https://www.typo3.net/d/37086-listenmenu-mit-css-zeilenabstand/1)

Hallo,
ich habe ein CSS - Menu mit li und ul erstellt.

Wozu ich scheinbar nicht in der Lage bin, ist einen bestimmten Abstand zwischen den Menupunkten hinzukriegen.

Wie definiert man den Zeilenabstand in einer Liste?

Krieg ich einfach nicht hin.

Lasst Milde walten, schimpft und lacht nicht - aber helft miiiir.

Danke,
Andrea

## Antworten

### [#2](https://www.typo3.net/d/37086-listenmenu-mit-css-zeilenabstand/2) · ttb · 2006-02-01

Beispielsweise so:

ul { padding: 10px; }

Siehe auch <http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding>

### [#3](https://www.typo3.net/d/37086-listenmenu-mit-css-zeilenabstand/3) · Andrea_Herzog · 2006-02-01

Hallo ttb,

danke für die Antwort.
Habe ich schon gesetzt. Das ergibt bei mir aber nur den Abstand des Untermenus zum darüberleigenden Element.

Also:

Test1

Test 1.2

Test2
Test3
Test4

Ich möchte aber den Abstand zwischen den Hauptmenupunkten ändern.

Weisst du Rat?

Gruß
Andrea

### [#4](https://www.typo3.net/d/37086-listenmenu-mit-css-zeilenabstand/4) · ehontheim · 2006-02-01

Hallole!

Wenn Du es mit TS "vorbereitet" hast, hast du doch möglicherweise für jede Ebene eine eigene id= oder class= vergeben. Z. B.

.
.
.
menulinks.1 {
### Normal
NO.stdWrap.htmlSpecialChars = 1
NO.allWrap = <li id="normal_l1"> | </li>
.
.
.
menulinks.2 {
### Normal
NO.stdWrap.htmlSpecialChars = 1
NO.allWrap = <li id="normal_l2"> | </li>

Dann kannst Du doch auch die id der jeweiligen Stufe gezielt ansprechen und die padding Angabe abhängig von der Stufe vergeben.
Wenn Du möchtest, könnte ich Dir ein Beispiel (TS, html, css) schicken.

Gruß

Erwin

### [#5](https://www.typo3.net/d/37086-listenmenu-mit-css-zeilenabstand/5) · Andrea_Herzog · 2006-02-01

Hallo ehontheim,

für ein Beispiel wäre ich dir extrem dankbar.

Viele Grüße
Andrea

### [#6](https://www.typo3.net/d/37086-listenmenu-mit-css-zeilenabstand/6) · ehontheim · 2006-02-01

Dann gib mir mal Deine Email-Adresse (über pm)

### [#7](https://www.typo3.net/d/37086-listenmenu-mit-css-zeilenabstand/7) · Andrea_Herzog · 2006-02-02

Hallo zusammen,
nach der tollen Unterstützung von Erwin geht jetzt alles. Ich habe allerdings nur den Firefox und den IE getestet.

Es gibt zwei Menus:

Eine horizontale "Kurznavi", deren Punkte nicht in der seitlichen Navigation auftauchen sollen und eine
seitliche Navigation mit einer Unterebene. Rollover- und Active Effekt (Schriftfarbe und Bildchen mit Punkt (Punkt bei Active andere Farbe)
Für alle, die es brauchen können:

Erstellt habe ich ein Menu mit unsortierter Liste.

Hier die Setup Einträge für das Menu:

```typoscript
marks.MENU = HMENU
    #excludeUIDList soll Seiten aus dem Menu entfernen
    #Evtl. problematisch, weil das Menu2 vielleicht nicht barrierefrei ist ?.
    marks.MENU.excludeUidList = 624, 625, 626, 627, 774, 775
    marks.MENU.entryLevel = 0
    marks.MENU {
                  
         1 = TMENU
         1 {
            wrap = <ul> | </ul> 
            entryLevel = 0
            noBlur = 1
            NO {
               allWrap = <li id="menu_main"> | </li>
               WrapItemAndSub = <li> | </li>
               after = <br />
               ATagParams = class = "menu_main"
               beforeImg = fileadmin/xxx/images/pix-punkt-t.gif
               beforeROImg = fileadmin/xxx/images/pix-t.gif
               RO = 1
               }
            ACT < .NO
            ACT.ATagParams = class = "menu_mainact"
            ACT = 1   
            ACT.beforeImg = fileadmin/xxx/images/pix-t-act.gif

         }
        
         2 = TMENU
         2 {
            wrap = <ul class="menu_sub"> | </ul> 
            #entryLevel = 1
            noBlur = 1
            NO {
               ATagParams = class = "menu_sub"
               beforeImg = fileadmin/xxx/images/pix-punkt-t.gif
               beforeROImg = fileadmin/xxx/images/pix-t.gif
               RO = 1
                             }
            ACT < .NO
            ACT.ATagParams = class="menu_subact"
            ACT = 1   
            ACT.beforeImg = fileadmin/xxx/images/pix-t-act.gif

         }

    } 
 marks.MENU2 = HMENU
    marks.MENU2.entryLevel = 0
    marks.MENU2.special = list
    marks.MENU2.special.value = 623, 624, 625, 627, 774, 775, 90
    marks.MENU2 {
         1 = TMENU
         1 {
            wrap = <ul> | </ul> 
            NO {
               WrapItemAndSub = <li> | </li>
               after =  | 
               ATagParams = class="menu_2"
               StdWrap.case = lower
                }
            ACT < .NO
            ACT.ATagParams = class="menuact"
            ACT = 1   
              }
    }         
       
}
```

Hier der Ausschnitt aus dem CSS.

```html
/* Positionierung des Menus, seitliche Navigation*/

.menu {
    display: block;
    background-color: #FFFFFF;
    position: absolute;
    top: 180px;
    left: 35px;
    width:auto;
}


/*Klasse für die seitliche Navigation, 1. Ebene*/

.menu_main{
     color: #555656;
     text-decoration:none;
     font-size: 12px; 
     font-family: Arial, Verdana, Tahoma;
     font-color: #00B9F3;
}

/*Klasse für die seitliche Navigation, 1. Ebene, Aktiv*/

.menu_mainact {
     color: #555656;
     text-decoration:none;
     font-size: 12px; 
     font-family: Arial, Verdana, Tahoma;
     font-color: #00B9F3;
}

/*Klasse für die seitliche Navigation, 1. Unter-Ebene*/

.menu_sub {
     color: #555656;
     text-decoration:none;
     font-size: 12px; 
     font-family: Arial, Verdana, Tahoma;
     font-color: #00B9F3;
}

/*Klasse für die seitliche Navigation, 1. Unter-Ebene, Aktiv*/

.menu_subact {
     list-style-position: outside;*/
     color: #555656;
     text-decoration:none;
     font-size: 12px; 
     font-family: Arial, Verdana, Tahoma;
     font-color: #00B9F3;
       
}
                   
/*<!-- Menu2 / spezielle Linkfarbe für die oberere horizontale Navi-->*/ 

.menu2 a:hover {
     color: #FFFFFF; 
}

.menu2act a:active {
     color: #00B9F3; 
}                  
      
/*<!-- Hauptbereich -->*/

/*Positionierung Oberes Menü, Links ohne Untermenu*/    

.menu2 {
    float:left;
    position: relative;
    top: 95px;
    padding:0px;
    padding-left: 50px;
    width:auto;
}                   

/* 1. Abstand oben 2. Abstand rechts 3. Abstand unten 4. Wert sorgt für die Einrückung - IE und FFOX (Abstand links)*/
ul {
    margin: 0px;
    padding: 5px 5px 5px 10px;
}

li {
    margin: 0px;
    padding: 5px 5px 5px 0px;
    list-style-type: none;
}

#MENU li; #rootline li {
    margin: 0px;
    padding: 10px;
}

MENU a:link, #MENU a:visited {
    text-decoration: underline;
    color: #FFFFFF;
}
```

Bis dann,
Andrea

---

Quelle: „Listenmenu mit CSS - Zeilenabstand“, typo3.net, https://www.typo3.net/d/37086-listenmenu-mit-css-zeilenabstand
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.