HTML / CSS - Praxistutorial 4 - Allgemeine Formatierungen Teil 2
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. <label>
label
{
float: left;
width: 130px;
}
Erläuterung
Zunächst mal machen wir aus dem ursprünglichen Inline-Element <label> ein Blockelement. Das geschieht automatisch, wenn man ein
float einsetzt. Die Angabe display: block ist also nicht vonnöten. Das benötigen wir, um eine entsprechende Breitenangabe
(width: 130px;) setzen zu können. Denn die wirkt nur bei Blockelementen. Gut, an manchen Stellen sieht es echt sch***e aus, aber dazu
komme ich später.
3. <input>, <select>, <textarea>
input, select, textarea
{
width: 290px;
background: #f6f6f6;
border: 1px solid #000;
}
Erläuterung
Im Gegensatz zu etlichen "klassischen" Inline-Elementen ist es bei diesen möglich, eine Breitenangabe zu setzen, ohne sie in ein Blockelement zu
verwandeln. Leider wirkt sich das auch auf <input>-Elemente vom Typ radio aus. Die ändern zwar nicht ihr Aussehen,
nehmen aber trotzdem den Platz ein, den wir in der Breitenangabe vorgegeben haben. Auf die Lösung müsst ihr allerdings noch ein wenig warten.
4. <optgroup>
optgroup
{
background-color: #e5e1a9;
color: #b15002;
font-style: normal;
}
Erläuterung
Bei <optgroup>-Elementen setzen Browser als Standardwert eine fette kursive Schrift. Das unterbinden wir mit font-style:
normal;. Allerdings gibt es da ein paar Unterschiede, doch die Feinheiten dazu liefere ich später.
5. <option>
option
{
background-color: #f6f6f6;
padding-left: 5px;
color: #000;
}
option:hover
{
background-color: #e5e1a9;
}
Erläuterung
Hier sind eigentlich nur zwei Hinweise von Bedeutung. Zunächst mal rücken wir den Text mittels padding-left: 5px; ein wenig ein. Und dann
bauen wir noch einen schönen Hover-Effekt mit option:hover ein. Später werden wir dann überprüfen, ob auch alle Browser damit klar kommen.
Sieht ja alles in allem schon recht nett aus. Und den letzten Schliff bekommt unser Formular nun.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt