Problem mit Listenformatierung - Abstände

[mika]

Hallo,
bin ziemlicher HTML/CSS Laie und habe eine Liste die aussieht wie auf dem Pic.
Nun suche ich nach einer Möglichkeit die Abstände der jeweiligen Einträge und Untereinträge zum linken Rand zu verringern.
Habe auch auf Selfhtml gesucht, aber auch da nichts gefunden. Ist dies nicht möglich?

 

[der_gerrit]

Geht ganz einfach mit CSS! Klappt sogar im IE6 :)

ul li ul li {
margin: 0 0 0 -40px; 
}

Falls du noch ne Erklärung möchtest, sag Bescheid.

 

[mika]

Hi, super. ;)

Wie müsste das denn in der css Datei drin stehen, wenn ich als CSS Class 'jd_categories' verwenden möchte.
Also so: '<ul class="jd_categories' ...
Das soll ja nur für diese und keine anderen Listen wirken.

Edit:
Sehe gerade das dies nur für die Untereinträge wirkt? Kann das sein?

 

[der_gerrit]

Wenn das in einer Klasse stehen soll machste das so :

.jd_categories li ul li {
margin: 0 0 0 -40px;
}

Das eine ul kommt weg, weil das erste ul die Klasse bekommt.
Im HTML sieht das dann so aus:

<ul class="jd_categories">

    <li>Liste1
        <ul>
            <li>Unterpunkt 1
                <ul>
                    <li>Unterpunkt 2</li>
                </ul>
            </li>
        </ul>
    </li>

</ul>

Das wirkt sich dann nur auf die Unterpunkte aus. Willst du denn alles eingerückt haben? Oder evtl. auch die Punkte davor weghaben?

 

[mika]

Vielen Dank für deine Hilfe.
Ja, ich möchte das die gesamte Liste weiter nach links rückt, also nicht nur die Unterkategorien. Anstelle der Punkte möchte ich später, wenn alles passt, eigene kleine pics einbinden. Habe schon gelesen das dies geht.

 

[der_gerrit]

Jut jut,

dann packst du einfach noch das in dein CSS :

.jd_categories {
margin: 0 0 0 -20px;
margin: 0 0 0 20px\9; /* Nur für alle Internet Explorer Versionen */
list-style: url(dein-image.jpg); /* Damit bekommst du deine eigenen Listenpunkte-Images */
}

 

[mika]

Ähm.... nur das? Oder zusätzlich?

.jd_categories li ul li {
margin: 0 0 0 -40px;
}

.jd_categories {
margin: 0 0 0 -20px;
margin: 0 0 0 20px\9; /* Nur für alle Internet Explorer Versionen */
list-style: url(folder.png); /* Damit bekommst du deine eigenen Listenpunkte-Images */
}

Edit:
Nun sagt mir der firebug: Dieses Stylesheet enthält keine Regeln.
Ist nicht mein Tag scheint mir... :(

 

[der_gerrit]

Mach das mal so, also einfach nur umdrehen:

.jd_categories {
margin: 0 0 0 -20px;
margin: 0 0 0 20px\9; /* Nur für alle Internet Explorer Versionen */
list-style: url(folder.png); /* Damit bekommst du deine eigenen Listenpunkte-Images */
}

.jd_categories li ul li {
margin: 0 0 0 -40px;
}

 

[mika]

Dieses Stylesheet enthält keine Regeln.

Das kann doch nicht sein. :roll:
Die css wird geladen in der source...

oh.. moment, er findet das file nicht...

Ok, habe den Fehler gefunden. ;)
Vielen Dank für deine Hilfe und deine Geduld!

 

[der_gerrit]

Schreib mal :

[B]ul[/B].jd_categories {
margin: 0 0 0 -20px;
margin: 0 0 0 20px\9; 
list-style: url(folder.png); 
}

Ansonsten kann ich mir das nicht erklären, bei mur funzt es. Vielleicht hat ja dann jemand anders eine Idee.

 

[mika]

Ne, ist alles prima nun (s.o.).
thx. :)