HTML / CSS - Praxistutorial 4 - Abschnitte zusammenfassen

1. Die Abschnitte

2. Die einzelnen Blöcke

Der linke Block

Ich hoffe, ihr habt noch den Grundaufbau im Kopf, ansonsten schaut ihn euch hier noch mal unter Punkt 6 an. So, zunächst mal fassen wir die ersten drei <fieldset>-Elemente in einem <div> mit der Klasse left zusammen.


<div class="left">
  <fieldset>
    <legend>Adresse</legend>
    ...
  </fieldset>
  <fieldset>
    <legend>Anstellung</legend>      
    ...
  </fieldset>    
  <fieldset>
    <legend>Ihre Daten</legend>
    ...
  </fieldset>
</div>

Der rechte Block

... besteht zwar nur aus einem <fieldset>, wir bauen ihn aber trotzdem in ein <div> ein. Warum? Das spart uns später ein wenig Tipparbeit (denke ich zumindest, hab es nicht ausprobiert). Außerdem halte ich es für ein klein wenig konsistenter. Und bei CSS gibt es sowie zig Möglichkeiten.


<div class="left right">
  <fieldset>
    <legend>Kenntnisse</legend> 
    ...
  </fieldset> 
</div>

Auch wenn ich mich an dieser Stelle gegen Mehrfachselektoren ausgesprochen habe, so arbeiten wir hier ausnahmsweise(!) mal damit. Zumal wir nur mit zwei Zuweisungen arbeiten, das geht noch.

Der untere Block


<div class="clear">
  <fieldset>
    <legend>Mitteilung</legend> 
    ...
  </fieldset> 
  <p>
    ... Buttons
  </p>
</div>

3. Die CSS-Anweisungen

Ich hoffe ihr wisst mittlerweile, was float bedeutet und wie es funktioniert. Wenn nicht, dann schaut euch erst mal das hier genau an.


div.left
{
  float: left;
  margin-right: 10px;
  width: 445px;
}

div.right
{
  margin-right: 0px;
}

div.clear
{
  clear: both;
}

Erläuterung

Zunächst mal nehmen wir den linken und rechten Block mit float: left; aus dem üblichen Fluss. Damit aber beide eine identische Breite haben, legen wir die mit width: 445px; fest. Damit es zwischen beiden aber noch einen Abstand gibt, setzen wir margin-right: 10px;.

Nur leider stehen beide Blöcke immer noch untereinander. Und das liegt an obiger margin-Anweisung. Denn die gilt auch für den rechten Abschnitt. Leider passt das dann wegen der Breitenangabe nicht. Darum benötigen wir das div.right mit der Anweisung margin-right: 0px;, um diesen Missstand zu beheben. Die Vorgehensweise mag nicht besonders schön sein, aber ich will euch ja hier auch verschiedene Möglichkeiten zeigen.

Zum Schluss heben wir das float des linken und rechten Blocks für den unteren Bereich (div.clear) mittels clear: both; sauber auf.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt