[ERLEDIGT] Padding bei horizontaler Liste

[heinzm]

Hallo,

ich habe ein Menu als <ul> in horizontaler Ausrichtung.
Hier möchte ich die einzelnen Menupunkte durch gepunktete Linien trennen.
Bisher habe ich folgenden Code.

<ul id="navigation">
     <li class="normal"><a href="index.html">Startseite</a></li>
     <li class="normal"><a href="info.html">&Uuml;ber uns</a></li>
     <li class="normal"><a href="kontakt.html">Kontakt</a></li>
     <li class="ende"><a href="impressum.html">Impressum</a></li>
</ul>

In der zugehörigen Css-Datei sieht es wie folgt aus.

LI.normal {
    text-decoration: none;
    display:            inline;
    padding-left:      10px;
    padding-right:    10px;
    border-right:      2px dotted blue;
}

LI.ende {
    display:            inline;
    padding-left:      10px;
    padding-right:    10px;
}

Das ganze sieht dann so aus.


Ich dachte, daß ich durch die Padding-Angaben die Border-Darstellung ein bisschen vermitteln könnte. Scheint aber nicht ganz so zu klappen.

Könnte mir da jemand vielleicht ne kleinen Tipp geben?


Viele Grüße aus Leipzig,

HeinzM

 

[Tronjer]

Versuche es mal mit display: inline-block.

 

[heinzm]

Das hatte nur Auswirkungen auf den oberen Rand. Jetzt stehen die Menupunkte zentral im Menublock, weniger dicht am oberen Rand.

 

[hfb]

Das scheint doch jetzt aber genau das zu sein, was Du brauchst. Oder was genau willst Du erreichen?

 

[heinzm]

Nicht ganz.

border-right:      2px dotted blue;

Das soll mittig zwischen den Menupunkten erscheinen.


Ich habe das Problem wohl aber gelöst. padding und margin aus dem navigations-Kontainer haben mein Vorhaben behindert.
Wenn ich diese Zeilen auskomentiere, dann geht's.