[CSS] Active link wil niet werken.

[Predje]

Tweakers,

Ik ben bezig met een websiteje en ik maak gebruik van CSS.
Ik bouw de website voor IE 5 en hoger.

Ik heb een aantal links de gemaakt worden met CSS.
Ik werk niet met frames, dus de pagina word telkens ververst.

Code die ik gebruikt in het externe stylesheet.

code:

A.algemeen {
    color: #CF2D1C;
    font-size: 11;
    text-decoration: none;
}
A.algemeen:hover {
    color: #707070;
    text-decoration: none;
    font-weight: bold;
}
A.menuboven {
    color: #ffffff;
    text-decoration: none;
}
A.menuboven:hover {
    color: #ffffff;
    background-color: #CF2D1C;
    text-decoration: none;
}
A.menuboven:active {
    color: #ffffff;
    background-color: #CF2D1C;
    text-decoration: none;
}
A.menuonder {
    color: #707070;
    text-decoration: none;
}
A.menuonder:hover {
    color: #ffffff;
    background-color: #CF2D1C;
    text-decoration: none;
}
A.menuonder:active {
    color: #ffffff;
    background-color: #CF2D1C;
    text-decoration: none;
}

En bij de links staat dan de volgende code

code:

<a href="blabla" class="menuboven">blaat</a>

Nu werkt de normale opmaakt goed en de hover ook.
Maar als ik bijv op de link contact klik dan ververst de pagina dus en dan werkt de activelink opmaakt zeg maar niet.

Iemand een idee??

[Blauw]

Kan je die A.algemeen niet gewoon veranderen in a{ (dus zonder Algemeen) ?

[Plecky]

Misschien begrijp ik je vraag niet helemaal, maar in de CSS zoals je het gegeven hebt, is de active kleur hetzelfde als de hover kleur. Je zal dus geen kleurverandering zien als je op een link klikt.

[Verwijderd]

Ik snap je probleem niet want onderstaande code werkt in IE 5+

code:

<style>
    A.blaat:active { font-weight:bold; color:purple }
</style>
<a class="blaat" href="http://www.google.com">blaat</a>

Plecky schreef op 15 juli 2004 @ 14:59:
Misschien begrijp ik je vraag niet helemaal, maar in de CSS zoals je het gegeven hebt, is de active kleur hetzelfde als de hover kleur. Je zal dus geen kleurverandering zien als je op een link klikt.

Dat zal wel de kern van het probleem zijn...

[ Voor 52% gewijzigd door Verwijderd op 15-07-2004 15:01 ]

[Predje]

Plecky schreef op 15 juli 2004 @ 14:59:
Misschien begrijp ik je vraag niet helemaal, maar in de CSS zoals je het gegeven hebt, is de active kleur hetzelfde als de hover kleur. Je zal dus geen kleurverandering zien als je op een link klikt.

Ja dat weet ik maar dat maakt ook niet uit.

Ik heb dus 4 links naast elkaar staan. deze lichten nu op als je er overheen gaat.
maar als je dan op een link geklikt hebt en je gaat dus naar die pagina toe dan is op die pagina de link niet actief.

voorbeeld.
contact.htm / links.htm

In deze beide pagina`s staat hetzelfde menu.
Als ik dan in contact.htm op links klik dan gaat mijn browser naar links.htm
Daar zie ik hetzelfde menu maar is de link "links" niet opgelicht.

ik wil zegmaar de de actuele link opgelichtblijft in het menu. ook nu het verversen van de pagina

[Verwijderd]

Dat gaat je op die manier dus niet lukken...

[Plecky]

Aha. Maar dat is niet wat een active link doet.
Active is de kleur/opmaak die een link krijgt op het moment dat je er op klikt.
Met standaardkleuren: een link is blauw (link), klik je er op dan wordt 'ie rood (active). Laat je de muisknop los dan volgt je browser de link en wordt de link de volgende keer paars omdat ie visited is.

Als je een link wil highlighten op de pagina kan je misschien zoiets doen in je style(naamgeving en kleuren wijzigen naar eigen inzicht):

code:

A.#IkBekijkNuDezePagina { color: purple; background-color: white }

En vervolgens in het menu gedeelte van links.html:

code:

<a href="contact.html">Contact</a>
<a href="links.html" id=#IkBekijkNuDezePagina>Links</a>

In het menu gedeelte van contact.html:

code:

<a href="contact.html" id=#IkBekijkNuDezePagina>Contact</a>
<a href="links.html">Links</a>

Overigens zou ik die highlight voor de huidige pagina niet dezelfde kleur geven als je hover. Klein beetje verwarrend.

Edit: domme typo's

[ Voor 9% gewijzigd door Plecky op 15-07-2004 15:24 ]

[Verwijderd]

Dat gaat volgens mij niet met css. Je kunt proberen dat met php te doen als je host dat ondersteund, zoiets als.

if($PHP_SELF==url){
echo 'class="actief"';
}
else{
echo 'class="gewoon"';
}

Edit: Ik neem aan dat je dat menu op één of andere manier include anders kan je het beter doen zoals hierboven vbeschreven

[ Voor 33% gewijzigd door Verwijderd op 15-07-2004 15:27 . Reden: Verduidelijking ]

[Predje]

yup de links ze wel gewoon teskt meer worden op heel de website uitgelezen uit 1 testbestandje d.m.v ASP. Ik kan er wel iets voor maken in ASP maar ik dacht dat het ook mogelijk was met CSS.. begreep het begrip "active" dus eigelijk verkeerd.

[CH4OS]

Plecky schreef op 15 juli 2004 @ 15:22:
Als je een link wil highlighten op de pagina kan je misschien zoiets doen in je style(naamgeving en kleuren wijzigen naar eigen inzicht):

Cascading Stylesheet:

A.#IkBekijkNuDezePagina { color: purple; background-color: white }

En vervolgens in het menu gedeelte van links.html:

HTML:

<a href="contact.html">Contact</a>
<a href="links.html" id=#IkBekijkNuDezePagina>Links</a>

Om ID's van CSS aan te roepen, hoef je in HTML niet

HTML:

<a href="links.html" id=#IkBekijkNuDezePagina>Links</a>

te doen...

HTML:

<a href="links.html" id=IkBekijkNuDezePagina>Links</a>

is al voldoende...
_{(Dus zonder die # )}

Maar aan de a tag kan je geloof ik geen classes of ID's hangen... Tenminste, mij is het nog nooit gelukt

[ Voor 246% gewijzigd door CH4OS op 15-07-2004 16:09 ]

[crisp]

GJ-tje schreef op 15 juli 2004 @ 16:01:
[...]
Maar aan de a tag kan je geloof ik geen classes of ID's hangen... Tenminste, mij is het nog nooit gelukt

dat kan wel gewoon hoor...

[SJAAKSJAAK]

id tag moet je in de body tag gooien

voorbeeldje
http://www.alistapart.com
http://www.alistapart.com/c/ala.css

dit in de html pagina

code:

<body onload="window.defaultStatus='A List Apart, for people who make websites.'" id="sectionone">

dit in de css

code:

body#sectionone #menu li#one a, 
body#sectiontwo #menu li#two a,
body#sectionthree #menu li#three a,
body#sectionfour #menu li#four a,
body#sectionfive #menu li#five a;
    }

en dan op elke pagina die aktief is verander je die id in de body tag

(ben nieuw trouwens op GoT)

[Verwijderd]

en ook nieuw met css blijkbaar (welkom overigens) want wat je zegt is kul

een id in de body is kul omdat er sowieso maar 1 body is

verder kan je alles een id en / of een class geven. Bedenk dat het twee heel verschillende dingen zijn: een id is een (unieke) naam, een class een functie.

Zorg echter met css'en ervoor dat je het gebruik van class cq id selectors zoveel mogelijk vermijdt. Geef wel id's aan bepaalde belangrijke unieke elementen (een menu ofzo) en geef een class aan een groep elementen om de functienaliteit uit te breiden, begin echter met zoveel mogelijk beschrijvende HTML elementen

[T-MOB]

Verwijderd schreef op 16 juli 2004 @ 20:16:
en ook nieuw met css blijkbaar (welkom overigens) want wat je zegt is kul

een id in de body is kul omdat er sowieso maar 1 body is

Tenzij je natuurlijk één CSS bestand gebruikt voor je hele website.

code:

/* css van brams tweewielers ;) */
body#bromfietsen 
 {
 background: #CCC url('../img/bromfiets.png')';
 }

body.fietsen
 {
 background: #CCC url('../img/fiets.png');
 }

In principe is dan het verschil tussen een id en class NULL. Zij het dat je het voor jezelf logisch kunt houden door een id te gebruiken als een bepaald geval slechts op één pagina voorkomt (1 pagina over bromfietsen) en een class als dat vaker zo is (5 pagina's over fietsen).

Daarnaast werkt het voorbeeld dat Jurriaan. aandraagt prima. Je identificeert in de body welke pagina er geladen is middels een #id en past daar de link op aan.

[ Voor 12% gewijzigd door T-MOB op 16-07-2004 21:46 ]

[AkaXakA]

T-MOB schreef op 16 juli 2004 @ 21:40:
[...]

In principe is dan het verschil tussen een id en class NULL.

Was dat maar waar. Een ID kan je maar 1 keer per pagina gebruiken, een class meerdere keren. Dit is niet zo gek aangezien een ID een unique identifier is.

[T-MOB]

AkaXakA schreef op 17 juli 2004 @ 20:20:
[...]
Was dat maar waar. Een ID kan je maar 1 keer per pagina gebruiken, een class meerdere keren. Dit is niet zo gek aangezien een ID een unique identifier is.

Je hebt helemaal gelijk over het verschil tussen classes en id's. Zij het dat ik schreef over het geval waarin je een id of class zou willen toeschrijven aan de body (zowieso maar een van ). Ik had het dus over een website met meerdere pagina's waarvoor je 1 CSS file gebruikt. Dus bijvoobeeld als je alle pagina's over fietsen een fiets-theme wil geven en pagina's over brommers een brommer-theme. Als de body daarbij de relevante selector is voor het theme maakt het NIET uit of je zegt: body #brommer of body.brommer... naja je snapt het vast

[Verwijderd]

T-MOB schreef op 18 juli 2004 @ 02:38:
Als de body daarbij de relevante selector is voor het theme maakt het NIET uit of je zegt: body #brommer of body.brommer... naja je snapt het vast

In jouw geval wel, misschien maar in het algemeen is er voor CSS een groot verschil in specificiteit tussen classes en IDs.
http://www.w3.org/TR/CSS21/cascade.html#specificity

[Verwijderd]

* Anne vindt een ID op het HTML element fijner

[Verwijderd]

je zal er ongetwijfeld over nagedacht hebben, maar waarom zou je in hemelsnaam je html element een id willen geven?

[Verwijderd]

• http://annevankesteren.nl/archives/2004/02/canvas
• http://annevankesteren.nl...ibute-on-the-root-element
• http://annevankesteren.nl...0/power-of-css3-selectors
• http://annevankesteren.nl/archives/2003/08/html-id

Is het zo ongeveer denk ik. Het komt erop neer dat je ook wel is een achtergrondkleurtje op het HTML element wilt zetten, ongeacht van de achtergrond kleur van de BODY. Heb je wat minder DIV elementen nodig en is m.i. wat meer forward compatible aangezien in XHTML de achtergrond niet meer (in z'n geheel, zoals dat in HTML het geval is) van het BODY element op de canvas wordt gepaint.

[Verwijderd]

dat verhaal van die canvas enzo kende ik wel, vroeg me alleen af waarom je een element dat toch al uniek is van een id wilt voorzien.
Begrijp ik uit het vluchtig doorlezen van je linkjes dat dit handig kan zijn voor het stylen van meerdere pagina's? (je kan dan verschillende html elementen van verschillende pagina's uniek benaderen via hun id)