Listen zentrieren

[AgnusMacGyver]

Hallo zusammen,

ich habe das Problem, dass ich eine Liste, welches sich per 'float:left' in eine Zweispalter wandelt, ums Verrecken nicht zentriert bekomme.

SOLL/IST siehe Screenshot.

Eigentlich war ich der Meinung, dass man nur die UL innerhalb des #container mit "margin: 0 auto;" zentrieren müsste, aber da hatte ich wohl die Rechnung ohne CSS gemacht. :-(

<style>
* {margin: 0; padding: 0;}

#container {
width: 100%;
border: 1px solid red; /* dient nur zur Verdeutlichung der Abmessungen des Containers*/
height: 200px;}

ul {margin: 0 auto;}

li {
width:40%;
float: left;
background-color: #FBEF69;
color: #000;
padding:10px;
margin: 10px;
text-align: center;
list-style-type: none;}
</style>

<section id="irgendeineID">
<h4>Überschrift</h4>
<div id="container">

<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
<li><a href="">Link 6</a></li>
</ul>
</div>
</section>​

Danke & Grüße,
Fritz

 

[MrMurphy]

Hallo,

gib section, div und ul mal jeweils andersfarbige border mit auf den Weg. Da passt etwas nicht. Richtig: Wer floatet muss ...! Das hat mit deinem Problem aber nur am Rande zu tun.

Das unsinnige div kannst du auch weglassen.

Gefloatete Elemente lassen sich schlecht zentrieren. Das geht nur über padding, border, und margin und ist auch von deinem Box-Modell (box-sizing) abhängig.

Du könntest zum Beispiel den li in der linken Spalte ein linkes margin von 8%, eine width von 40% und ein rechtes margin von 2% geben, den li in der rechten Spalte entsprechend in linkes margin von 2%, eine width von 40% und ein rechtes margin von 8%.

Oder halt beiden Spalten auf jeder Seite 5%, wenn die li innerhalb jeder Spalte zentriert sein sollen.

Oder du benutzt verzichtest auf float und benutzt das Flexbox-Modell.

Sachlich gibt es auch keinen Grund für die Navigation eine Liste zu verwenden, die könntest du auch weglassen. Listen für Navigationen haben sich leider so eingebürgert, das viele altgediente Webseitenersteller sie für ein Muss halten, obwohl das weder besonders sinnvoll noch irgendwo offiziell vorgegeben war oder ist.

Ob das bei dir funktioniert ist aus deinen Quellcodeschnipseln leider nicht ersichtlich, dazu müsste schon der gesamte Quelltext bekannt sein.

Gruss

MrMurphy

 

[djheke]

Sachlich gibt es auch keinen Grund für die Navigation eine Liste zu verwenden, die könntest du auch weglassen. Listen für Navigationen haben sich leider so eingebürgert, das viele altgediente Webseitenersteller sie für ein Muss halten, obwohl das weder besonders sinnvoll noch irgendwo offiziell vorgegeben war oder ist.

Was soll er dann nehmen?

 

[Tronjer]

Das wäre mir auch neu. Eine Navigation ist semantisch eine <ul> in einem <nav> Tag.

 

[Caanyp]

Hi,

Du kannst auch einfach links machen die du dann in ein umschließendes div packst. Diese links kannst du dann mit text-align zentrieren. Das umschließende div damit die navigationsleiste kompakt ist und eine volle Breite hat.

So mach ich es aufjedenfall