HTML / CSS - Praxistutorial 4 - Adresse und Anstellung
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. Die Adresse
Hier haben wir das Problem, dass natürlich die bisher gemachten Breitenangaben dafür sorgen, dass an dieser Stelle alles zerhauen wird. Daher weisen zunächst mal den Elementen eine Klassendefinition zu.
<p>
<label for="plz" class="plz">PLZ</label>
<label for="ort" class="ort">Ort</label>
<input type="text" name="plz" id="plz" class="plz" />
<input type="text" name="ort" id="ort" class="ort" />
</p>
Die CSS-Formatierung
input.plz
{
width: 40px;
margin-right: 5px;
}
input.ort
{
width: 238px;
}
label.plz
{
width: auto;
margin-right: 5px;
}
label.ort
{
width: 101px;
}
Erläuterung
Durch die Bindung an den Typ der Elemente können wir hier schön mit nur zwei Klassennamen arbeiten. Zu den Anweisungen sage ich nur noch, dass es pixelgenau passt. Zumindest erst mal im Firefox 5.
3. Art der Anstellung
An dieser Stelle müssen wir uns mit dem Problem der radio-Elemente herumschlagen. Und mit den
<label>-Elementen. Dazu legen wir erst mal auf den entsprechenden Absatz eine Klasse.
<p class="radio">
<span>Art der Anstellung</span>
...
</p>
Die CSS-Formatierung
p.radio input
{
width: 20px;
}
p.radio label
{
float: none;
}
p.radio span
{
display: block;
margin-bottom: 5px;
}
Erläuterung
Zunächst mal reduzieren wir die Breite der radio-Elemente auf 20 Pixel. So haben wir gleichzeitig einen gewissen Abstand
zu den folgenden <label>. Allerdings müssen wir aus denen wieder Inline-Elemente machen. Und dafür reicht ein
float: none; völlig aus.
float: none;???
Einige von euch werden sich jetzt fragen, warum das ausreicht. Daher eine kurze Erläuterung. Wenn zum Beispiel auf ein Inline-Element
ein float: left; gelegt wird, so verwandelt es sich automatisch in ein Blockelement. Hebt man das float
durch ein none wieder auf, so wird aus dem vormaligen Block- wieder ein Inline-Element. Ein display: inline;
dagegen würde nur ein vorheriges display: block überschreiben, aber kein float. Kapiert? Dann probiert es
mal aus.
Zu guter Letzt legen wir fest, dass das <span> zu einem Blockelement mit einem Abstand nach unten wird.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt