navigationsverhalten in bibliothek

[flos]

Hallo zusammen

Ich habe folgende Navigation als Bibliothekselement gespeichert:

<!-- #BeginLibraryItem "/Library/Unbenannt.lbi" --><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td> <a class="navi" href="index.html" >Home<br>
</a><a class="navi" href="test.html">test<br>
</a><a class="navi" href="../../Library/test1.html">test1<br>
</a><a class="navi" href="../../Library/test2.html">test2<br>
</a><a class="navi" href="../../Library/test3.html">test3<br></a></td>
</tr>
</table><!-- #EndLibraryItem -->

im externen stylesheet ist die class "navi" mit den verschiedenen Zuständen definiert:
.navi {definitionen...}
.navi:hover {definitionen...}
.navi:active {definitionen...}

Das klappt alles. Nur funktioniert einfach der active Status nicht. Was muss ich zusätlich definieren, damit der active status angezeigt wird?


Vielen Dank für Eure Hilfe!

flos

[hero-master]

Hi flos
die Pseudoklasse :active beschribt nur den kurzen Zeitpunkt, während du den Mauszeiger auf dem Link geklickt hälst.
Wenn du den Link angeklickt hast, dann ist der Link bereits im Status ":visited"

Möglichkeiten, um den "aktiven"-Status darzustellen:
http://tuts.nicogutmann.de/css/link_aktiv.php

[flos]

danke für deinen link.

aber ich verstehe nicht.

Fürmich interessant ist: "Links auf einer neuen Seite markieren."

Allerdings hab ich es doch genau so gemacht...nur heisst meine Klasse halt .navi und nicht .aktiv

Was muss ich anders machen im css? oder im Bibliothekselement?
Oder muss ich irgendwas auf jeder html Seite noch einfügen?

[Torsten]

Vielleicht liegt der Hund hier begraben:

 .navi {definitionen...}
 .navi:hover {definitionen...}
 .navi:active {definitionen...}

Für Linkformatierungen sollte das so aussehen:

 .navi {definitionen...}
  .navi a:hover {definitionen...}
  .navi a:active {definitionen...}

Nur so als Denkanstoss

LG, Floh

[flos]

Leider hats nichts gebracht


Hat sonst jemand eine Idee?

[flos]

gibts denn niemand, der die navi als bibliothekselement gespeichert hat und es geschafft hat, dass die seite, die angezeigt wird in der navi markiert ist?

[hero-master]

Vlt. hilft das hier:
http://www.traum-projekt.com/forum/1...tive-menu.html

[flos]

danke, aber das ist mein eigener thread. und bei meinem jetzigen problem gehts um bibliothekselement in html seiten und nicht in php-seiten...

weiss denn niemand einen tipp?

[Andi]

Der a:active{...} ist für den Moment des drückens (wurde ja schon erwähnt). Nun willst du auf News klicken und der News Link soll in der news.html grün, grau oder was auch immer - jedenfalls meinst du, er sollte (a:active) sein.

Die Probleme sind:

1. Du musst nicht den active annehmen, sondern den visited, denn das ist der letzte Zustand der angezeigt wird. Vergess mal nicht, dass die Leute ja hin und her klicken und die Browser sich nun mal merken, dass geklickt wurde. Das mögliche reloaden lassen wir hier weg, weil du ja ein zweites Problem hast und das ist folgendes:

2. Du weist in einer Bibliotheksdatei eine bestimmte Formatierung aus einer externen CSS-Datei zu. Dies machst du mit class"...".

Beispiel

<a href="home.html" class="navi">Home</a>
<a href="news.html" class="navi">News</a>
<a href="about.html" class="navi">About</a>

Die externe CSS sieht so aus:

.navi:link{color:blue;}
.navi:visited{color:grey;}
.navi:hover{color:#red;}
.navi:active{color:#green;}

Nun steht bei dir überall class="navi" in den Links. Vergleiche mal die Angaben in der CSS mit class="navi". Das sind immer dieselben So kriegst du nie unterschiedliche Links zusammen. Du brauchst also erstmal unterschiedliche Stylezuweisungen in der HTML und das sieht so aus:

<a href="home.html" class="home">Home</a>
<a href="news.html" class="news">News</a>
<a href="about.html" class="about">About</a>

also änderst du ganz fröhlich deine Styledatei so um:

a:link{color:blue;}
.home:visited{color:grey;}
.news:visited{color:grey;}
.about:visited{color:grey;}
a:hover{color:#red;}
a:active{color:#green;}

und das ist auch wieder falsch, denn was passiert mit Aufruf der Seiten? Immer das gleiche Weil du ja nur mit einer Bibliotheksdatei arbeitest und nur einer CSS! Kurz: Die "visited" Anweisung musst du für jede Datei separat zuweisen. Das ganze nun korrigiert:

Die HTML:

<a href="home.html" class="home">Home</a>
<a href="news.html" class="news">News</a>
<a href="about.html" class="about">About</a>

Die CSS Standard:

a:link{color:blue;}
a:visited{color:grey;}
a:hover{color:red;}
a:active{color:green;}

Zusätzlich in die Seiten:

home.html

<style type="text/css">
.home:visited{color:grey;}
</style>

news.html

<style type="text/css">
.news:visited{color:grey;}
</style>

about.html

<style type="text/css">
.about:visited{color:grey;}
</style>

So klappt das erstmal. Andere Lösungen gibts sicher auch noch, aber das ist mir zuviel Kopfarbeit

Gruß Andi

[hero-master]

Hey Andy
Hast dir ja richtig Mühe gegeben
Ich habe auch noch ne kleine Idee zur guten Lösung von Andy :
Damit du dein CSS komplett in der externen Datei definieren kannst, kannst du ja jedem Body-Tag auf den Seiten eine ID zuweisen:

<body id="menupunkt-eins">

Und dann in der CSS-Datei:

#menupunkt-eins a.news {color:grey}

Ungefähr so:
http://nicogutmann.de/allerlei/bsp.php

[flos]

Vielen herzlichen Dank! Das hat echt was gebracht!

Da habt Ihr mich glücklich gemacht!!!!!!

Ich hatte erst noch Mühe, weil plötzlich alle Links auf der Seite so ausgesehen haben wie die Navilinks. Nun musste ich im css halt alle navilinks einzeln definieren, nachdem ich jeder Seite eine id zugewiesen habe.

Sieht nun so aus im css:

a.seite1{definitionen}
a.seite1:hover{definitionen}
a.seite2{definitionen}
a.seite2:hover{definitionen}
...
#seite1 a.seite1:visited{definitionen}
#seite1 a.seite2:visited{definitionen}
...


So klappts nun prima.

Ganz herlichen Dank an Andi und hero-master!!!!!