Text übereinander schreiben

José

José

Neues Mitglied
Hallo,
wie bekomme ich es hin, dass "Bewerbungsfotos" und "Berlin Mitte" übereinander stehen wie auf dem Bild.
1657981201453.png

Danke schonmal!
 
Hallo und willkommen,
es wäre ggf. ratsam, deinen bisherigen Quellcode auch hier zu posten, damit wir den nötigen Kontext haben bzw. konkret helfen können.
 
HTML: 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Foto-Studio BERLIN-MITTE</title>
    </head>
    <body>
        <header>
            <div>
                Bewerbungsfotos
            </div>
            <div>
                BERLIN-MITTE
            </div>
        </header>
    </body>
</html>
 
Wie sieht das CSS dazu aus?

Die Struktur ist schon mal nicht schlecht.
Durch die Divs sind die beiden Schriftzüge ja schon untereinander.
Ich würde noch einen weiteren div o.ä. um die beiden Text-Divs packen.

Wenn du dann z.B. Flexbox nutzt, kannst du diesen umfassenden Div vertikal im Header zentrieren.
Das geht mittels align-items: center.
Das ist auch für später sinnvoll, wenn die Navigation daneben dazu kommt, welche wiederum ein eigener Container im Header wäre.

Die Texte kannst du dann noch mittels flex-direction: column und justify-content und/oder mittels margin untereinander ausrichten.

Infos zu Flexbox findest du hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
Das macht es möglich, die Ausrichtung von weiteren Elementen im Header zu regeln, bspw. für die Navigation.

Sonst ist die Navigation zwangsläufig unter dem Text.

Du könntest übrigens alternativ auch den Header erstmal in Ruhe lassen und direkt den umliegenden Text-Div stylen und für die Ausrichtung des Textes nutzen.

Aber probiere einfach mal ein bisschen aus und dann wirst du es besser verstehen.
 
Zurück
Oben Unten