Kategorien
Blog

Listenmenüs einzeilig horizontal zentrieren

Eine Liste aus ul li soll horizontal ausgerichtet und zentriert werden.

Getestet in: ff2; ie6,7 – Nov. 2008 – CSS2.1

ul {text-align:center;}
li {display:inline;}

Der Abstand wird durch padding erzeugt. Es folgen einige Anwendungsbeispiele:

Listenmenü mit Hintergrundbild und fester li-Breite:

ul {
    text-align:center; /* Standard wie oben */

}
li {
    display:inline; /* Standard wie oben */
    background-image:url(../images/bild.png); /* Hintergrundbild */
    padding:3px 65px; /* 3px = (Hintergrundbildhöhe – font-size)/2, 65px = Hintergrundbildbreite/2 */
    position:relative; /* um a zu positionieren */

}
li a {
    position:absolute; /* um a zu positionieren */
    left:0;
    top:3px; /* muss der selbe Abstand wie bei ‘#footer li padding-top’ sein */
    height:15px; /* Größe des Hintergrundbildes bzw der Fläche, die der Link verwenden darf */
    width:130px;
}

Listenmenü mit Hintergrundbild und Rahmen um das Li Menü (funzt nicht ganz in ie und ff2)

#current {
    font-weight:bold;
}
ul {
    margin:0;
    padding:0;
    text-align:center;
}
li {
    display:inline;
    padding:6px 66px 4px;
    position:relative;
    text-align:center;
    background-image:url(../images/tab_unten.jpg);
    background-repeat:no-repeat;
    background-position:right;
}
li:first-child {
    background-position:left;
}
li a {
    position:absolute;
    left:5px;
    top:0;
    background-image:url(../images/tab_unten_re.jpg);
    background-repeat:no-repeat;
    background-position:right;
    height:13px;
    width:130px;
    padding-top:9px;
}
li a span {
    position:absolute;
    left:0px;
    top:7px;
    height:11px;
    width:122px;
}
a:link, #footer a:visited, #footer a:hover, #footer a:active {
    color:#FFFFFF;
    font-size:10px;
    text-decoration:none;
}
a:hover {
    font-weight:bold;
}

Ein zentriertes kurzes Menü: Problem: Es entsteht bei zu langen Menüs ein horizontaler Scrollbalken. Es ist also nur für Menüs geeignet, die weniger als 50% des Screens einnehmen werden.

<div id=”navigation”><ul><li>…

.navigation {
    float:left;
    position:relative;
    left:50%;
    text-align:center;
    width:50%; /*sonst gibt es evtl einen horizontalen Scrollbalken – geht aber nur wenn das menü nur max die Hälfte breit ist*/
}
ul {
    position:relative;
    float:left;
    left:-50%;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
}
li {
    margin:0;
    padding:0;
    float:left;
}