HTML / CSS - Praxistutorial 4 - Allgemeine Formatierungen Teil 1
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. Wichtig
Detaillierte Erläuterungen
... zu 08/15-Anweisungen wird es ab sofort nicht mehr geben. Das solltet ihr mittlerweile können. Ich beschränke meine Hinweise nur noch auf Besonderheiten, die Formulare direkt betreffen.
3. <fieldset>
Die Formatierung ist eigentlich ein Kinderspiel. Wenn es mal wieder den Internet Explorer nicht gäbe! Aber dazu später mehr.
fieldset
{
border: 1px solid #e5e1a9;
background-color: #fffde3;
padding: 10px;
margin-bottom: 10px;
}
4. <legend>
legend
{
color: #b15002;
font-weight: bold;
padding: 2px 5px;
background-color: #e5e1a9;
width: 200px;
}
Ein Hinweis
Die Angabe width: 200px; bewirkt in alten Firefox-Versionen gar nichts. Die orientieren sich ausschließlich am
padding-Wert und zieht die <legend>-Element nur so weit, dass der Text entsprechend hineinpasst.
Da die uns aber nicht mehr interessieren, spielt das auch keine Rolle.
5. <p>
Hier erhöhen wir den Zwischenabstand der einzelnen Elemente bei den Abschnitten, wo wir schön mit Absätzen gearbeitet haben, also bei "Adresse", "Anstellung" und "Kenntnisse".
p
{
margin-bottom: 5px;
}
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt