Zweispaltige Formulare ohne Tabellen
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Ein eigentlich einspaltiges Formular soll in zwei Spalten dargestellt werden (siehe folgende Abbildung).
Abbildung: Das Formular in der einspaltigen Darstellung.
Lösung
Unterteilen Sie das Formular zu Beginn mit div-Elementen in zwei Teile:
<form id="regform" name="regform" method="post" action="/regform.php">
<div id="register">
<h4>Register</h4>
<label for="fmlogin">Benutzername</label>
<input type="text" name="fmlogin" id="fmlogin" />
<label for="fmemail">E-Mail</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmemail2">E-Mail bestätigen</label>
<input type="text" name="fmemail2" id="fmemail2" />
<label for="fmpswd">Passwort</label>
<input type="password" name="fmpswd" id="fmpswd" />
<label for="fmpswd2">Passwort bitte bestätigen</label>
<input type="password" name="fmpswd2" id="fmpswd2" />
</div>
<div id="contactinfo">
<h4>Kontaktinformationen</h4>
<label for="fmfname">Vorname</label>
<input type="text" name="fmfname" id="fmfname" />
<label for="fmlname">Nachname</label>
<input type="text" name="fmlname" id="fmlname" />
<label for="fmaddy1">Adresse 1</label>
<input type="text" name="fmaddy1" id="fmaddy1" />
<label for="fmaddy2">Adresse 2</label>
<input type="text" name="fmaddy2" id="fmaddy2" />
<label for="fmzip">Postleitzahl</label>
<input type="text" name="fmzip" id="fmzip" />
<label for="fmcity">Stadt</label>
<input type="text" name="fmcity" id="fmcity" />
<label for="fmstate">Bundesland</label>
<input type="text" name="fmstate" id="fmstate" size="5" />
<input type="submit" name="submit" value="Abschicken" class="submit" />
</div>
</form>Danach legen Sie mit Hilfe der Eigenschaft display fest, dass die Elemente input und label als Blockelemente dargestellt werden sollen:
label {
margin-top: .33em;
display: block;
}
input {
display: block;
width: 250px;
}Die zweite Formularspalte wird erzeugt, indem das erste div-Element (mit der ID register) als links angeordneter Float definiert wird (siehe nächste Abbildung):
Abbildung: Die Formularelemente werden in zwei Spalten dargestellt.
Für den Fall, dass die zweite Spalte kürzer als die erste ist, sollten Sie auf der linken Seite einen genügend großen Innenabstand festlegen (siehe nächste Abbildung):
#contactinfo {
padding-left: 275px;
}
Abbildung: Das fertige zweispaltige Formular.
Diskussion
Durch die Verwendung der Eigenschaft float können Designer zweispaltige Formulare anlegen. Das Hauptproblem bei diesem Ansatz besteht darin, dass die rechte Spalte möglicherweise länger ist als die linke. Der Umbruch der Formularelemente kann Benutzer möglicherweise verwirren. Durch die Anpassung des Innenabstands an die Höhe der ersten Spalte können Designer gleichmäßige Spaltenhöhen erreichen.
Siehe auch
Den Abschnitt Seitenlayouts zu weiteren Techniken für das Layout der Elemente einer Webseite.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln