Formular ohne Tabellen
In meinem Job stand ich vor dem Problem, eine Intranetlösung mit einer Seite zu versehen, welche Steuerelemente beinhaltet die sich in mehreren Zeilen immer wiederholen.
Ein formatieren mit Hilfe von Tabellen kam natürlich nicht in Frage und so habe ich eine CSS-Lösung erarbeitet. Nachfolgend ein Beispiel mit der Technik die dazu verwendet wurde:
Zuerst wird ein "div" erstellt welcher sämtliche Steuerelemente einer Zeile beinhaltet.
div.zeile
{
clear: both;
padding-top: 5px;
}
Anschliessend werden "div's" für jedes Steuerelement in der Zeile erstellt.
div.zeile span.label
{
float: left;
width: 120px;
}
div.zeile span.txtbox
{
float: left;
width: 160px;
}
div.zeile span.bttn
{
float: left;
width: 60px;
}
Und hier der HTML-Code.
<body> <div id="box"> <h1>Formular</h1> <div class="zeile"> <span class="label">Name:</span> <span class="txtbox"><input type="text" width="160"/></span> <span class="bttn"><input type="button" name="Hilfe" value="Hilfe" /></span> </div> <div class="zeile"> <span class="label">Vorname:</span> <span class="txtbox"><input type="text" width="160"/></span> <span class="bttn"><input type="button" name="Hilfe" value="Hilfe" /></span> </div> <div class="zeile"> <span class="label">E-Mail:</span> <span class="txtbox"><input type="text" width="160"/></span> <span class="bttn"><input type="button" name="Hilfe" value="Hilfe" /></span> </div> <div class="zeile"> <span class="label">Kommentar:</span> <span class="txtbox"><textarea cols="16" rows="10"></textarea></span> <span class="bttn"><input type="button" name="Hilfe" value="Hilfe" /></span> </div> </div> </body>
Original Code-Konzept von Eric Meyer
Zurück