• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Besuchten Link einfärben

L

lasse995

Neues Mitglied
Hi,
ich habe folgendes Problem:

Bei einer Website ist ein Menü in dem immer der Link eingefärbt werden soll (css: background-color: #feb280) auf dessen Seite man sich momentan befindet.
wie ist das nur mit HTML und CSS möglich??
also wenn ich auf link1 klicke soll link1 die ganze zeit gefärbt sein während ich seite1.html besuche.

Danke schon mal
lasse995
 
lasse995 schrieb:
wie ist das nur mit HTML und CSS möglich??
Zum Vergrößern anklicken....
Das Auszeichnen eines Links mit HTML wie gewohnt, das Färben mit CSS wie gewohnt.

Das Entscheiden, auf welcher Seite man sich befindet, geht nicht mit HTML/CSS, dazu brauchst Du eine serverseitige Programmiersprache, mit der Du dem aktuellen Link eine besondere Klasse gibst, die dann per CSS gefärbt wird.

Wenn Du jede Seite als eigene HTML-Seite vorliegen hast, in der das Menü jedesmal neu vorkommt, dann geht das natürlich auch rein mit HTML/CSS :-)
 
Nein, ich habe eine menue.txt, die ich in jeder Seite mit <!--#include virtual:"/menue.txt"--> einfüge. Wenn das auf jeder Seite extra wäre, dann wäre das ja kein Problem.
 
Gibt es da ne andere Lösung?
Mit Javascript?
Ich habe keine Ahnung von Javascript, vondaher müsste mir jemand erklären wie genau ich wann und vor allem was mache...
 
Indem Du Deinem serverseitigen Script übergibst, auf welcher Seite sich der Besucher gerade befindet und dann beim richtigen Link die Klasse setzt.
Meistens arbeitet man ja sowieso mit serverseitigem Include, wo man auch die ID der Seite mitgibt. Da hast Du dann Deine Seitenkennung.
 
ich arbeite mit <!--#include virtual="/menue.txt"> in der regel würde ich ein php script schreiben aber ich darf kein php benutzen (bin hier nur der praktikant).
 
Du kannst auch jede beliebige andere Sprache verwenden, wenn Du die CGI-Schnittstelle nutzt. Perl z.B.

Wenn Du das alles nicht hast, dann wird Dir nichts anderes übrig zu bleiben, als das Menü für jede Seite neu zu schreiben.
 
das klingt nicht gut :(
das problem ist schon mal gelöst worden, auf der alten Website funktioniert das auch irgendwie aber niemand errinnert sich wie das passieren konnte :D
trotzdem danke
 
Ich meine, die Auszeichnung von Links und einem Menü erfolgt über HTML, also eine Liste und darin Listenelemente mit Links.
Daran ist schonmal nicht zu rütteln.

Dann das Aussehen: Das passiert natürlich mit CSS. Dazu gibts ne eigene Klasse oder sogar eine ID (ist ja nur eine Seite, die ich besuchen kann), die entsprechend formatiert wird.

Nun ist die Frage, woran erkennt man den aktiven Link? HTML und CSS stellen solche Informationen nicht bereit. Bei CSS wird gerne die Pseudoklasse ":active" damit verwechselt, tatsächlich ist das aber nur der Zustand eines ausgewählten Links, also von dem Moment, wo man ihn anklickt bis dahin, wo dann eine neue Seite geladen wird. Das ist also auch nicht das, was Du willst.

Die aktuelle Seite kann man nur über die aktuelle URL identifizieren oder über einen Parameter.

Ja, man könnte das auch mit JavaScript machen...das Script liest die URL der aktuellen Seite und entscheidet daraufhin, welcher Link der der aktuellen Seite ist. Dazu kann man die Links mittels DOM durchsuchen und die entsprechende Klasse manuell hinzufügen.

Wenn JavaScript abgeschaltet ist, wird der aktelle Link halt nicht markiert.

Finde ich persönlich unglücklich, das mit JS zu machen, aber wenn man es unbedingt braucht und keine serverseitige Lösung einsetzen darf...?
 
okay, ich hab noch was gefunden:
Code: 
<head>
<script>
function switchColors(element, color)
{
links=document.getElementsByTagName("a") ;
for (var i = 0 ; i < links.length ; i ++)
links.item(i).style.color = 'blue' ;

element.style.color=color ;
}
</script>
</head>
<body>
<a href="index.html" onmouseover="switchColors(this, 'green') ;">Start</a>
</body>
daran müsste folgendes verändert werden(ohne das ich weiß wie das geht ;))
-darf nur für die Links im <div id="navi"> gelten
-muss die Hintergrundfarbe des Links ändern

is das möglich bzw. hilft mir jemand dabei?? :)
 
Das geht mit CSS.
#navi a:hover {background-color: green;}

Ach so vergessen:
und natürlich:
#navi a:link {background-color: blue;}

und aufpassen, dass du die richtige Reihenfolge verwendest.
 
Zuletzt bearbeitet von einem Moderator:
Möglich, ja.
Aber jetzt sind wir bei Hardcore-JavaScript und nicht bei CSS :-)

getElementsByTagName() sorgt dafür, dass hier ALLE Links gesucht werden. Das musst Du durch eine geeignete Funktion ersetzen.
Du kannst auch mit getElementById() nach Deinem Menü suchen und Dich dann per DOM durch die Kinder dieses Element hangeln und nach Links suchen.
Aber da müsste ich selber rumprobieren. Da schau ich immer bei SELFHTML: JavaScript/DOM rein. Die Objektreferenz ist sehr hilfreich, wenn man ungefähr weiß, wonach man sucht. Wenns für Dich nicht reicht, entweder findet sich hier jemand, oder Du stellst das nochmal im JavaScript-Unterforum rein.
 
auf seite 1:
Code: 
<body id="eins">
auf seite 2:
Code: 
<body id="zwei">
im css:
Code: 
li {
list-style: none;
background: white;
color: black;
}

li a:focus, #eins #seiteeins a,  #zwei #seitezwei a {
background: silver;
}

die links:
Code: 
<li id="seiteeins"><a href="seite1.php">Home</a></li>
<li id="seitezwei"><a href="seite2.php">Stadtrat</a></li>
statt x.php kannst du auch x.htm oder so nehmen.
das ganze musst du dann für jeden link,- und auf jeder verlinkten seite im body machen, und auch im css zufügen.

hoffe ich habs verständlich rübergebracht :-)

gruss steve
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben