Hauptmenü

Untermenü

HTML / CSS - Praxistutorial 4 - Mitteilung und Buttons

1. Die Abschnitte

2. Ihre Mitteilung

Hier wollen wir mal ein wenig Ordnung in das bisherige Chaos bringen. Dazu reichen zwei kleine Anweisungen aus.


div.clear label
{
  floatleft;
  width455px;
}

div.clear span
{
  width130px;
  floatleft;    
}

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-aligncenter;
  border1px solid #000;
  padding10px;
}

p.buttons input 
{
  text-transformuppercase;
  font-size0.9em;
  font-weightbold;
  padding1px 1.0em 1px 1.0em;
  background-color#f6f6f6;
  border-left1px solid #f6f6f6;
  border-top1px solid #f6f6f6;
  border-right1px solid #000;
  border-bottom1px solid #000;
  width150px;
  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