Gast: Geschütztes Leerzeichen für Abstand

Hallo,

ist es legitim, bei einer mehrzeiligen Fußnote einen Zeilenumbruch einzufügen und, um einen bündigen Abstand herzustellen, geschützte Leerzeichen ( ) zu verwenden oder gibt es dafür andere / bessere Möglichkeiten.

Beispiel

  
* text text text text text text text text <br>  
&nbsp;&nbsp; text text text text

ergibt

* text text text text text text text text
  text text text text

Vielen Dank für eure Vorschläge.

Gast

  1. Hallo,

    ist es legitim, bei einer mehrzeiligen Fußnote einen Zeilenumbruch einzufügen und, um einen bündigen Abstand herzustellen, geschützte Leerzeichen (&nbsp;) zu verwenden oder gibt es dafür andere / bessere Möglichkeiten.

    Legitim ist es schon, aber funktionieren wird es nicht. Nur weil in Deinem Browser ein paar &nbsp; zufällig einen von Dir gewollten Abstand erzeugen heisst das noch lange nicht, daß das in meinem oder irgendjemandes' anderen Browser genauso ist.
    Bündigkeit links und rechts erreichst Du mit der CSS-Anweisung text-align:justify ...

  2. Vielen Dank für eure Vorschläge.

    Das Sternderl scheint doch eine "Aufzählung" zu indizieren? list-style-position und text-indent sollten hier ggf. weiterhelfen.

    &nbsp; ist in diesem Kontext jedenfalls völlig falsch.

    1. Der Stern steht für die Fußnote.

  3. Om nah hoo pez nyeetz, Gast!

    Vielen Dank für eure Vorschläge.

    Dieses CSS für Absätze der Klasse fußnote sollte deine Wünsche erfüllen:

    .fußnote {  
      display: list-item;  
      list-style: none outside disk;  
      margin-left: 1em;  
    }  
    
    

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Eis und Eisenbahn.

    1. Om nah hoo pez nyeetz, Matthias Apsel!

      Sollte es tatsächlich '*' sein, dann

      .fußnote::before {  
        content: "*";  
        display: inline-block;  
        width: 1em;  
        margin-left: -1em;  
      }  
        
      .fußnote {  
        margin-left: 1em;  
      }
      

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Pi und Pionier.

      1. @@Matthias Apsel:

        nuqneH

        Sollte es tatsächlich '*' sein, dann

        Und wenn nicht?

        .fußnote::before {

        content: "*";

          
        Das ist vielleicht für #fußnote bedingt tauglich (lies: eher untauglich), für .fußnote gar nicht.  
          
        Nur bedingt (un-), weil der \* keine Dekoration ist, sondern zum Inhalt gehört, also im Markup stehen sollte, nicht per CSS generiert.  
          
        Also eher sowas:  
          
        `<div class="fußnote"><span class="marker">*</span> Hier der Fußnotentext</div>`{:.language-html}  
          
        (Das div darf auch gerne li oder small etc. sein.)  
          
        ~~~css
        .fußnote  
        {  
          position: relative;  
          padding-left: 1em;  
        }  
          
        .fußnote > marker  
        {  
          position: absolute;  
          left: 0;  
          top: 0;  
        }  
        
        

        .fußnote > marker wird absolut innerhalb von .fußnote

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

          Das ist vielleicht für #fußnote bedingt tauglich (lies: eher untauglich), für .fußnote gar nicht.

          Nur bedingt (un-), weil der * keine Dekoration ist, sondern zum Inhalt gehört, also im Markup stehen sollte, nicht per CSS generiert.

          Ich verstehe, was du meinst. Allerdings: verwendete man eine ol, was semantisch sehr zutreffend wäre, so stünde die Zahl auch nicht im Markup.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Hang und Hangar.

  4. Hallo,

    wieso nicht z. B.:

      
    <!DOCTYPE html>  
    <html lang="de">  
    <head>  
    <meta charset="utf-8">  
    <title>fussnote</title>  
    <style type="text/css">  
    [code lang=css].footnote {  
    	text-indent: -2em;  
    	margin-left: 2em;  
    }
    

    </style>
    </head>
    <body>

    <p class="footnote">Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<br>
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br>
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod<br>
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

    </body>
    </html>
    [/code]

    Gruß Paulchen