HTML / CSS - Praxistutorial 4 - Mitteilung und Buttons
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. Ihre Mitteilung
Hier wollen wir mal ein wenig Ordnung in das bisherige Chaos bringen. Dazu reichen zwei kleine Anweisungen aus.
div.clear label
{
float: left;
width: 455px;
}
div.clear span
{
width: 130px;
float: left;
}
Erläuterung
Mit float: left;
sorgen wir dafür, dass der folgenden erläuternde Text rechts neben der <textarea>
.
Und durch width: 455px;
erreichen wir, dass besagter Absatz horizontal zu den <label>
-Elementen aus
dem Abschnitt "Kenntnisse" steht.
Leider ist noch der Text "Ihre Nachricht" unten an die <textarea>
angeklatscht. Den Mißstand (ich schreibe das
aus Prinzip nicht mit drei s!) beseitigen wir mit der zweiten Anweisung. Das haben wir in der Form ja schon mehrfach gemacht.
3. Die Fomularbuttons
Was jetzt kommt, ist eigentlich Pillepups, daher verzichte ich auch auf jedwede Erläuterung. Schaut es euch mal in Ruhe an, spielt
ein wenig damit herum dann versteht ihr es sicherlich. Und bitte vergesst nicht die Klassenzuweisung in der formular.htm
!
Das macht ihr mal schön selber.
p.buttons
{
background-color:#DADADA;
text-align: center;
border: 1px solid #000;
padding: 10px;
}
p.buttons input
{
text-transform: uppercase;
font-size: 0.9em;
font-weight: bold;
padding: 1px 1.0em 1px 1.0em;
background-color: #f6f6f6;
border-left: 1px solid #f6f6f6;
border-top: 1px solid #f6f6f6;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
width: 150px;
color: #b15002;
}
4. Ein erstes Fazit
Sieht doch ganz nett aus, unser Formular. Valider Code, keine Layouttabellen, syntaktisch korrekt ausgezeichnet und der Hover-Effekt
bei den <select>
-Feldern funktioniert auch. Leider kommt jetzt der große Schock. Denn nun werden wir uns das mal
in anderen Browsern ansehen.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt