• News
  • Ratgeber
  • Vergleiche
  • Tests
  • Business & IT
  • Home
  • Bildergalerie
  • Profitipps zu Webseitengestaltung mit CSS

Galerie

Profitipps zu Webseitengestaltung mit CSS

15.11.2011 von Daniela Schrank

image.jpg
© PC Magazin
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 üblichen Design der Website übereinstimmen. Dabei sind allgemeine Schriftattribute häufig für das body-Element definiert: So bestimmen Sie mit diesem Tag-Selektor die Schriftattribute fü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 gewü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 für einzeilige Textfelder und textarea fü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 für das body-Element kombinieren.

Anzeige
image.jpg
© PC Magazin
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 müssen Sie nicht mit HTML definieren. Standardkonform geben Sie auch dieses Layout mit CSS an.


Zunächst überprüfen Sie den HTML-Code der eingefü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 für die linke Ausrichtung der Beschriftung. Hierzu definieren Sie eine entsprechende CSS-Regel mit der gewünschten Breite. Im folgenden Listing ist diese erste Spalte 180 Pixel breit. Für die linksbündige Ausrichtung geben Sie das float-Attribut mit dem Wert left an. Das jeweilige Textfeld wird nun automatisch im gewünschten Abstand rechts daneben angeordnet.

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

Anzeige
image.jpg
© PC Magazin
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 fü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 gewünschte Breite mit dem width-Attribut an. Im folgenden Listing sind beide Textfelder 250 Pixel breit: input, textarea { width: 250px; }.

Anzeige
image.jpg
© PC Magazin
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 drü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 für das Löschen der Informationen und damit für das Zurücksetzen des Formulars verantwortlich. Die beiden folgenden Listingszeilen geben den HTML-Code wieder, um Formulardaten zu verschicken oder das Formular mitsamt eingetragener Daten zurü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 hierfür der Selektor #senden definiert. Mit folgendem Listing entfernen Sie Standardränder und sorgen fü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;
}

Anzeige
image.jpg
© PC Magazin
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 übrigen Eigenschaften überschrieben.

Den gewünschten Farbwert geben Sie wie gewohnt als Hexadezimalcode oder mit dem Farbnamen an. Alternativ können Sie auch den gewü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>

image.jpg
image.jpg
image.jpg
image.jpg
image.jpg
  • image.jpg
    Mehrzeilige Textfelder: Bei diesen Formularelementen stimmt die verwendete Schriftart nicht.
  • image.jpg
    Spaltenlayout mit CSS: Die linke Spalte enthält die Bezeichner, die rechte die Formularelemente.
  • image.jpg
    Gleich lange Eingabefelder: Das CSS-Attribut width bestimmt die Breite dieser Textfelder.
  • image.jpg
    Hervorhebung der Senden-Schaltfläche: Die auffällige Gestaltung zieht den Blick des Anwenders auf die richtige Schaltfläche.
  • image.jpg
    Profitipps zu Webseitengestaltung mit CSS
Bild Vollbildansicht
[X] 5
[Titel]
kaufen
Anzeige
[Copyright / Quelle]
Galerie scrollen
Weiter zur Startseite  

Meistgelesen

Tipp und Tricks für Ihren Geschirrspüler

Die sechs größten Fehler bei der Spülmaschinen-Nutzung

Tipps & Tricks

Windows 10 Autostart: Programme hinzufügen und entfernen

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien im März 2023

Playstation-Spiele kostenlos

PS Plus: Gratis-Spiele im März 2023

Desktop-Prozessoren

CPU-Kaufberatung 2023: AMD vs. Intel im Vergleich

Die neuen Ausgaben

PC Magazin Super Premium 04-2023

Die neue Ausgabe ist da

Ausgabe 04/2023 jetzt online bestellen

!Windows fit für 2023, Rubber Ducky in Version 2.0, Vergleichstest von Grafikkarten, Mehr Geld: Digital sparen u.v.m.

Aktuelle Gutscheine

Gutscheine

Eneba – Rabattcode für Spiele, PSN etc.

Gutscheine

Galaxus – Smartphones, Haushalt, u.v.m.

Gutscheine

Lieferando - Lieferservice mit Rabatt

Gutscheine

Aktuelle Rabattcodes, Coupons, Angebote

Lohnt es sich?

Amazon BlitzangeboteAktion Overlay

Hardware, Software und mehr

Amazon-Angebote: Laptops, Meta-VR-Brillen, Office, Games und…

!Die aktuellen Highlights der Amazon-Angebote sind heute: Laptops, Meta-VR-Brillen, Office, Games und mehr.

Tests & Kaufberatung

HDR-Gaming-Displays

HDR-Gaming-Monitore im Vergleich: Viewsonic vs. Philips

Wildkamera

Braun Scouting Cam Black 200 Mini im Test
70,0%

PC-Soundbar

Mackie CR2-X Bar Pro im Praxis-Check

Aktive PC-Lautsprecher

Mackie CR2-X Cube im Praxis-Check

Ergonomische Eingabelösung

Contour RollerMouse Pro im Test

Immer aktuell informiert

Brief

Jetzt bestellen!

Kostenlose Newsletter

!Newsletter

Aktuelle Ratgeber

Release, Story, Gameplay & mehr

Starfield: Alle Infos zu Bethesdas Weltraum-RPG

Hardware, Software und mehr

Amazon-Angebote: Laptops, Meta-VR-Brillen, Office, Games und…

Jahresübersicht und Vorschau

Netflix 2023: Start-Termine für neue Serien und Originals

Preis-Leistungsangebote

Die besten Kühlschrank-Angebote

Blizzards neuer Hit?

Diablo 4: Alle Infos zu Release, Story, Klassen & mehr
Anzeige

Zum Seitenanfang
  • News
    • Alle News
  • Ratgeber
    • Windows
    • Sicherheit
    • Hardware
    • Software
    • Heimkino
    • Heimvernetzung
    • Gaming
    • Alle Ratgeber
  • Vergleiche
    • PC
    • Heimkino
    • Software
    • Gaming
    • Heimvernetzung
    • Alle Vergleiche
  • Tests
    • Hardware
    • Software
    • Heimkino
    • Heimvernetzung
    • Gaming
    • Bestenlisten
    • Alle Tests
  • Business & IT
    • IT-Hardware
    • IT-Software
    • Alle B2B-Themen
  • Downloads
    • Top-Downloads
    • Neuzugänge & Updates
    • Alle Downloads
  • Specials
    • IFA
    • Themenseiten
    • Games
    • Kachel Chaos Spiel
    • Kartenchaos
    • Kartenchaos Classic
    • Gewinnspiele
    • Archiv
  • Service
    • Abo-Shop
    • Kontakt
    • Newsletter
    • Bildergalerien
    • Gutscheine
  • Abos
  • Newsletter
  • RSS
  • Archiv
  • Datenschutz
  • Mediadaten
  • Kontakt
  • Impressum
© 2023 WEKA Media Publishing GmbH. Alle Rechte vorbehalten.