Mittiger Seitentitel mit linksbündiger Grafik

kroder

Hallo! Vielleicht denke ich im Moment einfach zu verquer, daß ich nicht drauf komme, wie das zu lösen sein kann.

Ich habe eine Überschrift h1, die den Blognamen enthält. Darunter soll die kurze Blog-Beschreibung stehen, in einem p-Tag. Beide sollen zueinander horizontal mittig ausgerichtet sein. Links von beiden Elementen soll eine Grafik stehen, die zur Position der beiden Textelemente vertikal mittig steht.

Und als Krönung: alle drei Elemente sollen als ganzes noch über die Seitenbreite horizontal zentriert sein.

HTML

<div id="header">
<img src="url" />
<h1>Blogname</h1>
<p>Beschreibung</p>
</div>

Ich hatte schon überlegt, um h1 und p noch einen div zu legen, aber dann klappt die vertikale Ausrichtung des Bildes nicht mehr.
Ziehe ich das Bild in die Überschrift hinein, ist das an sich schon gut, aber der p-Tag wird nicht berücksichtigt (logisch).

Aussehen soll es in etwa so:

Code

|              Blogtitel
                    Bild             
                      |           Blogbeschreibung

Bin für einen Ansatz dankbar :-)
Schönen Sonntag

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Ammaletu

Ich würde das so machen (ungetestet):

Code

<div id="header">
<h1>Blogname</h1>
<p>Beschreibung</p>
</div>

Und dazu diese Styles:

Code

.header {
  width: 800px; /* oder wie breit Du es halt haben magst ;-) */
  height: 200px; /* Höhe der Grafik eintragen */
  padding: 0px 50px; /* hier Breite der Grafik eintragen, damit die Texte nicht drüberlaufen, falls sie länger sind */
  margin: 0px auto; /* damit sollte das ganz schon mal mittig stehen */
  background: url(img/img.jpg) no-repeat left 50%; /* Bild steht links mittig */
}


h1, #header p {
  text-align: center;
}

Alles anzeigen

kroder

Super! Auf die Idee, das Bild als Hintergrundgrafik einzubauen, bin ich nicht gekommen. Es funktioniert perfekt. Vielen Dank :-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Mittiger Seitentitel mit linksbündiger Grafik

Jetzt mitmachen!