Problem mit a:active

Shuk · #1 (**permalink**) 24.03.2005, 10:46

Hi,

ich habe eine Seitennavigation, welche sich wie folgt aufbaut:

.nav-link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #000099;
text-decoration: none;
padding-left: 5px;
}
.nav-link a:link {
color: #000099;
}
.nav-link a:visited {
color: #000099;
}
.nav-link a:hover {
color: #FF0000;
}
.nav-link a:active {
color: #FF0000;
}

Soweit klappt auch alles, nur möchte ich, dass wenn man auf einen Navigatonspunkt geklickt hat, dieser auch farblich markiert bleibt. Der active Effekt wird zwar anfangs korrekt angewandt, aber sobald ich irgendwo auf der Seite (nicht Navigation) einen Klick mache, verschwindet der Effekt.

Wie kann ich dafür sorgen, dass der Navigationspunkt wirklich so lange markiert ist, wie die entsprechende Seite geöffnet ist? Oder geht das nicht mit CSS?

Danke
Shuk

netspy · #2 (**permalink**) 24.03.2005, 10:51

:active bedeute nicht, dass die Seite mit dem Link aufgerufen wurde.

http://www.w3.org/TR/CSS21/selector....pseudo-classes

Code:

The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

Also im Normalfall also nur der Zeitraum, den der Link angeklickt wurde. Möchtest du Links auf bestimmten Seiten hervorheben, musst du ihnen auf diesen Seiten bspw. eine andere Klasse geben.

Mario

ulle · #3 (**permalink**) 24.03.2005, 10:53

http://edition-w3c.de/TR/1998/REC-CS...eading-5.11.3

zum 2000mal, :active bezieht sich nicht auf das gerade angezeigt Dokument

Shuk · #4 (**permalink**) 24.03.2005, 13:11

HI,

danke schonmal für die Antworten. Das sich active nicht auf das aktuelle Dokument bezieht, wusste ich nicht.

Aber wie kann ich das denn jetzt lösen? Geht das dann überhaupt mit CSS oder muss ich auf Javascript zurückgreifen?

Gruß
Shuk

Swoop · #5 (**permalink**) 24.03.2005, 13:34

du könntest deine seite aus php zusammenbauen lassen und für den active status ne eigene class bauen:

#nav a.selected {

color: #xxxxxx;

}

und bei der seite, die grad active ist setzt du dann halt oben in der navleiste dem active link die class="selected"..

Shuk · #6 (**permalink**) 24.03.2005, 13:42

Hm, ja ok, dass es mit PHP, Javascript und ähnlichen Sprachen machbar ist, ist klar. Allerdings ist die betreffende Seite statisch, sprich nur HTML und CSS und das muss leider auch so bleiben.

Deshalb eben die Frage, ob sowas mit CSS überhaupt möglich ist. Notfalls werde ich eben noch Javascript einbauen, aber CSS wäre natürlich besser...

Swoop · #7 (**permalink**) 24.03.2005, 13:44

wenn du den link anklickst öffnet sich doch ne neue seite, die auch die navleiste etc enthält richtig? und da setzt du dann an der stelle wo du grad bist, den link auf die class="selected", wie ich oben meinte..

netspy · #8 (**permalink**) 24.03.2005, 13:46

Zitat:

Zitat von Shuk

Aber wie kann ich das denn jetzt lösen?

Ich denke das hatte ich dir schon beantwortet. Du musst halt die entsprechenden Links von Hand mit einer extra Klasse auf jeder Seite versehen.

Über JavaScript ließe sich das sicherlich auch irgendwie machen, da kann ich dir aber nicht weiterhelfen.

Mario

Shuk · #9 (**permalink**) 24.03.2005, 13:55

Hi,

sorry, das hatte ich irgendwie überlesen. Aber ich verstehe nicht ganz wie du es jetzt meinst. Kannst du mir ein kleines Beispiel geben?

Wäre super...

Boris · #10 (**permalink**) 24.03.2005, 13:55

Jungs, das geht auch komplett ohne PHP, ASP, JavaScript & Co - pures CSS ist angesagt

Realisiert wird das über eine vergebene ID im <body> Tag, z.B.

<body id="news">
<body id="links">
<body id="download">

Dann verpasst man der Navigation, bzw. den LI-Punkten, auch eine ID:

<li id="eins">Blabla
<li id="zwei">Blabla
<li id="drei">Blabla

Und so kann man dann im CSS je nach geöffneter Seite einen Punkt automatisch "markieren":

body#news li#eins,
body#links li#zwei,
body#download li#drei
{
...
}

Realisiert hab ich das so unter anderem bei www.kurierdienst-kuehn.de oder www.ballettmodel-eva.de

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Mitwachsender Content und Footer Problem	Bentham	CSS	5	19.09.2010 11:49
IE 7: Zoom Problem, Höhen Problem, Text problem	Cu Chullain	CSS	4	02.09.2010 13:56
Problem mit dem Z-index / der Ebenendarstellung	usm	CSS	12	29.06.2010 09:56
a, a:active, a:visited gleich gestylt...problem	nick	CSS	19	13.08.2006 10:10
Problem mit Background-Color im FireFox	to.ni	CSS	2	31.08.2004 11:13