Aktiven Anker hervorheben?
Michael König
- css
Hallo zusammen!
Ich habe beim Stöbern durchs Netz eine Seite mit einem interessanten Feature entdeckt. Oben gibt's ein Inhaltsverzeichnis, unten folgt dann der komplette Text, natürlich sind die Überschriften mit Ankern versehen, so daß man mit einem Klick auf die Überschrift im Inhaltsverzeichnis direkt zum entsprechenden Absatz springen kann. Das ist ja noch alles einfach.
Ungewöhnlich ist, daß diese angesprungene Überschrift dann auch gleich markiert wird mit einem roten Strich am Rand.
Wie funktioniert das? Ist das CSS, wird das mit Javascript realisiert?
Hier mal der Link zur Seite (bereits mit markiertem Anker):
http://tortoisesvn.tigris.org/docs/TortoiseSVN_de/help-onepage.html#tsvn-ch-0-sect-2
Ich hab' mal versucht, mich durch den Quelltext und die CSS-Definitionen zu graben, leider ist das alles sehr verschachtelt...
Würde das Ganze gerne auch in eigenen Projekten verwenden, ich hab' nur leider keine Ahnung, wie das funktioniert. Bin für jede Hilfe dankbar!
Danke schonmal im Voraus, schönen Sommertag noch,
Michi
http://www.fotoseite.net
Hallo,
Ungewöhnlich ist, daß diese angesprungene Überschrift dann auch gleich markiert wird mit einem roten Strich am Rand.
Wie funktioniert das? Ist das CSS, wird das mit Javascript realisiert?
Das funktioniert mit CSS und der Pseudoklasse :target.
a:target {
border-right: 0.125em solid #f00;
}
Gruß
Alexander Brock
Danke für die superschnelle Antwort!
Funktioniert perfekt und tadellos!
Das funktioniert mit CSS und der Pseudoklasse :target.
a:target {
border-right: 0.125em solid #f00;
}
Hallo Michael,
Funktioniert perfekt und tadellos!
Allerdings nur in moderneren Browsern wie aktuellen Mozilla-Versionen. In
meinem Camino 0.7, der noch auf der Rendering Engine von Mozilla 1.0 basiert
existiert das noch nicht.
Der Grund liegt darin, daß die Pseudoklasse :target erst in CSS 3 definiert
wurde. Der entsprechende Teil von CSS 3 ist zwar schon eine Candidate
Recommondation, ist aber eben noch kein Standard. Teilweise wurde schon
angefangen, dies zu implementieren. Trotzdem würde ich mich leider noch
nicht darauf »verlassen«, daß das vorhanden ist, sondern es als zusätzliches
Schmankerl nehmen. Was es ja auch ist.
Tim
Hallo.
Allerdings nur in moderneren Browsern wie aktuellen Mozilla-Versionen. In
meinem Camino 0.7, der noch auf der Rendering Engine von Mozilla 1.0 basiert
existiert das noch nicht.
Was allerdings heute schon funktioniert, ist "a" die für "a:target" gedachten Eigenschaften zu geben und diese bei "a:link", "a:visited" etc. wieder zu überschreiben.
MfG, at
Hi,
Was allerdings heute schon funktioniert, ist "a" die für "a:target" gedachten Eigenschaften zu geben und diese bei "a:link", "a:visited" etc. wieder zu überschreiben.
Das würde aber alle a-Elemente ohne href-Attribut formatieren, nicht nur den gerade angewählten Anker.
Außerdem ist für das Anspringen (außer bei Uralt-Browsern wie Netscape 4.x) als Ziel ein ID-Attribut ausreichend, es braucht gar kein a-Element als Ziel.
cu,
Andreas
Hallo.
Das würde aber alle a-Elemente ohne href-Attribut formatieren, nicht nur den gerade angewählten Anker.
Du hast Recht.
Außerdem ist für das Anspringen (außer bei Uralt-Browsern wie Netscape 4.x) als Ziel ein ID-Attribut ausreichend, es braucht gar kein a-Element als Ziel.
In meinem CSS unterstütze ich diese Uralt-Browser kaum, aber die Funktion möchte ich auch dort gewährleisten -- zumal <a name="xyz"> ja noch immer nicht falsch ist.
MfG, at