aktuelle Seite markieren, mit css in der Navi-Leiste formatieren

[Gunnar Bittersmann]

@@tangotaenzer:

nuqneH

Jetzt würde ich noch gerne die aktuelle Seite, wo der Nutzer sich also befindet in der Navigationsleiste markieren durch einen Pfeil.

Und bei der Gelegenheit gleich dafür sorgen, dass die aktuelle Seite im Menü nicht verlinkt ist. (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Dein generiertes Markup sollte in etwa so aussehen:

<li><a href="foo">’ne andere Seite <span>Titel dieser anderen Seite</span></a><li>  
<li>diese Seite<li>  
<li><a href="bar">noch ’ne andere Seite <span>Titel jener anderen Seite</span></a><li>

Die Klasse "tooltip" ist überflüssig, wenn ihr alle 'a'-Elemente der Navigationsliste (sie habe die ID "nav") angehören. Diese kannst du dann auch über '#nav a' selektieren.

Wie kommt nun der rote Pfeil vor(?) „diese Seite“? Als Hintergrundbild des 'li'-Elements. Damit der Text den Pfeil nicht überdeckt, gibt’s Bildbreite plus etwas Abstand als Padding:

#nav li  
{  
  background: url(pfeil) no-repeat;  
  padding-left: 42px;  
}

Die 'a'-Elemente stehen bislang rechts vom Pfeil, sollen diesen aber überdecken, also übers Padding der 'li'-Elemente gehen. Das ist mit negativem linken Abstand zu erreichen:

#nav a  
{  
  background: white; /* was immer bei dir passt */  
  margin-left: -42px;  
  padding-left: 42px;  
}

Qapla'