XHTML SVG CSS PHP

Dr. O. Hoffmann

CSS-Layout

Aus Beispielen lernen wir wie aus dem Leben - nie alles.
Olaf Hoffmann

Beispiele

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:


Typ 0: 
  
  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;
}

Typ 1: 
  
  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;
}

Typ 2: 
  
  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;
}

Typ 3: 
  
  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;
}

Typ 4: 
  
  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;
}

Typ 5: 
  
  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;
}

Typ 6: 
  
  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;
}

Typ 7: 
  
  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;
}

Typ 8: 
  
  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;
}

Typ 9: 
  
  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;
}

Typ 10: 
  
  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;
}

Typ 11: 
  
  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;
}