Konstantin40: Logo neben h1 und h2 Überschriften ausrichten

Hallo zusammen,

ich möchte ein Logo direkt neben einer h1 Überschrift und einer h2 Überschrift platzieren.
Es soll also das Bild über die beiden Zeilen gehen bzw. vertikal zentriert neben den beiden Überschriften stehen.

Ist das möglich?

Vielen Dank.
Konstantin

  1. @@Konstantin40:

    nuqneH

    ich möchte ein Logo direkt neben einer h1 Überschrift und einer h2 Überschrift platzieren.
    Es soll also das Bild über die beiden Zeilen gehen bzw. vertikal zentriert neben den beiden Überschriften stehen.

    Ist das möglich?

    Ja.

    Um gleich deiner nächsten Frage vorzugreifen: Wie man das machen kann, hängt davon ab, ob das Bild zum Inhalt gehört (also ein img-Element ist) oder Verzierung ist (ein Hintergrundbild per CSS).

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. @@ Gunnar:

      Um gleich deiner nächsten Frage vorzugreifen: Wie man das machen kann, hängt davon ab, ob das Bild zum Inhalt gehört (also ein img-Element ist) oder Verzierung ist (ein Hintergrundbild per CSS).

      Es gehört zum Inhalt in einem img Element.
      Wie kann man das in dem Fall machen?

      Vielen Dank.
      Konstantin

      1. @@Konstantin40:

        nuqneH

        Es gehört zum Inhalt in einem img Element.
        Wie kann man das in dem Fall machen?

        Bspw. so:

        Angenommen, das Logo hat eine Größe von 100 × 100 Pixel.

        Markup:

        <header>  
          <img src="logo"/>  
          <h1>example.com</h1>  
          <h2>The world’s best example</h2>  
        </header>
        

        Stylesheet:

        header  
        {  
          display: block;  
          padding-right: 110px; /* Breite des Logos plus etwas Luft */  
          position: relative;  
        }  
          
        header img  
        {  
          position: absolute;  
          margin-top: -50px; /* halbe Höhe des Logos */  
          right: 0;  
          top: 50%;  
        }
        

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. Wenn die Überschriften weniger Höhe haben als das Logo kommt es zu wahrscheinlich unerwünschten Effekten. Das sollte man bei der Lösung im Auge behalten.

          1. Wenn die Überschriften weniger Höhe haben als das Logo kommt es zu wahrscheinlich unerwünschten Effekten. Das sollte man bei der Lösung im Auge behalten.

            Ich glaub' ich hab' http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_height@title=etwas im Auge.