Hallo,

wie kann ich eine horizontale Navigation mit UL und LI erstellen?

Ich habe bei SelfHTML ein Beispiel gefunden, allerdings kann ich dieses Beispiel nicht nachvollziehen.

Ich habe mal eine Liste erstellt und ul und li und habe die Menüpunkte mit float:left linksbündig angeordnet, aber irgendwie krieg ich das nicht hin, daß das Menü auf der Seite zentriert erscheint.

Hat da jemand ein Beispiel?

Übrigens, eins hab ich noch nicht verstanden. Worin liegt der Unterschied zwischen ul#navigation und #navigation ul?

Versuch es mal so :

HTML:

<div id="box_menu">
<ul id="menu">
<li><a href="Seite1.html" target="_self" title="Zur Seite1" class="selected">Seite1</a></li>
<li><a href="Seite2.html" target="_self" title="Zur Seite2">Seite2</a></li>
</ul>
</div>

CSS:

ul#menu{
width: 973px;
height: 43px;
background: #FFFFFF url("../images/unselected.png") top left repeat-x;
font-size: 0.8em;
font-family: arial, sans-serif;
font-weight: bold;
list-style-type: none;
margin: 0;
padding: 0;
}

ul#menu li {
display: block;
float: left;
margin: 0 0 0 10px;
}

ul#menu li a {
height: 43px;
color: #363636;
text-decoration: none;
display: block;
float: left;
line-height: 200%;
padding: 10px 10px 0;
}

ul#menu li a:hover {
color: #E47814;
}

ul#menu li a.selected{
color: #363636;
background: #FFFFFF url("../images/selected.png") top left repeat-x;
padding: 5px 10px 0;
}

Das musst du mit CSS so passend positionieren...das ist dann eigentlich mehr CSS als HTML, und der eigentliche Zweck von ul und li war es auch nicht

Gib dem ul-Element einen beidseitigen Rand mit


Oder Du verpasst dem übergeordneten Block-Element, in dem sich diese ul-Liste befindet, ein

text-align: center;



Im ersteren Fall sprichst Du eine ul-Liste mit der ID navigation an, also

Im zweiten Fall sprichst Du generell alle ul-Listen an, die sich irgendwie und irgendwo innerhalb desjenigen Elements befinden, welchem Du die ID navigation verpasst hast -- völlig egal, wie tief verschachtelt bzw. ob diese ul-Liste(n) das erste, zweite, dritte, n-te Kind-Element dieses mit der ID navigation versehenes Element ist. Solange es sich irgendwo unterhalb des mit der ID navigation versehenen übergeordneten Elements befindet, wird die von Dir diesbzgl. erstellte CSS-Regel dann angewendet.

Du könntest es etwas genauer spezifizieren, indem Du z.B. sagst:


Das würde bedeuten: wende die Regel an auf alle ul-Listen, die unmittelbares, direktes Kind-Element im DOM-Baum des mit der ID navigation gekennzeichneten Elements sind. Elemente, die keine direkten Kinder des mit der ID navigation versehenen Elements sind, werden von der Regel, die Du diesem Selektor zugewiesen hast, nicht erfasst, selbst wenn sie gleich heißen. Sie müssen unmittelbar folgende, direkte Kinder sein -- also das nächste eine Ebene tiefer liegende Element.

Siehe dazu auch:

CSS3: 2. Selectors

Neben dem Floating eine weitere Möglichkeit, um Listenelemente nebeneinanderzusetzen: einfach die display-Eigenschaft ändern. Standardmäßig hat ein li-Element die display-Eigenschaft: list-item. Und wird untereinander gesetzt wie bei einer normalen vertikal ausgerichteten Aufzählung bzw. wie andere Block-Elemente.

Standardmäßig ist's also so:


Man könnte es aber jetzt auch so abändern:


oder:


Dann müssten alle Listenpunkte ebenfalls nebeneinander gesetzt werden, weil das der natürliche Fluss von Inline-Elementen ist. Dann noch, wie beim Floating auch, Abstände der li-Elemente per margin und/oder padding setzen, und auch das müsste dann funktionieren.

Also, das mit dem Zentrieren krieg ich nicht hin.

Ich kann es nur zentrieren, wenn ich dem UL eine Breite zuweise, á la width:800px o.ä.

Aber das kann ja nicht der Sinn sein.