Text im Header unten plazieren

**kubjo** · 02.02.2018, 09:30

Hi Leute,
ich stehe auf dem Schlauch:
Ich würde gerne Text der im #header steht am unteren Rand des #headers plazieren.
Im Header liegt via CSS ein Hintergrundbild, der Header wird über das Layout auf 400px Höhe definiert.
Der Text liegt logischerweise in #header . inside und besteht aus h1 und h2, jeweils eine Zeile.

Kann mir jemand helfen?

Grüße aus Ludwigbsurg
JK

**Bennie** · 02.02.2018, 09:40

Das ist doch etwas was mit flexbox gut zu machen wäre, also etwa so :

PHP-Code:


display: flex;

align-content: flex-end;

noch dazu da es vermutlich zentriert sein soll...

PHP-Code:


justify-content: center;

Falls Du Flexbox nicht gut kennst , ich schau meist hier wenn ich nicht genau weiß wie es gehen kann:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://the-echoplex.net/flexyboxes/

**kubjo** · 02.02.2018, 09:45

Hi Bennie,
an flex-box habe ich auch schon gedacht, aber leider funktioniert das nicht richtig.
Ich habe Deinen Code dem Header zugewiesen, die Überschriften rutschen leicht nach unten, aber leider nicht ganz!
Was könnte da falsch sein?

Grüße
JK

**mlweb** · 02.02.2018, 10:00

Zeig mal Deinen Code oder einen Link zur Seite.

**kubjo** · 02.02.2018, 10:04

Hier der Link zur Seite:

http://contao4.hahn-dichtungstechnik.de/startseite.html

Grüße
Jochen

**Stefko** · 02.02.2018, 10:27

Ahoi,

versuche es mal mit align-items: flex-end; anstatt align-content: flex-end; (*)

Hier habe ich mal ein kleines Beispiel für Dich:
https://codepen.io/Lobsterlounge/pen/qxbOgW

(*) https://stackoverflow.com/questions/...nd-align-items

**jscholtysik** · 02.02.2018, 10:35

Hallo Jochen,

Du hast bisher #header als Flexbox definiert. Damit definierst Du #header als Flexbox und .inside als Kindelement der Flexbox und nicht H1 und H2 als Kindelemente. Da die Flexbox-Einstellungen aber immer nur für Elternelemente und deren direkte Kindelemente greifen, würde ich das so machen:

Code:

#header .inside {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

Dann werden beide Überschriften nach unten verschoben.

**kubjo** · 02.02.2018, 10:48

Hi Leute,

@jscholtysik das klappt so leider nicht!
@Stefko: Ja, der Ansatz ist klasse, das justify habe ich jetzt mal weg gelassen, aber jetzt rutschen beide Überschriften auf die selbe Ebene!
Habe es mal auf der Seite gelassen!

Grüße
JK

**jscholtysik** · 02.02.2018, 10:54

Hi Jochen,

das funktioniert schon.

In #header muss display: flex; definiert sein:

Bildschirmfoto 2018-02-02 um 11.51.51.png

und in #header .inside folgendes:

Bildschirmfoto 2018-02-02 um 11.49.52.png

Du hast in #header .inside flex-direction: column; vergessen...