HTML / CSS - Praxistutorial 4 - Das Formular

1. Die Abschnitte

2. Die Formatierung

Da das Formular als Ganzes bekanntlicherweise zu den Blockelementen gehört, benötigen wir hier nicht sehr viel für einen ansprechenden Grundaufbau.


form
{
  width: 900px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #000;
  background-color: #f6f6f6;
}

Eigentlich sollte ich hierzu nichts mehr sagen, da ich das alles schon in den ersten beiden Tutorials erläutert habe. Ich mache es dennoch trotzdem mal. Aber nur kurz.

Erläuterung

Also wir legen mit width: 900px; eine entsprechende Breite fest. So ist garantiert, dass bei einer Fensterbreite des Browsers von 1024 Pixeln nicht horizontal gescrollt werden muss. Dann weisen wir dem Formular einen Außenabstand nach oben und unten zu. Das ist der erste Wert im margin, also die 20px. Damit klatscht unser Formular nicht oben und unten die Leisten an. Der zweite (auto) sorgt für eine horizonale Zentrierung.

Beim Innenabstand (padding) sind wir mit 20px ebenfalls sehr großzügig. Dann noch einen dünnen schwarzen Rahmen drum herum mit border: 1px solid #000; und zum Abschluss gibt es noch ein sanftes Grau als Hintergrundfarbe (background-color: #f6f6f6;).

Frage

Wie breit ist nun der sichtbare(!) Teil unseres Formulars? Na?

3. Die Überschrift

... nehmen wir an dieser Stelle auch noch mit, da sie keinem der folgenden Formularelemente untergeordnet ist.


h1
{
  font-size: 1.1em;
  color: #b15002;
  border: 1px solid #000;
  background-color: #dadada;
  padding: 10px;
  margin-bottom: 10px;
}

Erläuterung

Also dazu sage ich wirklich nichts mehr. Bis auf die Schriftgröße. Denn die wird relativ zu den 13 Pixeln in body-Anweisung vergrößert. Wer hier tief in die Materie einsteigen will, sollte Typographen oder Schriftsetzer fragen. Die können euch das ganz genau erklären.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt