Andi: Überschrift h1 bündig ausrichten

Hallo,

ich möchte folgendes erreichen:
|TEST
|
|

Die Striche sind ein Rand, das HTML sieht folgendermaßen aus:

<h2 style="border-left: 6px solid #274b5f;color: red;font-size: 18px;">TEST</h2>

Nun habe ich aber einen Abstand zwischen dem Rand oben und dem beginn von "TEST". Ist das mit padding und margin überhaupt hinzukriegen? Oder was ratet ihr mir sonst?

Grüße
Andi

  1. Hi Andi,

    <h2 style="border-left: 6px solid #274b5f;color: red;font-size: 18px;">TEST</h2>

    Nun habe ich aber einen Abstand zwischen dem Rand oben und dem beginn von "TEST". Ist das mit padding und margin überhaupt hinzukriegen? Oder was ratet ihr mir sonst?

    In deinem Beispiel ist doch gar kein padding oder margin?!

    Aber du darfst auch nicht die übergeordneten Tags vergessen.

    body zb. muss dann natürlich auch padding:0px; margin:0px; haben.
    bzw.
    <body leftmargin="0" topmargin="0">

    je nachdem was du bevorzugst.

    carpe diem
    Pia

    1. Hi,

      <h2 style="border-left: 6px solid #274b5f;color: red;font-size: 18px;">TEST</h2>

      Nun habe ich aber einen Abstand zwischen dem Rand oben und dem beginn von "TEST". Ist das mit padding und margin überhaupt hinzukriegen? Oder was ratet ihr mir sonst?

      In deinem Beispiel ist doch gar kein padding oder margin?!

      Aber du darfst auch nicht die übergeordneten Tags vergessen.

      body zb. muss dann natürlich auch padding:0px; margin:0px; haben.
      bzw.
      <body leftmargin="0" topmargin="0">

      Hm, vielleicht habe ich es zu umständlich erklärt:
      |TEST
      |
      |
      Hier ist Text bündig mit dem Rand oben.

      Bei diesem Beispiel kommt es aber so:
      |
      |TEST
      |
      |

      Grüße
      Andi

      1. Hi,

        <h2 style="border-left: 6px solid #274b5f;color: red;font-size: 18px;">TEST</h2>

        Nun habe ich aber einen Abstand zwischen dem Rand oben und dem beginn von "TEST". Ist das mit padding und margin überhaupt hinzukriegen? Oder was ratet ihr mir sonst?

        In deinem Beispiel ist doch gar kein padding oder margin?!

        Aber du darfst auch nicht die übergeordneten Tags vergessen.

        body zb. muss dann natürlich auch padding:0px; margin:0px; haben.
        bzw.
        <body leftmargin="0" topmargin="0">

        Hm, vielleicht habe ich es zu umständlich erklärt:
        |TEST
        |
        |
        Hier ist Text bündig mit dem Rand oben.

        Bei diesem Beispiel kommt es aber so:
        |
        |TEST
        |
        |

        Grüße

        Hallo Andi,

        also nochmal in einfacher Form:

        <html>
        <head>
        </head>
        <body leftmargin="0" topmargin="0" style="margin:0px;padding:0px;">
        <h2 style="margin:0px;padding:0px;">TEST</h2>
        </body>
        </html>

        Probiere es aus.

        carpe diem
        Pia

        Andi

        1. Hi!

          <body leftmargin="0" topmargin="0" style="margin:0px;padding:0px;">
          <h2 style="margin:0px;padding:0px;">TEST</h2>

          Ich würde nicht mit Inline-Styles arveiten, sondern alle Style-Angaben in einer Datei auslagern - oder notfalls auch in einem Style-Bereich im Head.
          In jedem Fall würde ich Code und Design voneinander trennen.
          Aber falsch ist es ja nicht...

          Und dann kann man sich die Einheit "px" sparen.
          Wenn etwas 0 ist, dann ist es egal, ob px, pt, em, %, Äpfel oder Birnen:
          style="margin:0; padding:0;"

          Schöner Gruß,
          rob

          1. Hallo Rob,

            Ich würde nicht mit Inline-Styles arveiten, sondern alle Style-Angaben in einer Datei auslagern - oder notfalls auch in einem Style-Bereich im Head.
            In jedem Fall würde ich Code und Design voneinander trennen.

            Natürlich, aber zum besseren Verständnis war es so besser.

            Und dann kann man sich die Einheit "px" sparen.
            Wenn etwas 0 ist, dann ist es egal, ob px, pt, em, %, Äpfel oder Birnen:

            Aha, interessant, habs immer so geschrieben aber logischerweise hast du wohl recht, nie drüber nachgedacht. Trotzdem werde in
            Zukunft weiter die Einheit mit angeben, denn sollte ich den Wert
            mal ändern müssen, brauche ich dann nicht mehr darüber nachdenken,
            welche Einheit ich denn dort im Normalfall nutze.

            carpe diem
            Pia

    2. Hi!

      <body leftmargin="0" topmargin="0">

      Also wenn man es schon mit HTML-Attributen macht (wovon ich allerdings abraten würde), dann würde ich auch noch marginheight und marginwidth dazusetzen, damit es in allen Browsern funktioniert.
      Also:
      <body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">

      Aber wie gesagt: Mache es mit CSS. Dann hast du auch validen Code.

      Schöner Gruß,
      rob

  2. hi,

    ich möchte folgendes erreichen:
    |TEST
    |
    |

    Nun habe ich aber einen Abstand zwischen dem Rand oben und dem beginn von "TEST". Ist das mit padding und margin überhaupt hinzukriegen?

    Nein.

    Oder was ratet ihr mir sonst?

    Du möchtest vielleicht die line-height anpassen.
    Dabei aber bedenken, dass die Höhe verschiedener Schriftarten unterschiedlich ausfallen kann, und dass du die verwendete Schriftart nicht kennst.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }