Profitipps zu Webseitengestaltung mit CSS

1 5

Mehrzeilige Textfelder: Bei diesen Formularelementen stimmt die verwendete Schriftart nicht.

Tipp 1: Eingebene Textfeld-Zeichen formatieren

Formulare fragen recht unterschiedliche Informationen ab. Man findet Sie in nahezu jeder Website. Doch immer wieder fällt auf, dass die von Benutzern eingegebenen Zeichen nicht dem allgemeinen Erscheinungsbild entsprechen.

Der sichtbare Text sollte mit dem sonst üblichen Design der Website übereinstimmen. Dabei sind allgemeine Schriftattribute häufig für das body-Element definiert: So bestimmen Sie mit diesem Tag-Selektor die Schriftattribute für die Seite: body {font: 1em Arial, Helvetica, sans-serif;}. In den meisten Webbrowsern werden jedoch die in einzeiligen Textfeldern eingegebenen Zeichen etwas kleiner als festgelegt angezeigt.

Bei mehrzeiligen Textfeldern sind die Zeichen zwar gleich groß, werden jedoch nicht in der gewünschten Schriftart, sondern in Courier dargestellt.

Mit dem folgenden Listing beheben Sie diese unschönen Darstellungsproblematiken und realisieren einheitliche Schriftattribute. Dabei verwenden Sie die gleiche CSS-Deklaration wie zuvor beim body-Element. Als Element-Selektor geben Sie die HTML-Tags input für einzeilige Textfelder und textarea für mehrzeilige Formularelemente an: input, textarea {font: 1em Arial, Helvetica, sans-serif;} Damit erhalten kritische Formularelemente also eine separate CSS-Regel. Selbstverständlich können Sie diese mit der CSS-Regel für das body-Element kombinieren.

2 5

Spaltenlayout mit CSS: Die linke Spalte enthält die Bezeichner, die rechte die Formularelemente.

Tipp 2: Spaltenlayout ohne Tabelle

Formularelemente werden häufig rechts neben deren Beschriftung mit einem traditionellen Tabellenlayout angeordnet. Dieses müssen Sie nicht mit HTML definieren. Standardkonform geben Sie auch dieses Layout mit CSS an.

Zunächst überprüfen Sie den HTML-Code der eingefügten Formularelemente. In einem barrierefreien Formular verbindet das label-Tag Beschriftung und Element.

<label for="name">Ihr Name</label>
<input name="name" type="text" id="name" size="30" />

Dieses HTML-Element benötigen Sie nun für die linke Ausrichtung der Beschriftung. Hierzu definieren Sie eine entsprechende CSS-Regel mit der gewünschten Breite. Im folgenden Listing ist diese erste Spalte 180 Pixel breit. Für die linksbündige Ausrichtung geben Sie das float-Attribut mit dem Wert left an. Das jeweilige Textfeld wird nun automatisch im gewünschten Abstand rechts daneben angeordnet.

label {
width: 180px;
float: left;
}

3 5

Gleich lange Eingabefelder: Das CSS-Attribut width bestimmt die Breite dieser Textfelder.

Tipp 3: Breite verschiedener Textfelder angleichen

In HTML bestimmt die Anzahl sichtbarer Zeichen die Breite von ein- und mehrzeiligen Textfeldern. Da diese jedoch durch unterschiedliche Attribute festgelegt werden, sind solche Formularelemente in den meisten Browsern standardmäßig nicht gleich breit. Mit CSS lösen Sie diese unschöne Darstellungsproblematik.

Im HTML-Code bestimmt das size-Attribut die Breite einzeiliger Textfelder. Dagegen gibt cols die Breite von mehrzeiligen Eingabefeldern an. Diese Einstellungen werden ignoriert, wenn Sie eine entsprechende CSS-Regel schreiben.

<input name="name" type="text" id="name" size="30" />
<textarea name="nachricht" id="nachricht" cols="30"
rows="5"></textarea>

