CSS Garden

Tipps und Tricks über Stylesheets

 

    Web Server's Default Page
    Web Server's Default Page

    This page is generated by Plesk, the leading hosting automation software. You see this page because there is no Web site at this address.

    You can do the following:

    • Create domains and set up Web hosting using Plesk.
    What is Plesk

    Plesk is a hosting control panel with simple and secure web server and website management tools. It was specially designed to help IT specialists manage web, DNS, mail and other services through a comprehensive and user-friendly GUI. Learn more about Plesk.

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

 

© 1997 - 2019