Web Style Sheets
CSS Tips & Tricks

Ein Konfetti Menu

Das farbenfrohe Menu welches Sie weiter unten sehen können besteht aus einem simplen DIV Element mit ein paar P Elementen darin. Der visuelle Effekt wird dadurch hervorgerufen dass jedes P Element individuell platziert wurde und jeweils einen eigenen Font und eine eigene Farbe besitzt. Das Ganze klappt am besten mit kurzen Texten da das Prinzip auf der Überlappung basiert. Wenn die Texte jedoch zu lang werden und sich gegenseitig überlappen kann man bald nichts mehr lesen.

Der verwendete Style Sheet erlaubt die Erstellung eines Menus mit bis zu 10 Elementen. Dieses Beispiel hier verwendet 8. Hier der entsprechende HTML Quelltext:

<div class="map">
<p id="p1"><a href="http://www.w3.org/Style/CSS/#news">Was gibt es Neues?</a>
<p id="p2"><a href="http://www.w3.org/Style/CSS/#learn">CSS lernen</a>
<p id="p3"><a href="http://www.w3.org/Style/CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="http://www.w3.org/Style/CSS/#editors">Editorens</a>
<p id="p10"><a href="http://www.w3.org/Style/CSS/#specs">Spezifikationen</a>
<p id="p6"><a href="http://www.w3.org/Style/CSS/Test">CSS1 Test Umgebung</a>
<p id="p9"><a href="http://www.w3.org/StyleSheets/Core">W3C Core Styles</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

Beachten Sie die Klasse "map" des DIV Elementes - welche den Container für das Menu erzeugt. Die ID Attribute der P Elemente müssen einen jeweils unterschiedlichen Wert aufweisen..z.B. p1, p2,...p10. Es spiel keine Rolle ob die IDs in einer bestimmten Reihenfolge angegeben werden (so wie hier im Beispiel). Sie können den Style Sheet map.css in Ihrem eigenen Style Sheet mit Hilfe von @import in Ihrer CSS Datei (z.B. direkt von der W3C Seite

@import "http://www.w3.org/Style/map.css";

) oder mit einem LINK Element im HTML Quelltext:

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

verwenden.

Erklärung des Style Sheets

Und hier die Erklärung der Funktionsweise des Style Sheets. Der Style Sheet beginnt mit der Erzeugung eines DIV Elementes der Klasse "map". Er erstellt einen 190 Pixel hohen Bereich in welchen die P Elemente gesetzt werden. Jedem der Elemente mit den IDs p1 bis p10 wird dann eine andere Farbe und Schriftart zugewiesen. Und jedes Element wird innerhalb des DIVs positioniert mit Hilfe der Eigenschaft 'margin': wird 'margin-top' negativ so wandert das Element im DIV nach oben und ein positives 'margin-bottom' stellt sicher dass das Folgeelement wieder am unteren Rand des DIVs beginnt.

(Der Schwachpunkt dieses Style Sheets ist dass er alle Angaben mit px durchführt. Sie können dies gern in Prozentangaben ändern - so denn Ihr Browser CSS richtig interpretiert.)

DIV.map {                        /* Platz schaffen für ein paar Links */
  padding-top: 190px;
  margin-left: -2em;             /* Passen Sie diese Werte Ihrer Seite an... */
  margin-right: -2em;            /* Passen Sie diese Werte Ihrer Seite an... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* oben rechts */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* oben links */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* zentriert */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* zentriert rechts */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* zentriert links */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* unten zentriert */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* unten rechts */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* unten links */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* unten rechts */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* zentriert links */

Es steht Ihnen natürlich frei den Style Sheet zu verändern um andere Schriftarten, Farben und Positionen durchzuspielen. Oder um weitere Regeln für mehr als nur 10 Elemente zu bestimmen. Oder Sie spielen mit den margin Eigenschaften herum um das Design des Style Sheets an Ihre eigene Webseite anzupassen.

Wenn Sie den Style ausprobieren werden Sie vielleicht feststellen dass er im Netscape 4 nicht allzugut funktioniert. Der Fehler liegt natürlich beim Netscape Browser. Wie auch immer, map-ns.css ist ein Style Sheet der in allen Browsern zu funktionieren scheint. Der folgende Trick im Header Ihres HTML Quelltextes wird dafür sorgen dass Netscape 4 und auch modernere Browser den CSS das Dokumentes richtig interpretieren:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Korrekte CSS Browser-Implementierungen werden beide Style Sheets einlesen, aber die Regeln im Zweiten werden die im Ersten überschreiben. Netscape 4 jedoch wird den zweiten Style Sheet wegen des "media" Attributes nicht laden - da er dieses Attribut nicht versteht.

Sie werden sich vielleicht fragen warum die Positionsangaben mit (negativen) margin Werten durchgeführt wurden, wo es doch viel einfacher mit einer absoluten Positionierung mit Hilfe von 'position', 'left' & 'right' gegangen wäre. Der Grund ist dass so auch ältere Browser, welche nur CSS1 verstehen, mit unserem Style Sheet etwas anfangen können.