aktiven bereich in der navigation anders färben

[tilgino]

hi,

ich habe ein menü mit listenelementen erzeugt...

funktioniert alles ganz wunderbar

nun aber zum problem:
wenn ich nun sagen wir den bereich "projects" anklicke, sprint der browser zur projects.htm seite. nun soll hier der button "projects" anders gefärbt sein als die anderen navielemente, weil es den momentanen aufenthaltsort innerhalb der seite kennzeichnen soll.

da aber die gesammte navi dem ul bzw. li element vom css unterliegt gehts nicht so einfach.

gibt eine möglichkeit einzelne *variable* listenelemente von der formatierung auszuschliessen und mit andern werten zu belegen ohne für jeden navigationspunkt gleich ein eigenes html oder css haben zu müssen?

welche möglichkeiten gibts zu diesem problem?

gruss
peter

[Gernot Back]

Hallo tilgino,

wenn ich nun sagen wir den bereich "projects" anklicke, sprint der browser zur projects.htm seite. nun soll hier der button "projects" anders gefärbt sein als die anderen navielemente, weil es den momentanen aufenthaltsort innerhalb der seite kennzeichnen soll.

da aber die gesammte navi dem ul bzw. li element vom css unterliegt gehts nicht so einfach.

Da würde ich dir für das aktive Element zum ID-Selektor raten, von wegen dessen Spezifität

Gruß Gernot

[tilgino]

also z.B

für normale buttons:

li
   {
   background-color: #ffc;
   }

für aktiven button:

li.aktiv
   {
   background-color: #ccc;
   }

und dann im HTML-Code den´m aktiven li noch class="aktiv" zuweisen

richtig??

[Gernot Back]

Hallo tilgino,

also z.B

für normale buttons:

li
   {
   background-color: #ffc;
   }

für aktiven button:

li.aktiv
   {
   background-color: #ccc;
   }

und dann im HTML-Code den´m aktiven li noch class="aktiv" zuweisen

Mit einer Klasse würde das zwar auch funktionieren aber ist nicht der ID-Selektor, der der viel besser passt (du hast ja definitiv immer nur ein aktives Element in der Naviliste) und außerdem eine noch viel höhere Spezifität hat.

  
li#aktiv  
  {  
   background-color: #ccc;  
  }  

Gruß Gernot

[Martin Hölter]

Hi!

Mit einer Klasse würde das zwar auch funktionieren aber ist nicht der ID-Selektor, der der viel besser passt (du hast ja definitiv immer nur ein aktives Element in der Naviliste)

nicht immer.

und außerdem eine noch viel höhere Spezifität hat.

Stimmt natürlich, aber was bringt mir das (für sich alleine genommen) für Vorteile?

Gruß aus Iserlohn

Martin

[Gunnar Bittersmann]

tilgino,
Du denkst auch daran, dass der angewählte Menüpunkt auf der Seite dann gar kein Link mehr sein sollte? Ein Link auf einer Seite zu derselben macht keinen Sinn und schadet der Benutzerfreundlichkeit.

Live long and prosper,
Gunnar

[Gernot Back]

Hallo Gunnar,

Du denkst auch daran, dass der angewählte Menüpunkt auf der Seite dann gar kein Link mehr sein sollte? Ein Link auf einer Seite zu derselben macht keinen Sinn und schadet der Benutzerfreundlichkeit.

insofern bietet es sich vielleicht an, nur die in der Naviliste enthaltenen Links zu formatieren und gewöhnlichen Text anders.

  
ul#navi {  
  width:5em;  
}  
  
ul#navi li {  
  width:100%;  
  float:left;  
  background-color:#ccc;  
}  
  
ul#navi li a {  
  margin:0;  
  width:100%;  
  float:left;  
  background-color:#ffc;  
}

Ich weiß natürlich nicht, ob das Tilginos Vorstellungen entspricht, wenn er eine verschachtelte Navigationsliste hat und da vielleicht unerwünschte graue Balken durch Einrückung der Listenpunkte entstehen.

Gruß Gernot

[tilgino]

danke ihr beiden für eure hilfe,

ich mach grad ein layout für csszengarden.com
soweit hab ichs mal halbwegs kapiert mit den id und class dingen...
so funktionierts auch

wisst ihr ein buch das man als nachschlag-referenz verweden kann und nicht unbedingt ganz bei null beginnt?

grüsse
peter

[Gunnar Bittersmann]

tilgino,

wisst ihr ein buch das man als nachschlag-referenz verweden kann und nicht unbedingt ganz bei null beginnt?

http://aktuell.de.selfhtml.org/extras/buch.htm, das gibt’s sogar http://de.selfhtml.org/@title=online. ;-)

http://www.edition-w3c.de/#Buecher

Online:
[CSS2@de], [CSS21]

Live long and prosper,
Gunnar