HTML / CSS - Praxistutorial 4 - Lösungsmöglichkeiten
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
- Allgemeines Lösungsmöglichkeiten
- Hacks für den Internet Explorer
- Die letzte Rettung
2. Möglichkeiten
Wie ich schon zu Beginn sagte, gibt es diesmal keinen kompletten Lösungscode. Ich konzentriere mich hier nur auf die, die man relativ schnell beseitigen kann. Kommen wir nun zu denen, wo es auch ohne spezielle Hacks funktioniert.
3. Rahmen um <radio>-Elemente entfernen
Die einfachste Lösung liefe über den so genannten Attributselektor.
input[type="radio"]
{
border: none;
background: none;
}
Leider kommt damit der IE6 nicht klar, so dass man hier den Weg über eine Klasse beschreiten muss.
<input type="radio" ... class="radio" />
...
input.radio
{
background: none;
border: none;
}
4. Upload-Feld "Lebenslauf" im Opera richtig setzen
Wie ich im vorherigen Abschnitt schon sagte, hat der 10.5 Probleme mit dem Aufbau des <label>-Elements. Darum sollte
man den gängigen Weg gehen
<p>
<label>Anschreiben</label>
<input type="file" name="anschreiben" maxlength="1048576" />
</p>
<p>
<label>Lebenslauf</label>
<input type="file" name="lebenslauf" maxlength="1048576" />
</p>
An diesem Beispiel können wir also sehen, dass es keine so gute Idee ist, alle Elemente direkt in ein <label> zu
packen. Stattdessen sollte man obige Variante konsequent nutzen. Allerdings muss noch die folgende CSS-Anweisung entfernen.
fieldset.daten label
{
float: none;
}
5. Die unterschiedlichen Upload-Felder
Man nimmt nur Formatierungen in den <fieldset>-Abschnitten vor, in denen kein "Upload"-Feld auftaucht. Dazu muss man
den ersten beiden eine Klasse verpassen
<fieldset class="adresse">...</fieldset>
<fieldset class="anstellung">...</fieldset>
und die vormals allgemeinen Anweisungen an die entsprechenden Überelemente binden. Was die Sache mit input.plz und
input.ort angeht, einfach an die Spezifität denken.
fieldset.adresse input, fieldset.adresse select, div.clear textarea
{
width: 290px;
background: #f6f6f6;
border: 1px solid #000;
}
...
fieldset.adresse input.plz
{
width: 40px;
margin-right: 5px;
}
fieldset.adresse input.ort
{
width: 238px;
}
Ein wichtiger Hinweis
Durch die bisherigen Anpassungsmaßnahmen hat sich natürlich wieder einiges in der Darstellung geändert. Aber darum kümmert ihr euch gefälligst selber. Ist außerdem eine schöne Übung.