Hintergrundbild auf dem man schreiben kann

[Gunnar Bittersmann]

@@Newbie:

nuqneH

Und zwar so: es kommt drauf an wo man sich befindet, bei news hinter news das Bild setzen bei Impressum nur bei Impressum.

Du willst also die jeweils aktuelle Seite im Menü hervorheben?

Jemand hat mir gesagt ich müsste zuerst die einzelnen links in div setzen.

Wann immer dir jemand sagt „mach mal’n 'div' drum“, glaub ihm kein Wort! Es zeugt davon, dass derjenige wenig Ahnung hat.

Die Links in Menü wären per CSS auch ansprchbar, wenn gar nichts drumrum ist:

<a href="foo.html">foo</a>  
<a href="bar.html">bar</a>  
<a href="baz.html">baz</a>

nämlich per Attributselektor, bspw. 'a[href="foo.html"]'.

Und wenn was drumrum sollte, dann 'li', denn ein Menü ist eine _Liste_ von Links:

<ul>  
  <li><a href="foo.html">foo</a></li>  
  <li><a href="bar.html">bar</a></li>  
  <li><a href="baz.html">baz</a></li>  
</ul>

Aber halt! Die aktuelle Seite sollte im Menu nicht verlinkt sein! (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Auf der Seite foo.html könnte das Menü dann so aussehen:

<ul>  
  <li>foo</li>  
  <li><a href="bar.html">bar</a></li>  
  <li><a href="baz.html">baz</a></li>  
</ul>

Auf der Seite bar.html so:

<ul>  
  <li><a href="foo.html">foo</a></li>  
  <li>bar</li>  
  <li><a href="baz.html">baz</a></li>  
</ul>

Wenn du die 'li'-Elemente einzeln ansprechen möchtest, bietet es sich an, ihnen IDs zu geben (und der Navigationsliste auch eine):

<ul id="nav">  
  <li id="foo">foo</li>  
  <li id="bar"><a href="bar.html">bar</a></li>  
  <li id="baz"><a href="baz.html">baz</a></li>  
</ul>

Im Stylesheet gibst du dann die Hintergrundbilder an:

#nav  
{  
  list-style: none;  
  padding-left: 0;  
}  
  
#nav li  
{  
  height: 21px;  
  margin-left: 0;  
  padding-left: 0;  
  width: 150px;  
}  
  
#foo { background: url(foo.png) }  
  
#bar { background: url(bar.png) }  
  
#baz { background: url(baz.png) }

Die Menüpunkte außer dem der aktuellen Seite sollen kein Hintergrundbild haben? Kein Problem, darin befinden sich ja 'a'-Elemente, denen man einen anderen Hintergrund (bspw. eine Farbe) geben kann, der den Hintergrund der 'li'-Elemente überdeckt:

#nav a  
{  
  background: #042;  
  display: block;  
}

Auch ein Hover-Effekt wäre denkbar: Beim Überfahren eines Menüpunkts erscheint das betreffende Hintergrundbild. Dazu die obigen Zeilen abändern:

#foo, #foo a:hover { background: url(foo.png) }  
  
#bar, #bar a:hover { background: url(bar.png) }  
  
#baz, #baz a:hover { background: url(baz.png) }

Der Weisheit letzter Schluss ist das aber immer noch nicht, denn die Hintergrundbilder sollten in _einer_ Grafikdatei (CSS-Sprites) zusammengefasst sein:

#nav li, #nav a:hover { background: url(foobarbaz.png) }  
  
#foo, #foo a:hover { background-position: 0 0 }  
  
#bar, #bar a:hover { background-position: 0 21px }  
  
#baz, #baz a:hover { background-position: 0 42px }

Qapla'