lale: <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> &#160;2. Eintrag  
  <li> &#160; &#160;3. Eintrag  
  <li> &#160; &#160; &#160;4. Eintrag  
  <li> &#160; &#160; &#160; &#160;5. Eintrag  
  <li> &#160; &#160; &#160; &#160; &#160;6. Eintrag  
</ul>  
  

Frage: kann ich das mit CSS einfach machen und um es später jederzeit schneller und besser ändern zu können?

  1. 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

    1. #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.

      1. 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

        1. 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

  2. <ul>
      <li>1. Eintrag
      <li> &#160;2. Eintrag
      <li> &#160; &#160;3. Eintrag
      <li> &#160; &#160; &#160;4. Eintrag
      <li> &#160; &#160; &#160; &#160;5. Eintrag
      <li> &#160; &#160; &#160; &#160; &#160;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;
    }

    1. 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

      1. 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

        --
        http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. 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

          --
          http://www.billiger-im-urlaub.de/kreis_sw.gif
      2. 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.

  3. 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:(