Dr. O. Hoffmann
Aus Beispielen lernen wir wie aus dem Leben - nie alles.
Olaf Hoffmann
Die hier aufgeführten Beispiele sind so gehalten,
daß im eigentlichen Quelltext gar keine Formatierung mehr steht
und Größenangaben erfolgen nur noch relativ.
Es wird durchgehend der Maßstab 'em'
verwendet und in wenigen Fällen gibt es Angaben in
Prozent - es wird also die Voreinstellung vom Darstellungsprogramm übernommen -
ich hatte zum meinen CSS-Anfängen gar nicht gedacht, daß das so
hervorragend funktioniert, aber das erleichtert die Arbeit wirklich ganz
enorm und für jeden Nutzer dürfte das gegenüber dem
Pixelgestrampel auf anderen Seiten ein Geschenk, ja gar eine Offenbarung in
Sachen Stilvorlagen sein. Wohlmöglich lag meine einst etwas
skeptische Einstellung gegenüber CSS gerade an diesen
schlechten, pixelbasierten Seiten, die nie sinnvoll funktionieren
und immer irgendwie zerfleddert aussehen - doch wie hier zu sehen
ist, geht es zum Glück für CSS auch ganz anders, womit man
sich auch der eigentlichen Essenz von CSS und XHTML annähert.
Lediglich bei einer alten Version des internet explorer scheint es wieder einen betriebssysteminternen
Fehler von microsoft zu geben, der die voreingestellte Schriftgröße
bei anderer Gelegenheit nicht reproduzierbar auf winzig stellt -
das kann aber jeder Nutzer selbst wieder in eine brauchbare Voreinstellung bringen.
Das ist aber ohnehin ein Mangel des Programmes und hat nichts mit dem
eigentlichen Thema zu tun.
Um allzu großen Anzeigeblödsinn bei Darstellungsprogrammen der vierten
Generation (Netscape4, msie 4/5/6) zu vermeiden,
bekommen diese eine besondere Stilvorlage zu sehen (Typ 0) -
der enthält keine kritischen CSS 2 Befehle wie zum Beispiel zur
Positionierung mehr, die Anordnung ist also linear wie sie auch ohne
Stilvorlage wäre. Erreicht wird das durch eine simple Abfrage
per PHP, ob am Anfang der als user-agent angebotenen
Zeichenkette die Zeichenfolge 'Mozilla/4.' vorkommt.
Das ist insofern elegant, als damit
gleich alle Programme aussortiert werden, die sich als mit Mozilla4
kompatibel betrachten (also aus heutiger Sicht veraltet sind).
Noch ältere Programme können gar kein CSS, die
ignorieren entsprechende Angaben, daher müssen diese nicht
umgelenkt werden. In dieser einfachen Variante bekommen allerdings
zum Beispiel auch ältere Operas Stilvorlagen zu sehen,
die sie nicht komplett interpretieren können, sofern sie sich
nicht als Netscape4 tarnen. In den Abschnitten
CSS und PHP und CSS-Weiche wird das Verfahren daher
verfeinert.
Die Logik der Weiche ist auch so gehalten, daß auf jeden
Fall etwas angezeigt wird, nicht wie bei einigen Ignoranten, die
Weichen für bestimmte Programme anlegen, ihnen unbekannte aber
leer ausgehen lassen. Zudem kann die Stilvorlage über das
entsprechende Menü des Darststellungsprogrammes vom Nutzer immer selbst
ausgewählt werden, sofern das Programm das Element link
unterstützt (HTML2-Standard).
Wie an den CSS-Dateien und am Quelltext der XHTML-Datei und auch an
deren Darstellung zu erkennen ist, ist die Gesamtstruktur recht einfach
gehalten. Im wesentlichen gibt es sechs zu positionierende Elemente
(zwei Menüs, Kopf, Inhalt, Text und Fuß), an deren
Bezeichnung man bereits die Funktion erkennen kann.
Normalerweise sind zwei Menüs etwas viel für so eine
Seite, man kann sich aber vorstellen, daß eines davon
in einem größeren Projekt zur Navigation genutzt werden
kann und eines direkt auf der Seite.
Zu formatieren sind auch die zentralen Formate wie das
Element body
und die Überschriften, ferner
Pseudoformate wie Verweise im Text und im Menü.
Einmal abgesehen von der extra-Version für alte Programme ist das
Menue durchgehend mit position
: fixed im Darstellungsbereich
festgehalten, ist also immer im sichtbaren Bereich und kann nicht gerollt werden.
Je nach Möglichkeiten der Darstellungsprogramme funktionieren bestimmte
Beispiele auch mit alten Programmen, wenn auch anders als mit aktuellen.
Zum Beispiel bei den Typen 1 und 9 sollte sogar Netscape4
eine brauchbare Ansicht hinbekommen, ebenso msie5, der bei zwei oder drei
weiteren Typen auch nur kleinere Probleme hat, die dann bereits mit
msie6 nahezu funktionieren - einmal abgesehen von der bei allen
dreien nicht funktionierenden fixed-Positionierung und sporadischen
Schwierigkeiten mit der float
-Angabe.
Andere Beispiele ergeben jedoch nur mit Darstellungsprogrammen der fünften
Generation eine haltbare Ausgabe, für diese Layouts sind
die alten Programme zu fehlerhaft beziehungsweise in der
Unterstützung von CSS zu lückenhaft.
Hier ist das Beispiel (ich habe den Projekt-Text dafür verwendet,
der hier inzwischen in eine Form gebracht wurde, die zugänglich und
barrierefrei ist):
Projekt
Wenn nun das Darstellungsprogramm das Element link
für alternate style
nicht unterstützt beziehungsweise das Menü dafür nicht aufzufinden
sein sollte (Ansicht/View: Stilvorlage/Style...), können
hier die verschiedenen Typen manuell angewählt werden.
Typ 0 ist der linear angeordnete für alte Programme:
Schauen wir uns einfach einmal an, wie die auswählbaren CSS-Alternativen
der Seite im Quelltext aussehen:
html { color:#000; background-color: #fff; background-image:url(bgzack.php); background-attachment:fixed; } body { font-family:Helvetica, sans-serif; } h1 {font-size:3.0em;} h2 {font-size:1.6em;} h3 {font-size:1.2em;} h4 {font-size:1.2em;} p:first-letter {font-size:2em; color: #ff00ff;} h3:first-letter {font-size:2.4em; color: #dd00ff;} a:link { color:#0088cc; text-decoration: underline; } a:visited { color:#4488cc; text-decoration: underline; } a:hover { color:#cc33ff; text-decoration: underline; } a:active { color:#ff66cc; text-decoration: underline; } a:focus { color:#558822; background-color:#ffdddd; text-decoration: underline; } div.mail { font-style:italic; } ul.menu { line-height: 1.5em; list-style-type: square; margin: 1em; margin-left:16em; padding: 3em; width: 15em; font-weight: bold; text-align: left; border: solid thin #ffdd88; color: #335577; } div.inhalt { margin: 1em; padding: 1em; border: solid thin #ffdd88; color: #aa33cc; } div.text { color: #aa33cc; text-align: justify; margin: 1em; } div.kopf { color: #aa33cc; margin: 1em; margin-left: 5em; padding: 1em; border: solid thin #ffdd88; } div.fuss { margin:1em; margin-left: 5em; padding: 1em; text-align: center; border: solid thin #eeffaa; color: #8800cc; } div.menu { margin: 1em; margin-bottom: 0.2em; padding: 0.8em; border: solid thin #88ff55; color: #8800cc; } a.m:link { color:#0088cc; background: #eeddff; padding: 0.2em; text-decoration: underline; } a.m:visited { color:#4477cc; background: #ddccee; text-decoration: underline; } a.m:hover { color:#cc33ff; background: #bbffbb; text-decoration: underline; } a.m:active { color:#ff66cc; background: #ffeedd; text-decoration: underline; } a.m:focus { color:#558822; background-color:#ffaaaa; text-decoration: underline; }
html { color:#000000; background-color:#005500; } body { color:#000000; font-family:Helvetica, sans-serif; } h1 {font-size:2.4em;} h2 {font-size:1.8em;} h4 {font-size:1.4em;} h3 {font-size:1.2em; text-align: right; margin-right: 2em;} a:link { color:#55aaee; text-decoration: underline; } a:visited { color:#88bbcc; text-decoration: underline; } a:hover { color:#ffdddd; text-decoration: underline; } a:active { color:#ff66cc; text-decoration: underline; } a:focus { color:#558822; background-color:#ffdddd; text-decoration: underline; } p:first-letter {font-size:2em; color: #ffffff;} h3:first-letter {font-size:2.4em; color: #eeeeee;} div.mail { font-style:italic; font-size:1.0em; } ul.menu { position: fixed; list-style-type: none; line-height: 1.6em; margin: 0.5em; width: 10em; padding: 1.2em; font-weight: bold; text-align: left; top:1em; right: auto; float: left; max-width: 10em; border: solid medium #aa0055; color: #335577; background: #114411; z-index: 1; } div.inhalt { position: static; margin: 1em; margin-left:12em; max-width: 34em; min-width: 18em; padding: 1em; bottom: auto; background: #004444; text-align: right; border: solid medium #cc66ff; color: #ffffdd; z-index: 2; } div.text { position: static; color: #ffffdd; max-width: 32em; min-width: 16em; text-align: justify; margin: 1em; right: 1em; left: auto; background: #004444; z-index: 3; } div.kopf { position: static; color: #ffffdd; text-align: justify; margin: 1em; margin-left:12em; max-width: 34em; min-width: 18em; padding: 1em; text-align: right; background: #004444; border: solid medium #cc66ff; z-index: 4; } div.fuss { position: static; margin: 1em; margin-left:12em; max-width: 34em; min-width: 18em; padding: 1em; background: #003311; border: solid medium #ff22aa; color: #22ffff; text-align: right; z-index: 3; } div.menu { position: static; margin: 0.5em; padding: 0.5em; text-align: center; border: solid medium #aa0055; color: #ccaabb; background: #114411; z-index: 10; } a.m:link { color:#ffeeff; padding: 0.3em; text-decoration: underline; } a.m:visited { color:#eeffee; padding: 0.3em; text-decoration: underline; } a.m:hover { color:#ffff00; padding: 0.2em; text-decoration: none; border: solid thin #0088ff; } a.m:active { color:#33ffcc; padding: 0.3em; text-decoration: underline; } a.m:focus { color:#558822; padding: 0.3em; text-decoration: underline; }
html { color:#000000; background-color:#666666; } body { font-family:Helvetica, sans-serif; } h1 {font-size:3.0em;} h2 {font-size:2.0em;} h4 {font-size:1.0em;} h3 {font-size:1.2em;} acronym {color: #fff0f0;} a:link { color:#0088cc; text-decoration: underline; } a:visited { color:#4488cc; text-decoration: underline; } a:hover { color:#cc33ff; text-decoration: underline; } a:active { color:#ff66cc; text-decoration: underline; } a:focus { color:#558822; background-color:#ffdddd; text-decoration: underline; } div.mail { font-size:1.0em; } ul.menu { position: fixed; list-style-type: none; line-height: 2em; margin: 0.3em; padding: 0.8em; font-weight: bold; text-align: center; top: 23em; right: auto; float: left; width: 10em; border: solid medium #cc2277; color: #335577; background-color:#444444; z-index: 1; } div.inhalt { position: static; margin: 1em; margin-left:12em; max-width: 34em; min-width: 22em; padding: 1em; bottom: auto; background: #333333; border: solid medium #cc66ff; color: #dddddd; z-index: 2; } div.text { position: static; color: #dddddd; max-width: 32em; min-width: 20em; text-align: justify; margin: 1em; right: 1em; left: auto; background: #333333; z-index: 3; } div.kopf { position: static; color: #dddddd; text-align: justify; margin: 1em; margin-top: 6em; max-width: 45em; min-width: 33em; padding: 1em; text-align: center; background: #333333; border: solid medium #cc66ff; z-index: 4; } div.fuss { position: static; bottom: 1em; margin: 1em; padding: 1em; background: #222222; border: solid medium #ff22aa; color: #22aa22; text-align: right; z-index: 3; } div.menu { position: absolute; line-height: 2em; min-width: 42em; top: 1em; left: 1em; right: 1em; padding: 1em; text-align: center; border: solid medium #2222ff; color: #ffffff; background: #555555; z-index: 10; } p:first-letter {font-size:2em; color: #eeeeee;} h3:first-letter {font-size:2.4em; color: #dddddd;} a.m:link { color:#ddddff; background: #222222; padding: 0.3em; text-decoration: underline; } a.m:visited { color:#eeffee; background: #333333; padding: 0.3em; text-decoration: underline; } a.m:hover { color:#aa77ff; background: #ffaaaa; padding: 0.2em; text-decoration: none; border: solid thin #00ff00; } a.m:active { color:#33ffcc; background: #dd55dd; padding: 0.3em; text-decoration: underline; } a.m:focus { color:#558822; background-color:#ffaaaa; padding: 0.3em; text-decoration: underline; }
html { color:#064; background-color:#efe; } body { font-family:Helvetica, sans-serif; } h1 {font-size:2.4em;} h2 {font-size:1.8em;} h3 {font-size:1.4em;} h4 {font-size:1.2em;} a:link { color:#08c; text-decoration: underline; } a:visited { color:#48c; text-decoration: underline; } a:hover { color:#c3f; text-decoration: underline; } a:active { color:#f6c; text-decoration: underline; } a:focus { color:#582; background-color:#ffdddd; text-decoration: underline; } div.mail { font-style:italic; font-size:1.4em; } ul.menu { position: fixed; list-style-type: none; margin: 1em; padding: 0.5em; font-weight: bold; text-align: right; top: 1em; left: auto; right: 1em; float: right; width: 10em; border: solid thin #ccff66; color: #335577; background: #feeeff; } div.inhalt { position: static; margin: 1em; padding: 1em; max-width: 48em; min-width: 14em; background: #ffffee; border: solid thin #ccff66; color: #335577; } div.text { position: static; color: #3355aa; max-width: 36em; min-width: 12em; text-align: justify; margin: 1em; background: #ffffee; } div.kopf { position: static; color: #3355aa; max-width: 24em; min-width: 16em; margin: 1em; padding: 1em; background: #ffffee; border: solid thin #ccff66; } div.fuss { position: static; margin: 1em; padding: 1em; max-width: 40em; min-width: 14em; background: #ffeeee; border: solid thin #ff22aa; color: #aa5588; vertical-align:bottom; } div.menu { position: static; margin: 1em; max-width: 40em; min-width: 14em; padding: 1em; text-align: center; border: solid thin #2222ff; color: #7777bb; background: #ccccff; } ul.menu li { padding: 4px; padding-bottom: 2px; padding-top: 2px; background: #aaff00; margin: 5px; } ul.menu a.m { display: block; padding: 2px; border: solid 1px #008800; margin-bottom: 1px; } a.m:link { color:#0088cc; background: #ddeeff; text-decoration: underline; } a.m:visited { color:#4477cc; background: #ccddee; text-decoration: underline; } a.m:hover { color:#cc33ff; background: #ffbbbb; text-decoration: underline; } a.m:active { color:#ff66cc; background: #eeeedd; text-decoration: underline; } a.m:focus { color:#558822; background-color:#ffaaaa; text-decoration: underline; }
html { color:#000; background-color:#205; } body { font-family:Helvetica, sans-serif; } h1 {font-size:2.4em;} h2 {font-size:1.8em;} h3 {font-size:1.4em;} h4 {font-size:1.2em;} a:link { color:#cccc88; text-decoration: underline; } a:visited { color:#cc88dd; text-decoration: underline; } a:hover { color:#eeccff; text-decoration: underline; } a:active { color:#ff99dd; text-decoration: underline; } a:focus { color:#558822; background-color:#ffdddd; text-decoration: underline; } div.mail { font-size:1.2em; } div.inhalt { position: static; margin: 1em; margin-left:13em; padding: 1em; max-width: 44em; min-width: 24em; bottom: auto; background: #442288; text-align: center; border: solid medium #ff66ff; color: #ffaa55; z-index: 2; } div.text { position: static; color: #ffdd55; max-width: 40em; min-width: 20em; text-align: justify; margin: 1em; margin-top: 17em; padding: 1em; right: 1em; left: auto; background: #882288; z-index: 3; } div.kopf { position: absolute; right:0.5em; top:0.5em; color: #ffddaa; padding: 1em; text-align: left; background: #330066; border: solid medium #ff66cc; z-index: 4; } ul.menu { position: fixed; list-style-type: none; line-height: 1.5em; margin: 0.5em; padding: 0.8em; font-weight: bold; text-align: center; top:1em; right: auto; float: left; width: 10em; border: solid medium #bb0077; color: #335577; background: #440066; z-index: 1; } div.fuss { position: static; margin: 1em; margin-left:12em; padding: 1em; max-width: 44em; min-width: 24em; background: #220055; border: solid medium #ff22aa; color: #ff22ff; vertical-align:bottom; text-align: right; z-index: 3; } div.menu { visibility: hidden; position: static; margin: 1em; margin-left:12em; line-height: 1.5em; min-width: 24em; padding: 0.2em; text-align: center; border: solid medium #2222aa; color: #ff66cc; background: #110066; z-index: 1; } p:first-letter {font-size:2em; color: #cccc77;} h3:first-letter {font-size:2.4em; color: #cccc77;} ul.menu li { padding: 4px; padding-bottom: 2px; padding-top: 2px; background: #440044; margin: 5px; } ul.menu a.m { display: block; padding: 2px; border: solid 1px #660066; margin-bottom: 1px; } a.m:link { color:#ffffee; padding: 0.3em; text-decoration: underline; } a.m:visited { color:#eeffcc; padding: 0.3em; text-decoration: underline; } a.m:hover { color:#dddd00; padding: 0.2em; background: #882288; text-decoration: none; border: solid thin #8800ff; } a.m:active { color:#ffcc88; padding: 0.3em; text-decoration: underline; } a.m:focus { color:#558822; padding: 0.3em; text-decoration: underline; }
html { color:#006644; background-color:#ffeecc; } body { font-family:Helvetica, sans-serif; } h1 {font-size:2.4em;} h2 {font-size:1.8em;} h3 {font-size:1.4em;} h4 {font-size:1.2em;} a:link { color:#0088cc; text-decoration: underline; } a:visited { color:#4488cc; text-decoration: underline; } a:hover { color:#cc33ff; text-decoration: underline; } a:active { color:#ff66cc; text-decoration: underline; } a:focus { color:#558822; background-color:#ffdddd; text-decoration: underline; } div.mail { font-size:1.2em; } ul.menu { position: static; margin: 1em; line-height: 1.5em; padding: 0.5em; font-weight: bold; text-align: right; bottom: 20%; left: auto; right: 1em; float: right; max-width: 8em; color: #335577; z-index: 1; } div.inhalt { position: static; margin: 1em; padding: 1em; min-width: 18em; background: #ffffee; border: solid medium #ccff66; color: #335577; z-index: 2; } div.text { position: static; color: #3355aa; max-width: 32em; min-width: 16em; text-align: justify; margin: 1em; background: #ffffee; z-index: 3; } div.kopf { position: static; color: #3355aa; width: 24em; text-align: justify; margin: 1em; margin-right: 5em; margin-top: 0.5em; padding: 1em; background: #ffffcc; border: solid medium #88cc44; float: right; z-index: 4; } div.fuss { position: static; margin: 1em; margin-bottom: 5em; min-width: 18em; padding: 1em; background: #ffffee; border: solid medium #88cc44; text-align: right; color: #88aa44; vertical-align:bottom; z-index: 3; } div.menu { position: fixed; line-height: 2em; bottom: 1em; left: 3em; right: 3em; padding: 1em; text-align: center; border: solid medium #88cc55; color: #ffffff; background: #ffffcc; z-index: 10; } p:first-letter {font-size:2em; color: #2277cc;} h3:first-letter {font-size:2.4em; color: #2277cc;} a.m:link { color:#00ccaa; text-decoration: underline; } a.m:visited { color:#88ccbb; text-decoration: underline; } a.m:hover { color:#dd33ee; background: #ffbbbb; text-decoration: underline; } a.m:active { color:#ddddcc; background: #44eedd; text-decoration: underline; } a.m:focus { color:#558822; background-color:#ffaaaa; text-decoration: underline; }
html { color:#000; background-color:#fff; background-image:url(bg.php); background-attachment:fixed; } body { font-family:Helvetica, sans-serif; } h1 {font-size:2.4em;} h2 {font-size:1.8em;} h3 {font-size:1.4em;} h4 {font-size:1.2em;} a:link { color:#0088cc; text-decoration: underline; } a:visited { color:#4488cc; text-decoration: underline; } a:hover { color:#cc33ff; text-decoration: underline; } a:active { color:#ff66cc; text-decoration: underline; } a:focus { color:#558822; background-color:#ffdddd; text-decoration: underline; } div.mail { font-style:italic; font-size:1.0em; } ul.menu { position: fixed; list-style-type: none; margin: 1em; padding: 0.5em; font-weight: bold; text-align: right; top: 5em; left: auto; right: 1em; float: right; width: 10em; border: solid thin #ccff66; color: #335577; z-index: 1; } div.inhalt { position: static; margin: 1em; padding: 1em; max-width: 36em; min-width: 14em; border: solid thin #ddff88; color: #337755; z-index: 2; } div.text { position: static; color: #33aa77; max-width: 32em; min-width: 12em; text-align: justify; margin: 1em; z-index: 3; } div.kopf { position: static; color: #33aa77; max-width: 24em; min-width: 16em; text-align: justify; margin: 1em; padding: 1em; border: solid thin #ddff88; z-index: 4; } div.fuss { position: static; margin: 1em; color: #55aa88; z-index: 3; } div.menu { position: static; margin: 1em; color: #55aa88; z-index: 10; } ul.menu li { padding: 4px; padding-bottom: 2px; padding-top: 2px; border: solid 1px #440044; margin: 5px; } ul.menu:hover { border-color: #ff8800; } ul.menu:hover li { background: #ff00ff; } ul.menu li:hover { background: #ffff00; } ul.menu a.m { display: block; padding: 2px; border: solid 1px #660066; margin-bottom: 1px; } a.m:link { color:#0088cc; background: #ddeeff; text-decoration: underline; } a.m:visited { color:#4477cc; background: #ccddee; text-decoration: underline; } a.m:hover { color:#cc33ff; background: #ffbbbb; text-decoration: underline; } a.m:active { color:#ff66cc; background: #eeeedd; text-decoration: underline; } a.m:focus { color:#558822; background-color:#ffaaaa; text-decoration: underline; }
html { color:#000; background-color:#fff; background-image:url(bgzack.php); background-attachment:fixed; } body { font-family:Helvetica, sans-serif; } h1 {font-size:2.0em;} h2 {font-size:1.6em;} h3 {font-size:1.4em;} h4 {font-size:1.2em;} p:first-letter {font-size:2em; color: #ff00ff;} h3:first-letter {font-size:2.4em; color: #dd00ff;} a:link { color:#0088cc; text-decoration: underline; } a:visited { color:#4488cc; text-decoration: underline; } a:hover { color:#cc33ff; text-decoration: underline; } a:active { color:#ff66cc; text-decoration: underline; } a:focus { color:#558822; background-color:#ffdddd; text-decoration: underline; } div.mail { font-style:italic; font-size:1.0em; } ul.menu { position: absolute; list-style-type: none; line-height: 1.2em; margin: 1em; padding: 0px; font-weight: bold; text-align: right; top: 3em; left: auto; right: 1em; float: right; width: 10em; color: #335577; z-index: 1; border: solid thin transparent; } div.inhalt { position: static; margin: 1em; padding: 1em; max-width: 36em; min-width: 14em; border: solid thin #ffdd88; color: #aa33cc; z-index: 2; } div.text { position: static; color: #aa33cc; max-width: 32em; min-width: 12em; text-align: justify; margin: 1em; z-index: 3; } div.kopf { position: static; color: #aa33cc; max-width: 20em; min-width: 12em; margin-left: auto; margin-right: 13em; margin-top: 1em; right: 10em; padding: 1em; border: solid thin #ffdd88; z-index: 4; } div.fuss { position: static; margin: 1em; margin-bottom: 5em; color: #8800cc; z-index: 3; } div.menu { position: fixed; bottom: 1em; margin: 1em; margin-left:0.5em; margin-bottom: 0.2em; padding: 0.8em; background-color: #ffffff; border: solid thin #88ff55; color: #8800cc; z-index: 10; } ul.menu li { padding: 4px; padding-bottom: 2px; padding-top: 2px; border: solid 1px #440044; margin: 2px; } ul.menu:hover { border: solid thin #ff8800; } ul.menu:hover li { background: #ff8800; } ul.menu li:hover { background: #ffff88; } ul.menu a.m { display: block; padding: 2px; border: solid 1px #660066; margin-bottom: 1px; background-color: #ffffcc; } ul.menu a.m:hover { background-color: #ddffee; } a.m:link { color:#0088cc; background: #eeddff; text-decoration: underline; } a.m:visited { color:#4477cc; background: #ddccee; text-decoration: underline; } a.m:hover { color:#cc33ff; background: #bbffbb; text-decoration: underline; } a.m:active { color:#ff66cc; background: #ffeedd; text-decoration: underline; } a.m:focus { color:#558822; background-color:#ffaaaa; text-decoration: underline; }
html { color:#000000; background-color:#000055; } body { font-family:Helvetica, sans-serif; } h1 {font-size:2.0em;} h2 {font-size:1.5em;} h3 {font-size:1.3em;} h4 {font-size:1.2em;} acronym {color: #fff0f0;} a:link { color:#aaccff; text-decoration: underline; } a:visited { color:#88aacc; text-decoration: underline; } a:hover { color:#dd77ff; text-decoration: underline; } a:active { color:#ff66cc; text-decoration: underline; } a:focus { color:#558822; background-color:#ffdddd; text-decoration: underline; } div.mail { font-size:1.0em; } ul.menu { position: absolute; list-style-type: none; line-height: 1.8em; margin: 1em; top: 1em; right: 1em; padding: 0.8em; font-weight: bold; text-align: center; width: 10em; right: float; border: solid medium #666699; color: #335577; background-color:#000044; z-index: 1; } div.inhalt { position: absolute; top: 18em; margin: 1em; margin-bottom: 5em; max-width: 48em; min-width: 20em; padding: 1em; bottom: auto; background: #333399; border: solid medium #8866ff; color: #ddddff; z-index: 2; } div.text { position: static; color: #ddccff; max-width: 40em; min-width: 18em; text-align: justify; margin: 1em; margin-bottom: 8em; padding: 1em; right: 1em; left: auto; background: #000055; z-index: 3; } div.kopf { position: absolute; color: #ddddee; text-align: justify; margin: 1em; top: 1em; left: 1em; max-height: 24em; padding: 1em; text-align: center; background: #111166; border: solid medium #ccccff; z-index: 10; } div.fuss { position: fixed; top: 2em; margin: 1em; margin-left: 3em; padding: 0.5em; background: #222277; border: solid medium #5522cc; color: #ffffff; font-size: 0.7em; text-align: right; z-index: 6; } div.menu { position: fixed; line-height: 2em; bottom: 1em; width: 92%; padding: 1em; text-align: center; border: solid medium #2222ff; color: #ffffff; background: #555588; z-index: 8; } p:first-letter {font-size:2em; color: #eeeeff;} h3:first-letter {font-size:2.4em; color: #ddddff;} a.m:link { color:#ddddff; background: #222288; padding: 0.3em; text-decoration: underline; } a.m:visited { color:#cceeff; background: #333388; padding: 0.3em; text-decoration: underline; } a.m:hover { color:#ffee66; background: #0000ff; padding: 0.25em; text-decoration: none; border: solid thin #ddffff; } a.m:active { color:#33ffcc; background: #dd55ff; padding: 0.3em; text-decoration: underline; } a.m:focus { color:#558822; background-color:#ffaaaa; padding: 0.3em; text-decoration: underline; }
html { color:#000000; background-color:#9999cc; } body { font-family:Helvetica, sans-serif; } h1 {font-size:1.5em;} h2 {font-size:1.2em;} h3 {font-size:1.2em;} h4 {font-size:1.2em;} acronym {color: #fff0f0;} a:link { color:#aaccff; text-decoration: underline; } a:visited { color:#88aacc; text-decoration: underline; } a:hover { color:#dd77ff; text-decoration: underline; } a:active { color:#ff66cc; text-decoration: underline; } a:focus { color:#558822; background-color:#ffdddd; text-decoration: underline; } div.mail { font-size:1.0em; font-weight: bold; } ul.menu { position: fixed; list-style-type: square; line-height: 1.4em; margin: 1em; top: 1em; right: 6%; padding: 0.8em; text-align: left; width: 10em; right: float; color: #3355ff; background-image:url(transpng.php?r=100&g=100&b=250&a=1&d=2&c=2); z-index: 9; } div.inhalt { position: static; margin: 1em; width: 80%; padding: 1em; background: #333399; border: solid medium #8866ff; color: #ddddff; z-index: 2; } div.text { position: static; color: #ddccff; max-width: 40em; width: 90%; text-align: justify; margin: 1em; margin-top: 15em; padding: 1em; right: 1em; left: auto; background: #000055; z-index: 3; } div.kopf { position: fixed; color: #ffbbff; text-align: justify; margin: 1em; top: 1em; left: 2em; padding: 1em; text-align: center; /* background: #111166; */ background-image:url(transpng.php?r=80&g=0&b=0&a=1&d=12&c=2); border: solid medium #ccccff; z-index: 10; } div.fuss { position: static; width: 90%; margin-top: 1em; margin-bottom: 1em; padding: 0.5em; background: #222277; border: solid medium #5522cc; color: #ffffff; font-size: 0.7em; text-align: center; z-index: 6; } div.menu { position: static; line-height: 2em; width: 94%; padding: 1em; text-align: center; border: solid medium #2222ff; color: #ffffff; background: #555588; z-index: 8; } p:first-letter {font-size:2em; color: #eeeeff;} h3:first-letter {font-size:2.4em; color: #ddddff;} a.m:link { color:#88ffff; padding: 0.3em; text-decoration: underline; } a.m:visited { color:#cceeff; padding: 0.3em; text-decoration: underline; } a.m:hover { color:#ffee66; padding: 0.25em; text-decoration: none; border: solid thin #ddffff; } a.m:active { color:#33ffcc; padding: 0.3em; text-decoration: underline; } a.m:focus { color:#558822; padding: 0.3em; text-decoration: underline; }
html { color: highlight; background-color: appworkspace; } body { font-family:Helvetica, sans-serif; } h1 {font-size:2em;} h2 {font-size:1.6em;} h3 {font-size:1.4em;} h4 {font-size:1.2em;} acronym {color: buttontext;} a:link { color:highlighttext; text-decoration: underline; } a:visited { color:greytext; text-decoration: underline; } a:hover { color:infotext; text-decoration: underline; } a:active { color:activecaption; text-decoration: underline; } a:focus { color:infotext; background-color:infobackground; text-decoration: underline; } div.mail { font-size:1.0em; font-weight: bold; } ul.menu { position: fixed; list-style-type: square; line-height: 1.4em; margin: 1em; bottom: 10%; right: 3%; padding: 0.8em; text-align: left; width: 10em; right: float; color: #ffaaaa; background-image:url(transpng.php?r=230&g=230&b=230&a=1&d=2&c=2); z-index: 9; } div.inhalt { position: static; margin: 1em; width: 90%; padding: 1em; background: background; border: solid medium threedlightshadow; color: window; z-index: 2; } div.text { position: static; color: windowtext; max-width: 36em; width: 90%; text-align: justify; margin: 1em; margin-top: 15em; padding: 1em; right: 1em; left: auto; background: window; z-index: 3; } div.kopf { position: absolute; color: #ffaaaa; text-align: justify; margin: 1em; top: 1em; left: 2em; padding: 1em; text-align: center; /* background: #111166; */ background-image:url(transpng.php?r=250&g=250&b=250&a=1&d=12&c=2); border: solid medium activeborder; z-index: 10; } div.fuss { position: static; max-width: 50%; margin-left:1em; margin-top: 1em; margin-bottom: 1em; padding: 0.5em; background: infobackground; border: solid medium inactiveborder; color: infotext; font-size: 0.7em; text-align: center; z-index: 6; } div.menu { position: static; line-height: 2em; margin-left: 1em; padding: 1em; text-align: center; border: solid medium activeborder; color: activecaption; background: appworkspace; z-index: 8; } p:first-letter {font-size:2em; color: #ffaaaa;} h3:first-letter {font-size:2.4em; color: #ffaaaa;} a.m:link { color:captiontext; padding: 0.3em; text-decoration: underline; } a.m:visited { color:graytext; padding: 0.3em; text-decoration: underline; } a.m:hover { color:infotext; padding: 0.25em; text-decoration: none; border: solid thin threeddarkshadow; } a.m:active { color:threedface; padding: 0.3em; text-decoration: underline; } a.m:focus { color:threedface; padding: 0.3em; text-decoration: underline; }
html { color:#0088cc; font-family:Helvetica, sans-serif; background-color:#ffffff; background-image:url(back6.png); background-repeat:no-repeat; background-attachment:fixed; background-position: right bottom; } h1 {font-size:2.4em;} h2 {font-size:1.8em;} h4 {font-size:1.4em;} h3 {font-size:1.2em; text-align: right; margin-right: 2em;} a:link { color:#0044ee; text-decoration: underline; } a:visited { color:#00bbcc; text-decoration: underline; } a:hover { color:#aadd00; text-decoration: underline; } a:active { color:#55ee77; text-decoration: underline; } a:focus { color:#558822; background-color:#ffdddd; text-decoration: underline; } p:first-letter {font-size:2em; color: #00ccff;} h3:first-letter {font-size:2.4em; color: #00ffee;} div.mail { font-style:italic; font-size:1.0em; } ul.menu { position: fixed; list-style-type: none; line-height: 1.6em; margin: 0.5em; width: 10em; padding: 1.2em; font-weight: bold; text-align: left; top:1em; right: auto; float: left; max-width: 10em; border: solid medium #aa0055; color: #ffffff; z-index: 1; } div:hover { background-color:#ffffff; background-image:url(back3.png); background-repeat:no-repeat; background-attachment:fixed; background-position: right bottom; } ul:hover { background-color:#ffffff; background-image:url(back4.png); background-repeat:no-repeat; background-attachment:fixed; background-position: right bottom; } div div:hover { background-color:#ffffff; background-image:url(back5.png); background-repeat:no-repeat; background-attachment:fixed; background-position: right bottom; color: #001155; } div.inhalt { position: static; margin: 1em; margin-left:12em; max-width: 35em; min-width: 19em; padding: 1em; bottom: auto; text-align: right; border: solid medium #cc66ff; color: #0000ff; z-index: 2; } div.text { position: static; color: #008899; max-width: 32em; min-width: 16em; text-align: justify; margin: 1em; padding: 0.5em; right: 1em; left: auto; z-index: 3; } div.kopf { position: static; color: #cc00ff; text-align: justify; margin: 1em; margin-left:12em; max-width: 35em; min-width: 19em; padding: 1em; text-align: right; border: solid medium #cc66ff; z-index: 4; } div.fuss { position: static; margin: 1em; margin-left:12em; max-width: 35em; min-width: 19em; padding: 1em; border: solid medium #ccaaff; color: #2266ff; text-align: right; z-index: 3; } div.fuss:hover { font-size: 2em; padding: 0.245em; margin: 0.5em; margin-left: 6em; text-align: left; max-width: 18em; min-width: 9.5em; } div.menu { position: static; margin: 0.5em; padding: 0.5em; text-align: center; border: solid medium #aa0055; color: #ccaabb; z-index: 10; } a.m:link { color:#ff55ff; padding: 0.3em; text-decoration: underline; } a.m:visited { color:#55ff55; padding: 0.3em; text-decoration: underline; } a.m:hover { color:#ccaa00; padding: 0.2em; text-decoration: none; border: solid thin #0088ff; } a.m:active { color:#aacc00; padding: 0.3em; text-decoration: underline; } a.m:focus { color:#ff8822; padding: 0.3em; text-decoration: underline; }