Rolf B: Logo und Titel in einem Div

Beitrag lesen

SELF-Forum

Logo und Titel in einem Div

Rolf B
– Informationen zu den Bewertungsregeln

Hallo Dani,

der Vorschlag von Matthias mit Grid braucht noch etwas Tuning, und ein paar Hinweise.

  • position:absolute sorgt dafür, dass die so gestylten Elemente aus dem normalen Flow herausgenommen werden. Insbesondere werden sie display:flex oder display:grid nicht mehr beachtet. Also: Entweder Flexbox, oder Grid, oder absolute Positionierung.

  • font-family: Intern Web; mag auf deinem Computer funktionieren, aber du musst einen generischen Fallback-Font (serif oder sans-serif) hinten anfügen, falls der Font auf dem Zielsystem nicht bekannt ist.

  • Styles einer Landing-Page würde ich inline setzen (also im <style> Element des <head>. Die sind klein und werden vermutlich nicht recycled, da ist eine externe CSS Datei eher kontraproduktiv.

  • Ich würde dem header keine feste Höhe geben. Lass das weg, definiere lieber etwas padding oben und unten, und lass es den Browser berechnen. Damit bist Du flexibler.

  • Matthias Grid-Vorschlag berücksichtigt deine gewünschten Abstände noch links nicht, und es fehlt auch die vertikale Zentrierung.

    • die Einrückung des Image bekommst Du mit einem padding-left: 25px (besser: 1.5em) auf dem Container
    • align-items:center funktioniert auch für Grids
    • grid-gap ist der Abstand zwischen den Grid-Zellen, hier zwischen Bild und Text. Es wird aber vom Internet Explorer nicht unterstützt. Da der fast tot ist, kannst Du diesen Umstand ignorieren.
    • dem <p> Element musst Du mit margin: 0; die Randabstände wegnehmen, sonst blasen die den Header auf.
    • die Alternative zu grid-gap ist margin: 0 0 0 80px; am <p> Element.

  • deine Flexbox-Lösung hat justify-content: center verwendet, darum war der Text nicht linksbündig. Du hättest justify-content: flex-start nehmen müssen. Und das absolut positionierte Bild hat natürlich die Berechnung verhagelt.

Hier ein Vergleich von Flexbox und Grid: https://jsfiddle.net/Rolf_b/rw8gL4uc/

Rolf

--
sumpsi - posui - obstruxi
Beitrag melden
–
Informationen zu den Bewertungsregeln