nicht angemeldet
<ul>-Listen: nächster Eintrage gegenüber vorherigen verschoben
In einer Liste soll jeder nächste Eintrag dem vorherigen etwas mehr verschoben sein. Derzeit mache ich es so:
<ul>
<li>1. Eintrag
<li>  2. Eintrag
<li>    3. Eintrag
<li>      4. Eintrag
<li>        5. Eintrag
<li>          6. Eintrag
</ul>
Frage: kann ich das mit CSS einfach machen und um es später jederzeit schneller und besser ändern zu können?
-
Hallo,
ich löse das so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Seitenerstellung 1</title> <style type="text/css"> html { padding: 0px; border: 0px; margin: 0px; font-family: Arial, Helvetica, sans-serif; } #einzug01 { margin-left: 0em; } #einzug02 { margin-left: 0.5em; } #einzug03 { margin-left: 1em; } #einzug04 { margin-left: 1.5em; } #einzug05 { margin-left: 2em; } #einzug06 { margin-left: 2.5em; } </style> </head> <body> <ul> <li id=einzug01>1. Eintrag</li> <li id=einzug02>2. Eintrag</li> <li id=einzug03>3. Eintrag</li> <li id=einzug04>4. Eintrag</li> <li id=einzug05>5. Eintrag</li> <li id=einzug06>6. Eintrag</li> </ul> </body> </html>Du kannst natürlich auch andere Maßeinheiten nehmen.
Gruss
MrMurphy
-
#einzug01 { margin-left: 0em; }
#einzug02 { margin-left: 0.5em; }
#einzug03 { margin-left: 1em; }
#einzug04 { margin-left: 1.5em; }
#einzug05 { margin-left: 2em; }
#einzug06 { margin-left: 2.5em; }da böte sich eher nth-child an
Optimal wäre ja, wenn man dann noch das n bei den Werten nutzen könnte. Davon konnte ich aber bislang in der Beschreibung nichts finden.
-
Hallo
Optimal wäre ja, wenn man dann noch das n bei den Werten nutzen könnte. Davon konnte ich aber bislang in der Beschreibung nichts finden.
Das wäre nicht nur optimal, sondern Voraussetzung. Ansonsten bekommt man den gestaffelten Einzug ja gar nicht hin. Die Möglichkeit ist interessant, wenn z. B. jeder zweite Absatz um den gleichen Wert eingezogen werden soll.
Die Möglichkeit ist aber interessant, wenn z. B. jeder 2. (oder 3. oder ...) Absatz eine andere Farbe oder sonst eine andere Formatierung erhalten soll.
Gruss
MrMurphy
-
Hallo,
ich habe grade mal mit dem Pseudoelement ":nth-child" rumgespielt. Das funktioniert leider nur im Firefox und im Chrome. Der IE kann damit weder in der Version 6 noch 8 etwas anfangen.
Damit ist es für den praktischen Einsatz wohl eher nicht geeignet.
Gruss
MrMurphy
-
-
-
-
<ul>
<li>1. Eintrag
<li>  2. Eintrag
<li>    3. Eintrag
<li>      4. Eintrag
<li>        5. Eintrag
<li>          6. Eintrag
</ul>Frage: kann ich das mit CSS einfach machen und um es später jederzeit schneller und besser ändern zu können?
Etwas umständlich, aber
li, li + li, li + li + li, li + li + li + li, li + li + li + li + li {
margin-left:1em;
}-
Hallo
li, li + li, li + li + li, li + li + li + li, li + li + li + li + li {
margin-left:1em;
}Ich habe das grade mal ausprobiert. Leider funktioniert das bei mir nicht. Es spielt keine Rolle, ob ich
li, li + li, li + li + li, li + li + li + li, li + li + li + li + li { margin-left:1em; }oder einfach
li { margin-left:1em; }eingebe. Die Listeneinträge werden alle um den gleichen Abstand eingezogen, nicht jedoch das nächstfolgende immer etwas weiter. Oder muss da noch etwas beachtet werden?
Gruss
MrMurphy
-
Om nah hoo pez nyeetz, MrMurphy!
Hallo
li, li + li, li + li + li, li + li + li + li, li + li + li + li + li { margin-left:1em; }
Das passt deshalb nicht, weil da keine Vererbung stattfindet, das CSS also nicht mehrfach angewendet wird. Es funktioniert auch nicht bei Eigenschaften, die vererbt werden, wie zum Beispiel Schriftgrößen.
Ich übersetze mal:
li, li+li, li+li+li {foo:bar}bedeutet
li {foo:bar} li+li {foo:bar} li+li+li {foo:bar}optimal wäre: li:nth-child(n) {margin: n * 1em} aber das dauert wohl noch.
Matthias
--
-
Om nah hoo pez nyeetz, apsel!
optimal wäre: li:nth-child(n) {margin: n * 1em} aber das dauert wohl noch.
wobei obiger Link sich auf das Gestalten mathematischer Objekte bezieht und nicht auf das Rechnen-Können.
Matthias
--
-
-
Hallo,
li, li + li, li + li + li, li + li + li + li, li + li + li + li + li {
margin-left:1em;
}Ich habe das grade mal ausprobiert. Leider funktioniert das bei mir nicht.
nein, das war Dummfug, nicht zuende gedacht (bzw. zwei Abkürzungen zu weit gedacht), weil mir was dazwischen kam. Eigentlich wollte ich auf Folgendes hinaus:
li {
margin-left:1em;
}
li + li {
margin-left:2em;
}
li + li + li {
margin-left:3em;
}
li + li + li + li {
margin-left:4em;
}
li + li + li + li + li {
margin-left:5em;
}
usw.Deshalb schrieb ich auch, es wäre
Etwas umständlich, aber
zumindest tut's seinen Zweck.
-
-
-
Sowas hier erfüllt deinen Zweck:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Liste Einruecken</title> <style type="text/css"> div div { margin: 0.2em } </style> </head> <body> <div>1. Eintrag <div>2. Eintrag <div>3. Eintrag <div>4. Eintrag <div>5. Eintrag <div>6. Eintrag </div></div></div></div></div></div> </body> </html>Allerdings habe ich die Semantik nun verändert, wenn es Listen bleiben sollen könntest du ggf. <ul><li><ul><li></li></ul></ul> basteln oder so...
(mit :before kannst du dann Listen-Punkte wieder hizufügen)--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(