Layout: Anordnen

1. Nebeneinander mit Flexbox

Bild und Text sollen nebeneinander stehen. Dafür packst du beide in einen gemeinsamen Bereich und gibst ihm display: flex. Dann stehen seine direkten Kinder nebeneinander statt untereinander:

<div class="nebeneinander">
    <img src="pictures/fuji.jpg" alt="Der Fuji">
    <div>
        <h2>Der Fuji</h2>
        <p>Mit 3776 Metern ist er der höchste Berg Japans.</p>
    </div>
</div>

.nebeneinander {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nebeneinander img {
    width: 45%;
}

.nebeneinander > div {
    flex: 1;
}

• display: flex ordnet die direkten Kinder nebeneinander an: hier das Bild und das innere <div>.
• gap: 30px lässt Platz zwischen ihnen.
• align-items: center richtet sie senkrecht mittig aus; flex-start setzt sie oben bündig.
• width: 45% gibt dem Bild knapp die Hälfte der Breite, flex: 1 dem Text den Rest.

Das innere <div> ist wichtig: Ohne es wären Überschrift und Absatz zwei eigene Kinder und stünden ebenfalls nebeneinander, in drei Spalten. Willst du das Bild rechts haben, schreib es im HTML nach dem <div>.

2. Spalten

Sollen mehrere gleich wichtige Dinge gleich breit nebeneinander stehen, etwa ein Vergleich oder Vor- und Nachteile, ist ein Grid einfacher. grid-template-columns legt die Spalten fest; 1fr ist ein gleicher Anteil am Platz:

<h2>Vor- und Nachteile</h2>
<div class="zwei-spalten">
    <div>
        <h3>Vorteile</h3>
        <ul>
            <li>läuft im Browser</li>
            <li>funktioniert offline</li>
        </ul>
    </div>
    <div>
        <h3>Nachteile</h3>
        <ul>
            <li>HTML muss genau stimmen</li>
            <li>braucht etwas Übung</li>
        </ul>
    </div>
</div>

.zwei-spalten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

Jedes direkte Kind des Grids ist eine Spalte. Gehören mehrere Elemente in dieselbe Spalte, wie hier Überschrift und Liste, packe sie in ein gemeinsames <div>.

Drei Spalten bekommst du mit 1fr 1fr 1fr. Ungleiche Spalten auch: 2fr 1fr gibt der linken doppelt so viel Platz wie der rechten.

3. Genau platzieren

Manchmal soll ein einzelnes Element an eine bestimmte Stelle: ein Hinweis in die Ecke, eine Beschriftung auf ein Bild. Dafür gibt es position: absolute. Das Element wird aus dem normalen Fluss genommen; die anderen machen ihm keinen Platz mehr. Mit zwei Abständen sagst du, von welcher Ecke aus es steht:

<div class="bild-rahmen">
    <img src="pictures/fuji.jpg" alt="Der Fuji">
    <p class="beschriftung">Der Fuji vom Shōji-See aus</p>
</div>

.bild-rahmen {
    position: relative;
    width: 520px;
}

.bild-rahmen img {
    display: block;
    width: 100%;
    border-radius: 12px;
}

.beschriftung {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 8px 14px;
    border-radius: 0 0 12px 12px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
}

• position: absolute und left: 0; right: 0; bottom: 0 legen die Beschriftung an den unteren Rand, über die ganze Breite.
• Woran sich bottom: 0 misst, bestimmt das nächste Element außen herum, das position: relative hat; hier der Rahmen um das Bild. Ohne ihn läge die Beschriftung am unteren Rand der Seite oder Folie.
• rgba(0, 0, 0, 0.6) ist Schwarz mit 60 % Deckkraft; das Bild scheint durch, die Schrift bleibt lesbar.

Ein Element etwas verschieben

position: relative mit left und top verschiebt ein Element von seinem normalen Platz aus, um die angegebenen Pixel nach rechts und nach unten. Sein alter Platz bleibt dabei frei; das taugt also nur für kleine Korrekturen.

<p style="position: relative; left: 40px; top: 10px;">Etwas weiter rechts.</p>

4. Kleine Bildschirme

Webseiten werden auf dem Handy, dem Tablet und dem Laptop geöffnet. Was auf einem breiten Bildschirm nebeneinander gut aussieht, ist auf dem Handy viel zu eng. Eine Media Query enthält Regeln, die nur unter einer Bedingung gelten, zum Beispiel nur in schmalen Fenstern:

@media (max-width: 700px) {
    .nebeneinander {
        flex-direction: column;
    }

    .nebeneinander img {
        width: 100%;
    }
}

Bis 700 Pixel Breite stehen Bild und Text jetzt untereinander, und das Bild nimmt die ganze Breite. Zieh dein Browserfenster schmaler und breiter: Du siehst genau, wann das Layout wechselt.

Damit Handys die Seite in ihrer echten Breite zeigen, braucht der <head> diese Zeile (im Grundgerüst steht sie schon):

<meta name="viewport" content="width=device-width, initial-scale=1">