XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Liste per CSS einrücken (http://xhtmlforum.de/showthread.php?t=63743)

Flubber 08.02.2011 16:10

Liste per CSS einrücken
 
Schönen guten Tag zusammen

Ich habe als Subnavigation eine Liste (<ul>). Die einzelnen List-Items in der Liste können aber weitere Unterlisten haben (also eine verschachtelte ul).
Es ist möglich, dass ein List-Item keine, eine oder mehrere Unterlisten hat. Jede weitere Unterliste kann wiederum eine keine oder mehrere Unterlisten habe... Klar soweit? ;)

Als Beispiel hier eine Liste mit 3 "Ebenen":

HTML-Code:

<div id="subnav">
        <h1>Subnavigation</h1>
        <ul>
                <li><a href="#">Lorem</a></li>
                <li><a href="#">Ipsum</a>
                        <ul>
                                <li><a href="#">Unterliste 1</a></li>
                                <li><a href="#">Unterliste 11</a></li>
                        </ul>
                </li>
                <li><a href="#">Dolores</a>
                        <ul>
                                <li><a href="#">Unterliste 2</a></li>
                                <li><a href="#">Unterliste 22</a>
                                        <ul>
                                                <li><a href="#">Unterliste 3</a></li>
                                                <li><a href="#">Unterliste 3</a></li>
                                        </ul>
                                </li>
                        </ul>
                </li>
                <li><a href="#">Amet</a></li>
        </ul>
</div>

Jetzt möchte ich diese mittels CSS so formatieren, dass jede weitere "Unterebene" weiter eingerückt wird, und das bei unendlich vielen möglichen Ebenen.
Mein Ansatz war folgender:

HTML-Code:

#subnav li ul a
{
        padding-left: 0.5em;
}

Dieser wird jedoch nur auf die erste Unterebene angewandt...

Wisst Ihr, wie das im CSS aussehen muss?

Bitte fragt nach, wenn ich mich unklar ausgedrückt habe. Ich hoffe Ihr kommt draus, was ich meine...


Gruss Flubber

chorn 08.02.2011 16:23

Was du suchst ist wohl eher "li ul", alle Listen in einem Listenelement.

PS: Was, wie ich grad sehe, übrigens die Standardeinstellung in den üblichen Browsern ist. Einfach mal nur den HTML-Teil speichern und angucken. Du hast das wohl an einer anderen Stelle elemeniert.

Flubber 08.02.2011 16:33

Funktioniert!
 
Da hast du allerdings recht... das ist standardmässig so drin.... ein padding: 0; auf die gesammte Liste (dass sie nicht so weit weg vom Rand steht) hat das deaktiviert ;)

Die genaue Positionierung kann ich dann mittels li ul definieren...

Danke vielmals für die prompte Antwort!!

Gruss

*close*


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:11 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020