Link aktiver Seite anderst darstellen
Torsten
- css
Ich hoffe meine Frage ist nicht zu doof. Also ich habe z.B. vier Seiten die ich mittels Links aufrufe (wie auch sonst).
Ich möchte aber den Link der aktiv angezeigten Seite mit einer anderen Hintergrundfarbe darstellen. Geht das überhaut mit css, oder muss ich dafür JavaScript verwenden?
Hier die Links in den HTML-Seiten:
<a class="Menu01" href="Testseite01.htm">Link 1</a><br>
<a class="Menu01" href="Testseite02.htm">Link 2</a><br>
<a class="Menu01" href="Testseite03.htm">Link 3</a><br>
<a class="Menu01" href="Testseite04.htm">Link 4</a><br>
Hier der Inhalt der CSS-Datei:
A.Menu01:Link, a.Menu01:Visited{
Background : #00ff00;
Display : Block;
Width : 160px;
height: 30px;
}
A.Menu01:Hover{
Background : #ff0000;
Display : Block;
Width : 160px;
height: 30px;
}
A.Menu01:active{
Background : #0000ff;
Display : Block;
Width : 160px;
height: 30px;
}
Wenn du statische HTML-Seiten hast (davon gehe ich mal aus sonst hättest du die Frage nicht gestellt sondern das ganze mit PHP o. ä. schon längst gelöst) ist es das einfachste "per Hand" dem Link der aktiven Seite ein anderes Style-Sheet mit einem anderen Aussehen zu geben. Wozu Javascript?
Manche meinen der Link zu sich selbst wäre sowieso nicht gut. Von daher wäre es auch eien Lösung den Link "per Hand" im HTML code zu einer Text-Zeile zu machen die kein Link ist.
Lieber Torsten,
<a class="Menu01" href="Testseite01.htm">Link 1</a><br>
<a class="Menu01" href="Testseite02.htm">Link 2</a><br>
<a class="Menu01" href="Testseite03.htm">Link 3</a><br>
<a class="Menu01" href="Testseite04.htm">Link 4</a><br>
wie man Navigationsleisten (oder auch "Menüs") besser macht, steht hier: <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=CSS-basierte Navigationsleisten>. Wenn Du Dich an die dortige Struktur hälst, dann kannst Du dem Link, der auf sich selbst verweist, eine besondere CSS-Klasse, oder besser gleich eine ID geben, die Du dann mit CSS entsprechend anders (ohne "t") gestaltest.
Es wäre wahrscheinlich die beste Lösung, wenn Du diesen Link ent-linkst, sodass der Verweis als solcher überhaupt nicht mehr existiert! Dann kannst Du den "ehemaligen" Linktext mit einem <span> anstelle eines <a> umspannen, oder einfach nur aus dem <a href=""> das href-Attribut entfernen.
Beispiel:
<ul id="navi">
<li><a href="index.html">Home</a></li>
<li><a id="aktuell">Impressum</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Erstmal danke für die ausführlichen Antworten,
aber ich habe leider eines vergessen zu erwähnen. und zwar erstelle bzw. verwalte ich die Links in einer zentralen Template-Datei. D.h. wenn ich die Links erstelle kann ich nicht angeben, welche Seite gerade die aktuell augerufene ist da ich das zu diesem Zeitpunkt ja gar nicht weiss.
Oder habe ich Dich falsch verstanden?
Lieber Torsten,
wenn ich die Links erstelle kann ich nicht angeben, welche Seite gerade die aktuell augerufene ist da ich das zu diesem Zeitpunkt ja gar nicht weiss.
und wie gelangen die Links dann auf die Seite? Und wo kann man da (programmiertechnisch?) eingreifen?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
und wie gelangen die Links dann auf die Seite? Und wo kann man da (programmiertechnisch?) eingreifen?
Ich erstelle mit dem Dreamweaver eine Templatedatei, in welcher die Links enthalten sind. Und jeder Seite gebe ich dieses Templat als Volage mit, d.h. wenn ich an den Links Änderungen vornehme, dann werden die automatisch bei allen Seiten vorgenommen. Hoffe ich habe es einigermaßen verständlich rüber gebracht.
Gruß
Torsten
Hallo,
Ich erstelle mit dem Dreamweaver eine Templatedatei, in welcher die Links enthalten sind. Und jeder Seite gebe ich dieses Templat als Volage mit, d.h. wenn ich an den Links Änderungen vornehme, dann werden die automatisch bei allen Seiten vorgenommen. Hoffe ich habe es einigermaßen verständlich rüber gebracht.
Baue in die Template-Datei eine if-Abfrage vor jeden Navi-Eintrag ein:
Wenn Linkziel == $_SERVER['REQUEST_URI'] dann kein Link sondern lediglich Listeneintrag ansonsten normaler Link.
Alternativ könntest du das auch die Navieinträge in ein Array packen und das per foreach durchlaufen lassen.
Schöne Grüße,
Willi