Web Style Sheets
CSS Tips & Tricks

Ein fest stehendes Menu

Das Menu welches Sie rechts oben sehen besteht aus einem simplen DIV mit einigen Elementen als Inhalt. Um es statisch an diese Position zu binden wurden einige Regeln im Style Sheet verwendet. Hier der entsprechende HTML-Code, er entspricht dem welcher auch auf dieser Seite Anwendung findet:

<div class="banner">
<p>
<a href="http://www.w3.org"><img alt="W3C" src="../../../Icons/w3c_home"></a>
<a href="http://www.w3.org/Consortium/Activities">Aktivitäten</a>
<a href="http://www.w3.org/TR/">Tech.&nbsp;Berichte</a>
<a href="http://www.w3.org/Help/siteindex">Seiten Index</a>
<a href="http://www.w3.org/Consortium/Translation/">übersetzungen</a>
<a href="http://www.w3.org/Status">Software</a>
<a href="http://search.w3.org/">Suche</a>
<em>ähnlich:</em>
<a href="http://www.w3.org/Style/">Style</a>
<a href="http://www.w3.org/Style/CSS/">CSS</a>
<a href="http://www.w3.org/Style/Examples/007/">Tips&nbsp;&amp;&nbsp;Tricks</a>
</div>

In einem Browser mit deaktiviertem CSS wird der Besucher nur einen einfachen Absatz mit Links zu Gesicht bekommen. Aber dank der Regeln hier verleihen wir dem Menu die Eigenschaften welche Sie hier sehen können - es steht fest an ein und der selben Position in der rechten oberen Browserecke:

div.banner {
  margin: 0;
  font-size: 80% /*kleiner*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #900;
  border: thin outset #900;
  color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

Die interessanteste Regel hier ist 'position: fixed', welche dem Menu die statische Positionierung verleiht. Der Code 'display: block' bestimmt dass alle Elemente innerhalb des Menus als Blockelemente behandelt werden - das bedeutet sie stehen alle untereinander.

Wir möchten dass sich die Linkfarbe beim überfahren mit der Maus ändert, dazu verwenden wir :hover.

Der Rest (margin, border, colors etc.) kann je nach persönlichem Geschmack weggelassen oder geändert werden. Beachten Sie bitte dass sich über jedem Link eine Linie befindet, mit Ausnahme vom Ersten. Dank der Regel ':first-child'. Diese Regelkombination (border-top auf alle Elemente angewand mit Aussnahme des Ersten) ist üblich um Linien zwischen Blockelementen zu erzeugen.

(Wenn Sie einen Blick auf die verwendeten Style Sheets dieser Seite werfen banner-o.css und banner.css werden Sie einige zusätzliche Regeln finden welche auf den ersten Blick zueinander im Widerspruch zu stehen scheinen. Diese wurden implementiert um einige Bugs in älteren Browsern zu umgehen. Im Detail - in der Datei banner-o.css - wird das Banner versteckt und in banner.css wieder als Blockelement angezeigt. Das hat den Effekt dass der Netscape 4 das Banner nicht anzeigen wird da dieser Browser die @import Regel von banner.css nicht ausführt.)

FAQ: IE 5 & 6 unter Windows?

Wenn Sie sich diese Seite mit dem Internet Explorer 5 oder 6 unter Windows ("WinIE5" und "WinIE6") ansehen werden Sie feststellen dass sie nicht funktioniert. Zumindest nicht mit den Browserversionen zum aktuellen Zeitpunkt (Sept.2002). Viele Leute haben mich bereits darauf angesprochen - also hier der Versuch einer kleinen Erklärung: der Bug ist der Browser selbst, nicht die Seite.

WinIE5 und WinIE6 haben bisher den Wert 'fixed' nicht implementiert. Das ist schlecht, aber schlechter ist dass auch die Angabe 'position' inkorrekt verarbeitet wird. Ein Browser welcher 'fixed' nicht kennt sollte die Regel 'position:fixed' ignorieren und auf eine der Vorgänger Regeln im Quellcode zurückgreifen. So könnten wir vor 'fixed' ein 'position:absolute' setzen und der Browser würde die Folgezeile einfach ignorieren und darauf setzen. Leider funktioniert das im WinIE5 und WinIE6 nicht, 'fixed' wird zwar interpretiert, aber fälschlicherweise als eine Art 'static'.

Sie können den WinIE5 und WinIE6 nicht dazu bringen 'fixed' korrekt zu verarbeiten, aber es existiert ein Workaround für dieses Problem. Johannes Koch teilte mir den folgenden Trick mit (aus seiner Sammlung von Workarounds): Ersetzen Sie erst die Regel 'position:fixed' mit 'position:absolute' und fügen Sie weiter unten den folgenden Stylesheet ein:

body>div.banner {position: fixed}

(Sollte das DIV.banner sich innerhalb eines anderen Elementes als BODY befinden, ersetzen Sie BODY bitte mit diesem Element.) Das Resultat ist dass Browser welche den '>' (child) Selektor kennen diese Regel verwenden werden. Aber Browser welche damit nichts anfangen können - wie der WinIE5 oder WinIE6 - werden auf die Vorgängerregel setzen. Das Menu befindet sich somit bei allen Browsern in der rechten oberen Ecke, nur dass es beim Scrollen im IE nicht fest stehen bleibt.

Es ist wichtig dass um das '>' keine Leerzeichen gesetzt werden.