HTML / CSS - Praxistutorial 4 - Daten und Kenntnisse
1. Die Abschnitte
- Überblick
- Standardanweisungen
- Das Formular
- Abschnitte zusammenfassen
- Allgemeine Formatierungen Teil 1
- Allgemeine Formatierungen Teil 2
- Adresse und Anstellung
- Daten und Kenntnisse
- Mitteilung und Buttons
- Darstellungsunterschiede
- Lösungsmöglichkeiten
- Die letzte Rettung
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
{
float: none;
}
fieldset.daten span
{
width: 130px;
float: left;
}
fieldset.daten input
{
margin-bottom: 5px;
}
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.
<p class="os">
<label for="os">Betriebssysteme</label>
...
</p>
Die CSS-Anweisung
p.os
{
margin-top: 111px;
}
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