• 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  

Die neue Ausgabe

PC Magazin 02-2023

Die neue Ausgabe ist da

Ausgabe 02/2023 jetzt online bestellen

!Windows immer wie neu, Kaufberatung Notebooks, Tschüss Twitter, hallo Mastodon, Kostenloses Heimkino u.v.m.

Zum Kiosk in Ihrer Nähe

MyKiosk: So finden Sie einen Kiosk in Ihrer Nähe, der Ihr Lieblings-Magazin führt

Service

Haben Sie das neue PC Magazin schon?

!MyKiosk: So finden Sie einen Kiosk in Ihrer Nähe, der Ihr Lieblings-Magazin führt

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: Smart TVs, Haushaltsgeräte von Samsung und…

!Die aktuellen Highlights der Amazon-Angebote sind heute: Smart TVs, Haushaltsgeräte von Samsung und Miele, Reiskocher und mehr

Tests & Kaufberatung

Pro-Controller für PS5

DualSense Edge Wireless-Controller im Test – Vielseitiges…

Thermo-Fotodrucker

Canon Selphy CP1500 im Test
95,0%

Kabelloses Headset

Logitech Zone Vibe 100 Headset im Test

Laserdrucker

Kyocera Ecosys M3655idn im Test

Immer aktuell informiert

Brief

Jetzt bestellen!

Kostenlose Newsletter

!Newsletter

Anzeige

Zum Seitenanfang
  • News
  • Ratgeber
    • Windows
    • Sicherheit
    • Online
    • Hardware
    • Software
    • Office
    • Heimkino
    • Fotografie
    • Heimvernetzung
    • Alle Ratgeber
  • Vergleiche
    • PC
    • Heimkino
    • Fotografie
    • Alle Vergleiche
  • Tests
    • Hardware
    • Software
    • Netzwerk
    • Heimkino
    • Kameras & Zubehör
    • Heimvernetzung
    • Bestenlisten
    • Alle Tests
  • Business & IT
    • IT-Praxis
    • IT-Hardware
    • IT-Software
    • Alle B2B-Themen
  • Downloads
    • Top-Downloads
    • Neuzugänge & Updates
    • Alle Downloads
  • Specials
    • IFA
    • Cebit
    • 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.