Link der aktuellen Seite automatisch mit CSS hervorheben lassen
0 0 
Gunnar Bittersmann
0 0 0 0 0 0 0 0 0 0 0
0 
at
0
0 at
0
0
Link der aktuellen Seite automatisch mit CSS hervorheben lassen
Hi zusammen!
Ich möchte gerne auf allen Seiten meiner Homepage immer die gleiche Navigationsleiste einsetzen. Daß der Besucher auf einer bestimmten Seite ist, soll er daran erkennen können, daß der Link dieser aktuellen Seite fett dargestellt wird. Das möchte ich nicht in der Navigationsleiste aller meiner Unterseiten selber eintragen müssen, sondern mit CSS automatisch machen lassen.
- Geht das überhaupt? (Ich suche schon ziemlich lange danach ...)
- Wenn nicht mit CSS, vielleicht mit Javascript?
Vielen Dank fürs Lesen und für evtl. Tipps,
Chactory
-
mit CSS gehts nicht!
mit JavaScript ist es machbar, sowas wie das hier solllte reichen:
function aktuelleSeite() { var hier=location.href; var a=document.links; for (var i=0; i<a.length; i++) { if (a[i].href==hier) a[i].className="aktuell"; } }wesentlich sinnvoller ist es aber mittels serverseitiger Technik (zB mit PHP) die Navi zusammenzustellen und dabei jeweils
- die Links zur aktuellen Seite entfernen (denn wozu sollen die gut sein?)
- stattdessen einfach irgendwie hervorheben, wo man sich befindet in der Hierarchie der Seitennavigation.
-
@@noscript:
wesentlich sinnvoller ist es aber mittels serverseitiger Technik (zB mit PHP) die Navi zusammenzustellen und dabei jeweils
- die Links zur aktuellen Seite entfernen (denn wozu sollen die gut sein?)
Yep. „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])
Und wennschon JavaScript, das auch damit:
if (a[i].href==hier) { a[i].className="aktuell"; a[i].removeAttribute("href"); }Aber besser eine serverseitige Variante (PHP). Die Hervorhebung und Nichtverlinkung lässt sich dann auch mit der Auslagerung des Menüs in eine Include-Datei kombinieren.
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.-
Und wennschon JavaScript, das auch damit:
if (a[i].href==hier)
{
a[i].className="aktuell";
a[i].removeAttribute("href");
}Ist auch nicht besser, ein kastrierter link ist keiner. Wenn schon JS, dann aber auch semantisch korrekt, replaceChild wäre das Mittel der Wahl. ~JJ-
Vielen Dank allen für ihre Tipps!
(Leider bekomme ich Eure tollen Javascript-Ideen nicht eingebaut, ich weiß einfach nicht, wohin ich das kleine Script schreiben muß - aber das bekomme ich sicher noch heraus!)
Beste Grüße, Chactory
-
hi,
(Leider bekomme ich Eure tollen Javascript-Ideen nicht eingebaut, ich weiß einfach nicht, wohin ich das kleine Script schreiben muß - aber das bekomme ich sicher noch heraus!)
Was spricht denn gegen die CSS Variante?
Kind regards
-
Hallo Malcolm,
die CSS-Möglichkeit erkennt ja auch die Seite nicht automatisch, sondern ich muß genauso alles in jeder html-Datei eingeben.
Vielleicht habe ich aber auch die Feinheiten nicht verstanden ...
Meine Homepage ist so aufgebaut: Eine Hauptseite, die mit "#include file" (server side includes) zwei andere Seiten integriert, und zwar die Navigationsleiste, die ich gerne mit einer Datei für eine ganze Serie von Hauptseiten verwenden würde, und die Textdatei. (Reason why: Dadurch muß ich bei Änderungen nur die Textseite bearbeiten. Die etwas hastige Sorte Kollegen muß nur die Textseite ändern und zerschießt mir nicht mit irgendwelchen Editoren die Navigation.)
Mit besten Grüßen, Chactory
-
hi Chactory,
die CSS-Möglichkeit erkennt ja auch die Seite nicht automatisch, sondern ich muß genauso alles in jeder html-Datei eingeben.
Naja, du musst lediglich jeder Seite eine
<body id="startseite">, natürlich für jede Seite eindeutig, mit auf den Weg geben.und zwar die Navigationsleiste, die ich gerne mit einer Datei für eine ganze Serie von Hauptseiten verwenden würde,
Das ist kein Problem, in dieser Datei bekommt jeder Link eine id und eine Klasse,
<a href="#" class="main" id="startseite_menu">Startseite</a>Jetzt kannst du schon mit CSS das aussehen des Links auf der Startseite beeinflussen:
body#startseite a#startseite_menu { color: lila; }und die Textdatei. (Reason why: Dadurch muß ich bei Änderungen nur die Textseite bearbeiten.
Wenn du in deinen Textdateien die
<body id="sonstwas">einträgst, würde dass ganze auch Funktionieren.Kind regards
-
Hallo Malcolm Beck´s,
jetzt habe ich es vielleicht verstanden! ;-)
Man könnte also eine Navigation mit den entsprechenden Styles vorbereiten, jeden Link mit jeweils dem Style für seine Seite, und dieser spezielle Style tritt erst ein, wenn es die aktive Seite ist, weil nur dort im Header die zutreffende id steht?
Vielen Dank für Deine Mühe mit mir! Das hat mich mal wieder wesentlich weitergebracht!
Viele Grüße, Chactory
-
hi Chactory,
jetzt habe ich es vielleicht verstanden! ;-)
Ich hoffe nicht falsch :)
Man könnte also eine Navigation mit den entsprechenden Styles vorbereiten, jeden Link mit jeweils dem Style für seine Seite, und dieser spezielle Style tritt erst ein, wenn es die aktive Seite ist, weil nur dort im Header die zutreffende id steht?
Du darfst aber nicht vergessen jedem Link eine eindeutige ID zu geben, genauso ist es auch mit den body ids, da Empfiehlt sich ein einfaches Muster, beispielsweise:
<body id="startseite_body"> <body id="anderseite_body"> und in der Navigation <a href="#" class="main" id="startseite_menu">Startseite</a> <a href="#" class="main" id="andereseite_menu">Andere Seite</a>Dann kannst du im CSS alles zusammenfassen, Gruppieren,
body#startseite_body a#startseite_menu, body#andereseite_body a#andereseite_menu { color: lila; }Das ganze ist dann auch Browserübergreifend und Funktioniert in fast allen Browsern, die CSS unterstützen.
Kind regards
-
Hi Malcolm Beck´s,
Ich hoffe nicht falsch :)
... nein, hat schon prima geklappt! Deine weiteren Ergänzungen sind erneut sehr hilfreich, meine neuen CSS-Befehle arbeiten bereits.
Ein Problem jedoch kann ich nicht lösen: Der Internet Explorer und Opera zeigen die Hyperlinks an, wie gewünscht. Doch Firefox und Safari tun's nicht.
Könntest Du das mal überprüfen? TIA - Vielen Dank im Voraus!
Mit besten Grüßen, Chactory
-
Ein Problem jedoch kann ich nicht lösen: Der Internet Explorer und Opera zeigen die Hyperlinks an, wie gewünscht. Doch Firefox und Safari tun's nicht.
Das war meine eigene Schuld - diese Browser vertragen keine id- oder class-Namen, die mit Zahlen beginnen ... Nur - bescheuert! - jetzt zeigen IE, FF und Safari alles korrekt an, doch Opera nicht ...
-
hi,
jetzt zeigen IE, FF und Safari alles korrekt an, doch Opera nicht ...
Ohne zu wissen, was du gemacht hast, kann ich nichts weiter sagen.
Diese Technik habe ich nur noch auf einer Seite im Einsatz, und dort funktioniert es auch in Opera.Kind regards
-
Vielen Dank, daß Du noch einmal hier reingeschaut hast!
Ich schreibe nachher nochmal, wenn ich alles in Ruhe verglichen habe.
C.-
Hallo Malcolm Beck´s,
falls Du immer noch einmal die Geduld hast, hier nachzusehen. :-)
Deine Tipps sind verwirklicht!
In der Html-Datei: <a id="beispiel-css" href="datei.htm">Hyperlink</a>
In der CSS-Datei: #datei-id a#beispiel-css { background-color: #AA0000; }Komischerweise hat sich auch Opera jetzt bereiterklärt, diese Vorgehensweise anzuerkennen, obwohl ich nichts weiter geändert habe. ;-) Vielleicht habe ich DAU ja auch nur den Cache nicht geleert gekriegt ...
Leider gibt es keinen Weg, mehrdimensional zu verknüpfen, also z.B. hätte ich gerne so etwas gemacht, klappt aber nicht: <a id="beispiel-1-css" id="beispiel-2-css" href="datei.htm">Hyperlink</a>
Man kann nicht alles haben - bin auch so schon komplett begeistert! Vielen Dank nochmals!
Beste Grüße, Chactory
-
@@Chactory:
Leider gibt es keinen Weg, mehrdimensional zu verknüpfen, also z.B. hätte ich gerne so etwas gemacht, klappt aber nicht: <a id="beispiel-1-css" id="beispiel-2-css" href="datei.htm">Hyperlink</a>
Ein Element darf jedes Attribut nur einmal haben, '
<foo bar="baz" bar="quz">' geht nicht.Ein Element darf aber mehreren Klassen angehören: '
<foo class="baz quz">'.Man kann nicht alles haben
Was willst du denn?
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.-
Hi Gunnar,
vielen Dank für Deine Antwort!
Dein Tipp mit der Möglichkeit der Angabe mehrerer Klassen in einem Element war sehr lehrreich.
Was willst du denn?
... z.B. hätte ich gerne so etwas gemacht, klappt aber nicht: <a id="beispiel-1-css" id="beispiel-2-css" href="datei.htm">Hyperlink</a>
Ich hatte versucht, mit dem Attribut "id" ein Element einer oder zwei bestimmten Seiten zuzuordnen. Ich kann aber nur genau eine Seite zuordnen.
Live long and prosper
Vielen Dank, Du auch! ;-)
Gruß, Chactory
-
hi Chactory,
Ich hatte versucht, mit dem Attribut "id" ein Element einer oder zwei bestimmten Seiten zuzuordnen. Ich kann aber nur genau eine Seite zuordnen.
Meinst du damit ein Verschachteltes Menu? Also in der Form:
Oberbegriff
- Link_1
- Link_2
- Link_3
- Link_4
Oberbegriff2
Oberbegriff3Wenn ja, dann kannst du dass mit CSS lösen.
Das ist dann zwar Umständlich, weil du jede Seite in betracht ziehen musst, brauchst aber am HTML nichts weiter ändern.
Beispiel:
body#startseite a#hauptmenu { color:red; } body#startseite a#haupt_unter_menu { color:red; }<a href="#" id="hauptmenu">Startseite</a> <a href="#" id="haupt_unter_menu">Start Untermenu</a>Beide wären in diesem Fall Rot.
Kind regards
-
Hallo Malcolm Beck's,
vielen Dank, daß Du erneut hier im Forum nachgesehen und geantwortet hast! :-)
Ja genau um so ein verschachteltes Menue geht es, und ich hatte es bereits selbst so ausprobiert, aber es ging nicht. Möglicherweise war ein Schreibfehler oder Syntaxfehler die Ursache, denn heute - durch Dein Posting zu einem weiteren Versuch angeregt - hat es nun doch geklappt.
Ich verwende eine Datei, die per SSI (Server side includes) jeweils ein Hauptmenue und dann ein bis zwei Untermenues und zuletzt die eigentliche Inhaltsseite nachlädt. So können meine Kollegen zukünftig ganz einfach mit einem Content Management System ihre Texte verändern, ohne die Navigation oder das Seitenlayout zu verletzen.
Jetzt hat wirklich alles funktioniert, verwirklicht ist es hier: http://www.zip-kiel.de/2psychiatrie/7le/700lehre.htm (Andere Teile der Website sind noch nicht umgestellt.)
Nochmals vielen Dank! Genial, daß Du mir die Lösung eines seit bestimmt zwei oder drei Jahren offenen Problems ermöglicht hast!
Herzliche Grüße, Chactory
-
-
-
-
-
-
-
-
-
Hallo.
<a href="#" class="main" id="startseite_menu">Startseite</a>
<a href="#" class="main" id="andereseite_menu">Andere Seite</a>[/code]Der inflationäre Einsatz von ID ist nur für alte Browser sinnvoll. Neuere verstehen auch Attribut- und Nachbar-Selektoren.
MfG, at-
hi,
Der inflationäre Einsatz von ID ist nur für alte Browser sinnvoll. Neuere verstehen auch Attribut- und Nachbar-Selektoren.
Ältere Browser sollen ja berücksichtigt werden, in diesem Thread war zwar nie die rede davon, ich gehe aber einfach mal davon aus.
Kind regards
-
-
-
COOL, ES KLAPPT!
Excuse me for shouting. ;-)
Chactory
-
-
-
-
-
-
-
Hallo.
„Verlinke niemals auf die aktuelle Seite.“
Was in dieser Absolutheit natürlich Unsinn ist.
MfG, at
-
Ergänzung zu:
mit JavaScript ist es machbar, sowas wie das hier solllte reichen:
function aktuelleSeite() { var hier=location.href; var a=document.links; for (var i=0; i<a.length; i++) { if (a[i].href==hier) { var span=document.createElement("span"); while (a[i].childNodes.length>0) { span.appendChild(a[i].firstChild); } a[i].parentNode.replaceChild(span, a[i]); } } }hier wird nun der link durch ein span ersetzt. Evtl. kann dort noch eine bestimmte Klasse ergänzt werden (
span.className="aktuell"), aber eigentlich sollte sowas wie#navi span {...}im CSS ausreichen
-
Vielen Dank allen für ihre Hilfe und Kommentare!
Auf meiner Website befinden sich ausschließlich Html- und CSS-Befehle. Auch bewußt, um keine sicherheitskritischen Programmiersprachen zu verwenden und um niemanden auszusperren, der diese nicht verwenden kann oder will.
Leider kann ich nicht mir dem von Euch favorisierten PHP umgehen ... Aber ein kleines JavaScript werde ich vielleicht noch integrieren können.
Beste Grüße, Chactory
-
hi,
Leider kann ich nicht mir dem von Euch favorisierten PHP umgehen ... Aber ein kleines JavaScript werde ich vielleicht noch integrieren können.
Du brauchst nicht mal auf Javascript zu greifen, dein vorhaben lässt sich auch ganz leicht mit CSS umsetzen.
Kind regards
-