Gesamte Liste mittig ausrichten

[Tease]

Hallo zusammen,
bin gerade dabei eine Navigation für 'ne neue Site anzulegen und stehe vor 'nem Problem, dass wahrscheinlich leicht zu lösen ist, ich aber selber nicht drauf komme. Und zwar möchte ich, dass meine Navi-Elemente (li) den gleichen Abstand nach links und rechts hat, und außerdem die gesamte Navigation (ul) die Hintergrund-Grafik ausfüllt..... Hmm, das hört sich jetzt komplizierter an, als es ist. Hier mal ein Screenshot, der's hoffentlich besser erklärt, als ich.

So sieht meine Navi momentan im Browser aus:


Uploaded with

Aussehen soll es aber natürlich eher so:



Uploaded with

Sollte doch eigentlich nicht so schwer sein, dennoch hab ich keinen Plan wie man die gesamte Liste mittig macht.

Auszug aus meiner HTML-Seite:

<div id="menu">
        <ul>
            <li><a href="bio.html">Biografie</a></li>
            <li><a href="musik.html">Musik</a></li>
            <li><a href="medien.html">Medien</a></li>
            <li><a href="projekte.html"> Projekte</a></li>
            <li><a href="termine.php">Termine</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
        </ul>
    </div><!-- end of menu -->

der entsprechende CSS-Code:

#menu {
    background-image: url(bilder/menu.jpg);
    height: 52px;
    width: 616px;
    margin-top: 5px;
    margin-left: 16px;
}
#menu ul {
    list-style-type: none;
    padding-top: 17px;
    margin-left: 2px;
}
#menu ul li {
    float: left;
}
#menu ul a  {
    padding-right: 22px;
    padding-left: 22px;
    display:block;
    line-height: 20px;
    text-decoration:none;
    color: #C6C1B8;
    font-weight: 100;
}

Wäre nett, wenn mir hier jemand weiterhelfen könnte.
Vielen Dank schon mal im Voraus!

 

[Flosse]

AW: Gesamte Liste mittig ausrichten

Bei 'menue ul a setze mal text-align: center;

Dann wird der Text zentriert ausgerichtet.

 

[Solla]

AW: Gesamte Liste mittig ausrichten

Hallo versuche doch mal dem Listenelement ein Padding von 0 10px 0 0 (oder padding-right: 10px; ) zu verpassen vielleicht müssen es auch etwas mehr oder weniger sein. da musst Du ein wenig rumexperimentieren. filleicht solltest Du auch den padding left noch etwas vergrößern, damit Biografie von Anfang an schön zentriert in der ersten Box des Hintergrundbildes liegt, den Rest dann mit padding-right anpassen.


Möglich wäre auch das ganze mittels center zu zentrieren, aber ich denke da bekommst Du mit Biografie ein Problem, denn das dürfte dann zu weit rechts und somit auf dem Trennstrich liegen.

Ich hoffe, dass hilft Dir weiter... wäre nett wenn Du im Erfolgsfall ein Feedback geben könntest.

Hoppla da war wer schneller:

Bei 'menue ul a setze mal text-align: center;

Dann wird der Text zentriert ausgerichtet.

Ich denke nicht dass man damit in diesem Fall nicht zum Erfolg kommt. Die Trennstriche dürften da dem Ganzen im Weg stehen, der Text wäre dann natürlich mittig!

B.G.
Solla

 

[AlexanderBo]

AW: Gesamte Liste mittig ausrichten

für die ganze seite

margin 0 auto 0 auto;

 

[Antr4ks]

AW: Gesamte Liste mittig ausrichten

Gebe dem li doch mal ne feste Breite

 

[sokie]

AW: Gesamte Liste mittig ausrichten

Hallo Tease,
mach es einfach ohne linke und rechte paddings an den listenelementen, und gib denen stattdessen eine feste breite (breitederUL/7) und ein display:block. die li a elemente bekommen auch ein display:block und text-align-center.