hubert34: Zeilenhöhe bestimmen

Wie ist die Syntax für style="line-height: 20px
Natürlich habe ich beim Basteln die Zeil dreimal geladen.
Wie sieht die richtige aus?

  
<!DOCTYPE HTML>  
<html>  
  
<head>  
  <title>Zeilenhöhe festlegen</title>  
</head>  
  
<body>  
<table border="7" style="width:511pt; height:500pt;">  
   <td colspan="2" style="vertical-align:top;">  
            <p style="line-height: 20px;">line-height: 20px;</p>  
            <p style="line-height: 200%;">line-height: 200%;</p>  
            <p style="line-height: normal;">line-height: normal;</p>  
        <b>Feld des normalen Textes, dessen Zeilenhöhe möcthe ich verändern  
        </b>  
   </td>  
 </table>  
</body>  
  
</html>  

  1. Wie sieht die richtige aus?

    Ich hätte noch eine Option für dich :)

      
    <p style="line-height: 1.2em;">line-height: 1.2em;</p>  
    
    

    Gunnar meinte heute Morgen in einem Post etwas weiter unten zu mir, vergiss ganz schnell, dass es px gibt! Ich denke dieses passt auch hier sehr gut.

    Aber warum verwendet du für diese Aktion eine Tabelle? Außerdem solltest du das CSS nicht direkt in deinen HTML Code schreiben sondern lieber in eine externe CSS Datei.

    1. Wie sieht die richtige aus?

      Ich hätte noch eine Option für dich :)

      <p style="line-height: 1.2em;">line-height: 1.2em;</p>

      
      >   
      > Gunnar meinte heute Morgen in einem Post etwas weiter unten zu mir, vergiss ganz schnell, dass es px gibt! Ich denke dieses passt auch hier sehr gut.  
      >   
      > Aber warum verwendet du für diese Aktion eine Tabelle? Außerdem solltest du das CSS nicht direkt in deinen HTML Code schreiben sondern lieber in eine externe CSS Datei.  
      >   
        
      Zur Sache  
      Du schreibst hier zwei mal den gleichen Wert mit 1.2em  
      Wie soll ich das verstehen?  
      Wie mache ich das mit der Datei?  
        
      Zu Mir  
      Ich bin in HTMl wriklich ganz neu unterwegs.  
      Dazu habe ich mir ein dickes Buch gekauft.  
      Leider ist darin nicths über die Syntax zu finden.  
      Mit den Vokabeln allein fängt man in jede Sprache wenig an.  
      Hubert  
       
      
      1. Hallo,

        zum Stil:
        Bitte zitiere nicht einfach das gesamte Vorposting (Fullquote, auch TOFU genannt). Zitiere die Abschnitte, auf die du konkret eingehst oder antwortest, und lass den Rest weg. Danke.

        <p style="line-height: 1.2em;">line-height: 1.2em;</p>
        Du schreibst hier zwei mal den gleichen Wert mit 1.2em
        Wie soll ich das verstehen?

        Einmal technisch wirksam als style-Attribut, und einmal als Prosa, einfach als Text zur Verdeutlichung.

        Aber warum verwendet du für diese Aktion eine Tabelle? Außerdem solltest du das CSS nicht direkt in deinen HTML Code schreiben sondern lieber in eine externe CSS Datei.
        Wie mache ich das mit der Datei?

        Wenn du tatsächlich neu in die Materie einsteigst, solltest du dir ein paar Grundlagen aneignen. Ob das Buch, das du erwähnst, dafür wirklich taugt, kann ich nicht sagen - Bücher haben oft den Nachteil, uralten Käse zu vermitteln. Alternativ könntest du dir den Artikel im SELFHTML-Wiki zur Grundstruktur eines HTML-Dokuments vornehmen. Dort wird auch beschrieben, wie eine externe CSS-Datei eingebunden wird.

        Generell gibt es drei Möglichkeiten, CSS an ein HTML-Dokument zu binden:
        1. Als style-Attribute direkt an einem HTML-Element, wie du es schon getan hast. Das ist die schlechteste Methode und sollte vermieden bzw. nur in seltenen begründeten Ausnahmefällen verwendet werden.
        2. Als CSS-Block im head des Dokuments, der mit <style> und </style> begrenzt wird.
        3. Als externe CSS-Datei, die im head des Dokuments über ein link-Element angesprochen wird. Das ist die sauberste Methode, weil Inhalt (HTML) und Gestaltung (CSS) sauber getrennt sind; außerdem ist es so sehr einfach, dieselbe CSS-Datei in mehreren Dokumenten einzubinden und so ein einheitliches Erscheinungsbild der gesamten Site zu erreichen.

        Zu Mir
        Ich bin in HTMl wriklich ganz neu unterwegs.
        Dazu habe ich mir ein dickes Buch gekauft.
        Leider ist darin nicths über die Syntax zu finden.

        Dann ist das Buch Mist. Sorry, wenn ich das so direkt sage, aber eine Computersprache ganz ohne Erklärung der Syntax zu vermitteln, geht einfach nicht. Das ist genauso, als wollte man eine natürliche Sprache lernen (Spanisch, Englisch, o.ä.), ohne überhaupt auf die Grammatik einzugehen. Man muss nicht beliebig in die Tiefe gehen, aber ein bisschen ist zwingend nötig.

        Mit den Vokabeln allein fängt man in jede Sprache wenig an.

        Eben.

        Schönes neues Jahr,
         Martin

        --
        Heutzutage gilt ein Mann schon dann als Gentleman, wenn er wenigstens die Zigarette aus dem Mund nimmt, bevor er eine Frau küsst.
          (Barbra Streisand, US-Schauspielerin)
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
  2. @@hubert34:

    nuqneH

    <p style="line-height: 20px;">line-height: 20px;</p>

    Setzt die Zeilenhöhe auf 20px. Wenn sich die Schriftgröße ändert (was der Nutzer in seinem Browser tun kann), passt die Zeilenhöhe nicht mehr. Deshalb Zeilenhöhe immer[tm] relativ zur Schriftgröße angeben.

    <p style="line-height: 200%;">line-height: 200%;</p>

    Setzt die Zeilenhöhe auf das Doppelte der Schriftgröße.

    <p style="line-height: normal;">line-height: normal;</p>

    Setzt die Zeilenhöhe auf den im jeweiligen Browser geltenden Normalwert (meist das 1,2-fache der Schriftgröße). Da "normal" der Defaultwert für die 'line-height'-Eigenschaft ist, kann die Angabe auch entfallen.

    Weitere Fehler:

    • Inline-Angaben in style-Attributen. Alle Angaben sollten im Stylesheet stehen.

    • Verwendung von Tabellen zum Layouten.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  3. Hallo,

    <b>Feld des normalen Textes, dessen Zeilenhöhe möcthe ich verändern
            </b>

    Dann solltest du vielleicht die Zeilenhöhe dieses Textes verändern und nicht die Zeilenhöhe der Absätze vorher...

    Gruß
    Kalk

  4. Wie ist die Syntax für style="line-height: 20px
    Natürlich habe ich beim Basteln die Zeil dreimal geladen.
    Wie sieht die richtige aus?

    <p style="line-height: 20px;">line-height: 20px;</p>
                <p style="line-height: 200%;">line-height: 200%;</p>
                <p style="line-height: normal;">line-height: normal;</p>

    Dein Problem ist vermutlich nicht die Syntax, sondern dass du schlichtweg Werte genommen hast, die sich kaum unterscheiden.

    20px und normal sind bei mir beispielsweise nach Augenmaß identisch, denn bei einer Standardschriftgröße von 16 Pixeln ist die Zeilenhöhe 19 Pixel (16 * 1,2).

    Der Unterschied zu 200% erscheint vom Wert her zwar groß, ist auf dem Bildschirm aber auch nur bei genauem Hinsehen zu erkennen, denn der tatsächliche Zugewinn schrumpft dahin, wenn man bedenkt, dass die Zeilenhöhe sich logischerweise in die Schrifthöhe und einen oberen und einen unteren Freiraum aufteilen muss.
    Damit bleiben je Freiraum – 32 Pixel Zeilenhöhe abzüglich 16 Pixel Schrifthöhe, dies in 2 Bereiche geteilt – nur 8 Pixel bzw. 6,5 Pixel mehr Abstand als bei "normal". Das ist kaum die halbe Schrifthöhe, bei drei bis vier Pixeln pro Millimeter ein größerer Fliegenschiss. Obendrein gehen diese 6,5 Pixel Zugewinn auch noch über in den 16 Pixel großen Außenabstand des Absatzelements <p> – oder besser gesagt: Sie gehen darin unter.