Hauptmenü

Untermenü

HTML / CSS - Praxistutorial 4 - Daten und Kenntnisse

1. Die Abschnitte

2. Ihre Daten

Hier müssen wir die Elemente in den korrekten Fluss bringen. Dazu legen wir beim <fieldset> zunächst mal eine Klasse fest.


<fieldset class="daten">
  <legend>Ihre Daten</legend>
  ...
</fieldset>

Die CSS-Anweisungen


fieldset.daten label
{
  floatnone;
}

fieldset.daten span
{
  width130px;
  floatleft;
}

fieldset.daten input
{
  margin-bottom5px;
}

Erläuterung

Zunächst mal heben wir die vorherige float: left-Anweisung wieder auf. Das ist dasselbe Prinzip, was ich im vorherigen Abschnitt erklärt habe. Dann weisen wir dem <span> dieselben Eigenschaften zu, wie dem <label> aus der "Adresse". Also wiederum so, wie vorherigen Abschnitt. Zum Schluss legen wir noch per fieldset.daten input einen angemessenen Abstand nach unten fest, damit die beiden Felder nicht so nahe aneinander stehen.

Anmerkung

<input>-Elemente vom Typ file lassen sich kaum mit CSS formatieren. Das liegt darin begründet, dass es hier mögliche Hackerattacken geben könnte. Unbedarfte Leute klicken ja bekanntlich auf alles, was nicht bei drei auf den Bäumen ist. Darum werden wir bei diesem Element auch nichts weiter unternehmen, da es ein sinnloses Unterfangen ist. Wer trotzdem eine Lösung für alle(!) gängigen Browser hat, der möge mir doch bitte eine Mail schicken.

3. Kenntnisse

Hier haben wir ja schon fast alle Formatierungen vorgenommen, die wir brauchen. Allerdings möchten wir, dass dieses <fieldset> dieselbe Höhe hat, wie die drei linken zusammen. Dazu weisen wir dem entsprechenden Absatz eine Klasse zu.


<class="os">
  <label for="os">Betriebssysteme</label>
  ...
</p>

Die CSS-Anweisung


p.os
{
  margin-top111px;
}

Erläuterung

Die Sache ist so einfach, dass sie eigentlich keiner weiteren Erläuterung bedarf. Wir erhöhen einfach den oberen Abstand von "Betriebssysteme" zu "Sprachen". Und im Moment passt das noch ganz genau.

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