# Problem mit Listen im Footer



## Rallenaldo (25. Okt 2014)

Hi. Ich habe ein Problem mit meinem Footer.

Ich will in den Footer meiner Seite 4 Listen einpflegen. Diese Listen bestehen nur aus Links aufs Impressum, Registrieren auf der HP usw.

Im Template deklariere ich den Footer so:


```
<div class="footer">
                   <ul>
                    <li><h:link value="Registrieren" outcome="register"></h:link></li>
                    <li><h:link value="Tarif"></h:link></li>
                    <li><h:link value="FAQ" outcome="faq"></h:link></li>
                    <li><h:link value="Firmen A-Z"></h:link></li>
                </ul>
</div>
```

Innerhalb der CSS-Datei habe ich folgende Einstellungen vorgenommen:


```
div.footer {
    background:#2f2f2f;
}
div.footer ul {
    list-style:none;
    
}

div.footer ul li {
    display:block;
    text-decoration: none;
}

div.footer ul li a, 

div.footer ul li a:visited {
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-decoration: none;
}

div.footer ul li a:hover{
    text-decoration: underline;
}
```

Jetzt werden die Listen allerdings alle untereinander aufgelistet. Ich hätte allerdings gerne, dass die Listen gleichmäßig nebeneinander sind.

Wenn ich in div.footer ul "float: left; & width: 25%;" einfüge, verschwindet die in div.footer festgelegt Hintergrundfarbe und die 4. Liste befindet sich unter der 3. Liste.

Kann mir hier jemand Hilfestellung geben?


----------



## stg (27. Okt 2014)

Was sagtst du hierzu?

Edit fiddle - JSFiddle

Die wesentliche Änderung besteht in der Verwendung von _display: inline-block;_ innerhalb von _div.footer ul li_


----------



## Rallenaldo (8. Nov 2014)

Hi.

Sorry für die späte Antwort. Mit deinem Code sind die Listen zumindest schoneinmal untereinander. Allerdings habe diese einen relativ weiten Abstand zwischen den einzelnen Listenpunkten UND die Auflistung ist nebeneinander. Das mit der Auflistung könnte ich relativ einfach beheben, allerdings ist der Abstand ein Problem.

Kann ich diesen Abstand noch irgenwie verringen?

Aktuell sieht es etwa so aus:

Registrieren

Tarif

FAQ

etc.

Aussehen soll es aber so:

Registrieren
Tarif
FAQ


Vielen Dank für die Hilfe


----------