Damit haben ein- wie mehrzeilige Textfelder in HTML unterschiedliche Eigenschaften. Damit nun beide Feldarten gleich breit sind, definieren Sie eine Style-Sheet-Anweisung für die Elemente input und textarea. Alternativ können Sie auch Klassen- oder ID-Selektoren festlegen und den Formularfeldern entsprechend zuweisen. In der Deklaration geben Sie die gewünschte Breite mit dem width-Attribut an. Im folgenden Listing sind beide Textfelder 250 Pixel breit: input, textarea { width: 250px; }.

4 5

Hervorhebung der Senden-Schaltfläche: Die auffällige Gestaltung zieht den Blick des Anwenders auf die richtige Schaltfläche.

Tipp 4: Buttons in Formularen gestalten

Meist befinden sich die beiden Schaltflächen zum Verschicken oder Löschen der Formulardaten nebeneinander unter dem Formular. In der Eile drücken Anwender oft die falsche Schaltfläche und entfernen damit ungewollt die Daten. Mit unterschiedlichen CSS-Formatierungen beugen Sie der Verwechslungsgefahr vor und gestalten das Formular interessanter.

Schaltflächen werden mit dem input-Tag in den Quelltext eingebunden. Dabei definiert das type-Attribut submit, dass die eingegebenen Daten versendet werden. Dagegen ist der Wert reset für das Löschen der Informationen und damit für das Zurücksetzen des Formulars verantwortlich. Die beiden folgenden Listingszeilen geben den HTML-Code wieder, um Formulardaten zu verschicken oder das Formular mitsamt eingetragener Daten zurückzusetzen.

<input type="submit" id="senden" value="Senden" />
<input type="reset" id="loeschen" value="Löschen" />

Über eine ID ist die jeweilige Schaltfläche eindeutig identifizierbar. Damit können Sie entsprechende CSS-Regeln definieren und einer Schaltfläche zuweisen. Im CSS-Code wird hierfür der Selektor #senden definiert. Mit folgendem Listing entfernen Sie Standardränder und sorgen für einen dreidimensionalen Effekt. Zudem färbt das Style Sheet den Button mit dem Attribut background-color ein.

#senden {
background-color: #C06;
border-top: none;
border-left: none;
border-right: 3px solid #003;
border-bottom: 3px solid #003;
}

5 5

Profitipps zu Webseitengestaltung mit CSS

Tipp 5: Scrollbalken dem Seitendesign anpassen

Die Laufleisten am rechten und unteren Browser-Rand können mit CSS verändert und den Farben der Webseite angepasst werden. Auch mehrzeilige Textfelder oder einzelne div-Container mit entsprechendem overflow-Attribut können Sie vergleichbar formatieren. Allerdings funktioniert dies nur im Internet Explorer und in neueren Opera-Versionen.

Die unterschiedlichen Bestandteile der Scrollbalken sind ungleich eingefärbt, so dass ein dreidimensionaler Effekt entsteht. Diese Standard-Kolorierung ändern Sie mit folgenden CSS-Attributen. Dabei wird das Attribut scrollbar-base-color von den übrigen Eigenschaften überschrieben.

Den gewünschten Farbwert geben Sie wie gewohnt als Hexadezimalcode oder mit dem Farbnamen an. Alternativ können Sie auch den gewünschten absoluten oder relativen Farbanteil bestimmen. Das Listing ändert die Scrollbalken einer CSS-Box. Diese werden bei umfangreichem Text angezeigt, der nicht in den Container passt.

#scrollen
{
width: 200px;
height: 50px;
overflow: scroll;
scrollbar-base-color: #FFF ;
scrollbar-track-color: yellow;
scrollbar-face-color: orange;
scrollbar-3dlight-color: red;
scrollbar-darkshadow-color: blue;
scrollbar-highlight-color: #FFF;
scrollbar-shadow-color: #FFF;
scrollbar-arrow-color: #FFF;
}
...
<div id="scrollen">
Diese Box hat etwas andere Scrollbalken.
</div>