CSS Gestaltungselemente


Durch eine "Cascading Style Sheet" (CSS) Datei können Sie das Aussehen der Homepage-Programme beeinflussen.
Eine Beschreibung der Gestaltungsmöglichkeiten finden Sie beispielsweise in der externen SELFHTML-Dokumentaton.
Die HTML-Tags, die in den Homepage-Programmen Verwendung finden, sind zum einen die üblichen HTML-Tags, wie:
  • Gesamtdokument: <body>
  • Überschrift: <h2>
  • Tabellen: <table>

Zusätzlich wird zur Gestaltung die Klasse ".publist" in den Überschriften, sowie in den Tabellenzellen eingesetzt. Sie kann beliebig ausgeprägt werden.
In den Eingabemasken finden folgende CSS-Klassen Verwendung:
  • edit
    Dies ist die Basisklasse für die Eingabefelder
  • publist
    Listenelemente
  • pubhead
    Listenüberschriften
  • pubbold
    Hervorzuhebende Zellen einer Tabelle (fett)

Folgende Klassen werden additiv den Feldern hinzugefügt und werden auch in Kombination verwendet:

  • mgvo-ro
    Linksbündige, read-only Felder
  • mgvo-mf
    Linksbündige Felder mit Musseingaben
  • mgvo-ar
    Rechstbündige Felder
  • edit_low
    Zurück gesetzte Links

Spezielle Klassen:

  • suchbox
    Bei der Eingabe einer PLZ sucht das System im Hintergrund den passenden Ort dazu und bieten ihn in einer Suchbox an. Die Orte erhalten die Darstellungklasse "optlist".


Folgende Definitionen haben sich hierfür bewährt:

.edit          { font-size:8pt; }
.mgvo-ro { color: #505050; background-color: #EEEEEE; }
.mgvo-mf { background-color: #FDEAEA; }
.mgvo-ar { text-align: right; }

a.edit_low:link { font-weight:normal; color:#909090; text-decoration:none; }
a.edit_low:visited { font-weight:normal; color:#909090; text-decoration:none; }
a.edit_low:active { font-weight:normal; color:#909090; }
a.edit_low:hover { font-weight:normal; color:red; }

.suchbox { position:fixed; font-size:8pt;
background-color:#ECECEC; text-align:left;
border:1px solid #A0A0A0; z-index:2;
padding-left:3px; display:none; }
a.optlist:link { font-weight:normal; color:black; text-decoration:none; }
a.optlist:visited { font-weight:normal; color:black; text-decoration:none; }
a.optlist:active { font-weight:normal; color:black; text-decoration:none; }
a.optlist:hover { font-weight:normal; color:#3D5A96; text-decoration:none; }


Beispielsweise erzeugt der folgende Eintrag in einer CSS-Datei einen blauen Hintergrund in den Tabellenzellen:

.publist { background-color:blue; }

Das folgende Beisiel legt die Schriftgröße und Schriftart der Überschrift fest:

h2 { font-family:Tahoma; font-weight:bold; font-size:12pt; }