Hauptmenü

Untermenü

HTML / CSS - Praxistutorial 4 - Allgemeine Formatierungen Teil 2

1. Die Abschnitte

2. <label>


label
{
  
floatleft;
  
width130px;
}

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>


inputselecttextarea
{
  
width290px;
  
background#f6f6f6;
  
border1px 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-stylenormal;
}

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-left5px;
  
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