nicht angemeldet
Link der gerade offenen Seite in Navigation "aktiv"
0 0 0 0 
Gunnar Bittersmann
Link der gerade offenen Seite in Navigation "aktiv"
Hallo,
ich baue gerade mit ein .css basiertes Layout mit Navigation zur Linken.
Folgendes Problem:
Aktive Links sollen in einer anderen Farbe anzeigt werden. Wenn wir bspw. gerade auf der Seite "Nachrichten" sind - sollte dieser Link in der Nagivation anders erscheinen.
Mir ist klar, wie ich die Links per .css für "link", "hover" gestalten kann - wie aber kann ich den aktiven Link anders darstellen - geht dies über .css oder nur über php - also woher weiss die Seite, welches gerade aktiv ist?
Der Befehl "active" von .css funktioniert dabei nicht.
Hier ein Bespiel von einer Seite, wo es funktioniert:
Linkes Menu - http://tut.php-q.net/frames.html
<a href="frames.html" class="active">3-Spalten-Layout</a>
Wie kommt die "active" Klasse rein?
Vielen Dank für Eure Hilfe!
Ben
-
hi,
Mir ist klar, wie ich die Links per .css für "link", "hover" gestalten kann - wie aber kann ich den aktiven Link anders darstellen - geht dies über .css oder nur über php
Über HTML und CSS.
also woher weiss die Seite, welches gerade aktiv ist?
"Die Seite" weiss gar nichts.
Der Befehl "active" von .css funktioniert dabei nicht.
Das ist kein Befehl - sowas gibt es in CSS nicht.
Und :active ist nur so lange gültig, wie der Nutzer das Element aktiviert - also bspw. mit der Maus darauf drückt.Hier ein Bespiel von einer Seite, wo es funktioniert:
<a href="frames.html" class="active">3-Spalten-Layout</a>
Na also, da siehst du doch, wie's funktioniert.
Wie kommt die "active" Klasse rein?
So wie alles andere - das href-Attribut, der Linktext, der Link selber - auch. Jemand hat es dort hingeschrieben.
Ob das ein Nutzer mit seinem Text-Editor war, oder ein Script, oder ... - das wissen wir nicht.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hi,
Aktive Links sollen in einer anderen Farbe anzeigt werden. Wenn wir bspw. gerade auf der Seite "Nachrichten" sind - sollte dieser Link in der Nagivation anders erscheinen.
Mir ist klar, wie ich die Links per .css für "link", "hover" gestalten kann - wie aber kann ich den aktiven Link anders darstellen - geht dies über .css oder nur über php - also woher weiss die Seite, welches gerade aktiv ist?
Eventuell kannst du da mit Javascript noch was machen, wenn du bei Links das href-Attribut mit der aktuellen URL vergleichst. Das setzt aber dann voraus, dass beim Client JS aktiviert ist.
Besser ist es mit einer serverseitigen Technik wie z.B. PHP oder wenn du nur statische Seiten hast kannst du es auch fest reinschreiben.Der Befehl "active" von .css funktioniert dabei nicht.
Das steht nicht fuer die aktuelle Seite, sondern fuer den Link, der gerade aktiviert wurde (z.B. durch anklicken).
Hier ein Bespiel von einer Seite, wo es funktioniert:
Linkes Menu - http://tut.php-q.net/frames.html
<a href="frames.html" class="active">3-Spalten-Layout</a>
Wie kommt die "active" Klasse rein?
Das geschieht mit PHP bzw. steht fest in den html-Dateien.
mfG,
steckl-
Hallo,
Das geschieht mit PHP bzw. steht fest in den html-Dateien.
Was mach ich denn, wenn mein Menü im Template eines CMS (oder in meinem Fall von Jlog) steht und daher in alle Seiten gleich eingebunden wird?
Dank und Gruß
ottogal-
hi,
Was mach ich denn, wenn mein Menü im Template eines CMS (oder in meinem Fall von Jlog) steht und daher in alle Seiten gleich eingebunden wird?
Dann lässt du die Entscheidung, welcher Menüpunkt der "aktive" ist, und daher gesondert ausgegeben werden soll, vom Script treffen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
Hallo,
erst mal vielen Dank für die antworten - at steckl.
Ok - ich habe das jetzt statisch in jede geöffnete html Datei reingeschreiben, hier die zwei Dateien:
INDEX SEITE:
------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html>
<head><title>:link, :visited, :focus, :hover, :active</title>
<style type="text/css">
a:link { font-weight:bold; color:blue; text-decoration:none; }
a:visited { font-weight:bold; color:blue; text-decoration:none; }a:hover { font-weight:bold; color:green; text-decoration:none; }
a:active { font-weight:bold; color:red; text-decoration:none; }h1:hover { background-color:green; }
h1:active { background-color:#red; }}
</style></head>
<body>
<h1>Navigation</h1>
<p>
<a href="../index.htm/" class="active">Index</a><br>
<a href="../videos.htm/">Videos</a><br>
<a href="../meineseite.htm/">Meine Seite</a><br>
<a href="../suche.htm/">Suche</a>
</p></body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head><title>:link, :visited, :focus, :hover, :active</title>
<style type="text/css">
a:link { font-weight:bold; color:blue; text-decoration:none; }
a:visited { font-weight:bold; color:blue; text-decoration:none; }a:hover { font-weight:bold; color:green; text-decoration:none; }
a:active { font-weight:bold; color:red; text-decoration:underline; }h1:hover { background-color:green; }
h1:active { background-color:#red; }
</style></head>
<body>
<h1>Navigation</h1>
<p>
<a href="../index.htm/">Index</a><br>
<a href="../videos.htm/" class="active">Videos</a><br>
<a href="../meineseite.htm/">Meine Seite</a><br>
<a href="../suche.htm/">Suche</a>
</p></body>
</html>
Was mache ich falsch?
Vielen Dank
BEN-
Hi,
Was mache ich falsch?
Mit a:active formatierst du die Pseudo-Klasse :active.
Du willst aber wohl die Klasse active formatieren.
Das geht mit ".active{...}" fuer alle Elemente mit Klasse active oder mit "a.active{...}" fuer alle Links mit der Klasse active.mfG,
steckl-
at steckl:
Okay, ich habe jetzt die Klasse "active" mit ".active" definiert.
Es funktioniert aber noch immer nicht -
------------------------------------------------
VIDEOS:
------------------------------------------------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head><title>:link, :visited, :focus, :hover, :active</title>
<style type="text/css">
A:link, A:visited
{ font-weight:bold;
color:black;
text-decoration:none;
}A:hover
{ font-weight:bold;
color:green;
text-decoration:none;
}A:active
{ font-weight:bold;
color:red;
text-decoration:none; }.active
{ font-weight:bold;
color:red;
text-decoration:none; }h1:hover { background-color:green; }
h1:active { background-color:#red; }
</style></head>
<body>
<h1>Navigation</h1>
<p>
<a href="../index.htm/">Index</a><br>
<a href="../videos.htm/" class="active">Videos</a><br>
<a href="../meineseite.htm/">Meine Seite</a><br>
<a href="../suche.htm/">Suche</a>
</p></body>
</html>
------------------------------------------------
Index:
------------------------------------------------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head><title>:link, :visited, :focus, :hover, :active</title>
<style type="text/css">
A:link, A:visited
{ font-weight:bold;
color:black;
text-decoration:none;
}A:hover
{ font-weight:bold;
color:green;
text-decoration:none;
}A:active
{ font-weight:bold;
color:red;
text-decoration:none; }.active
{ font-weight:bold;
color:red;
text-decoration:none; }h1:hover { background-color:green; }
h1:active { background-color:#red; }}
</style></head>
<body>
<h1>Navigation</h1>
<p>
<a href="../index.htm/" class="active">Index</a><br>
<a href="../videos.htm/">Videos</a><br>
<a href="../meineseite.htm/">Meine Seite</a><br>
<a href="../suche.htm/">Suche</a>
</p></body>
</html>
Vielen Dank Steckl für die Hilfe!
BEN
-
Hello out there!
<h1>Navigation</h1>
<p>
<a href="../index.htm/" class="active">Index</a><br>Warum ist das immer noch ein Link?
<a href="../videos.htm/">Videos</a><br>
<a href="../meineseite.htm/">Meine Seite</a><br>
<a href="../suche.htm/">Suche</a>
</p>Frei nach wahsaga: "ich möchte furchtbar gern eine liste sein, bitte bitte lass mich doch ...!!!1"
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
-
-
at steckl
sonderbarer Weise funktioniert:
A.active
aber
.active nicht.
------------------------------------------------------
mit A.active:
------------------------------------------------------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head><title>:link, :visited, :focus, :hover, :active</title>
<style type="text/css">
A:link, A:visited
{ font-weight:bold;
color:black;
text-decoration:none;
}A:hover
{ font-weight:bold;
color:green;
text-decoration:none;
}A:active
{ font-weight:bold;
color:red;
text-decoration:none; }A.active
{ font-weight:bold;
color:red;
text-decoration:none; }h1:hover { background-color:green; }
h1:active { background-color:#red; }
</style></head>
<body>
<h1>Navigation</h1>
<p>
<a href="../index.htm/">Index</a><br>
<a href="../videos.htm/" class="active">Videos</a><br>
<a href="../meineseite.htm/">Meine Seite</a><br>
<a href="../suche.htm/">Suche</a>
</p></body>
</html>
------------------------------------------------------
mit .active:
-----------------------------------------------------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head><title>:link, :visited, :focus, :hover, :active</title>
<style type="text/css">
A:link, A:visited
{ font-weight:bold;
color:black;
text-decoration:none;
}A:hover
{ font-weight:bold;
color:green;
text-decoration:none;
}A:active
{ font-weight:bold;
color:red;
text-decoration:none; }.active
{ font-weight:bold;
color:red;
text-decoration:none; }h1:hover { background-color:green; }
h1:active { background-color:#red; }
</style></head>
<body>
Was ist beim 2ten Mal falsch???
<h1>Navigation</h1>
<p>
<a href="../index.htm/">Index</a><br>
<a href="../videos.htm/" class="active">Videos</a><br>
<a href="../meineseite.htm/">Meine Seite</a><br>
<a href="../suche.htm/">Suche</a>
</p></body>
</html>
-
hi,
sonderbarer Weise funktioniert:
A.active
aber
.active nicht.Herzlichen Glückwunsch, auch du hast sie entdeckt - die Spezifität von Selektoren.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-
Hello out there!
Aktive Links sollen in einer anderen Farbe anzeigt werden.
Mit "aktivem Link" meinst du "aktiven Menüpunkt"? Dieser sollte KEIN Link sein!!
http://forum.de.selfhtml.org/archiv/2007/3/t147617/#m957553
also woher weiss die Seite, welches gerade aktiv ist?
http://forum.de.selfhtml.org/archiv/2006/11/t140830/#m915156
Muss aber nicht PHP sein, SSI tut's auch.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)