28172 sujets

CSS et mise en forme, CSS3

Lien vers une ancre et mise en forme de celle-ci

Bonjour à tous
Voilà un petit moment que j'essaie de trouver la solution à mon problème... je me décide donc à poster sur ce forum : je voudrais que lorsqu'on clique sur un lien vers une ancre, cela génère une mise en forme du mot "ancré" (par exemple, le mot s'affiche avec une couleur de background).
Bon, peut-être que c'est tout bête ; j'ai un peu regardé du côté de javascript, mais je suis quasi débutant dans ce langage.
Quelqu'un peut-il m'aiguiller vers une solution ?
Merci d'avance !
Bonsoir,

va sur wikipedia. Clique sur un renvoi (les nombres en exposant dans le texte). Cela te renvoie à la note ou la référence en bas de la page et lui applique un fond bleu ciel. Si c’est cet effet que tu recherches tu n’as plus qu’à pomper dans le code de wikipedia.
Modifié par adrien881 (22 Dec 2011 - 18:25)
Merci à vous deux, je vais aller voir chacune de ces solutions...

edit (quelques essais plus tard) : la solution de Kaelig semble être la plus simple (avec bien sûr le petit "inconvénient" du CSS3 qui ne sera pas valide dans tous les navigateurs). Wikipédia a l'air d'utiliser du javascript : donc, pour moi, encore un peu difficile Smiley decu
Modifié par Celmar (22 Dec 2011 - 19:10)
juste en passant ,

@adrien881 (le pecheur ?)

... vaut mieux comprendre que pomper, c'est moins fatiguant, moins galère.

Ne lui donne pas un poisson (apparemment qui lui file entre les doigts) , mais fait en sorte qu'il apprenne à pecher, même si c'est le propre de l'homme que de pecher (accent omis volontairement sur pecher).

Interesse toi aux selecteur css et pseudo-elements et fait un test simple : 
:target {/* ici des trucs bien moche et remarquable pour bien visualiser le résultat de ton test */ }
:target + * {/* ici des trucs bien moche et remarquable pour bien visualiser le résultat de ton test sur l’élément juste après ton ancre*/ }

(le sélecteur * est a utilisé, comme les autres, en connaissance de cause et d'effet et pas a toutes les sauces)

2 liens parmi d'autres en complément de ce que tu peut trouvé ici sur alsa...

http://www.yoyodesign.org/doc/w3c/css2/selector.html
http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html

Cordialement
Bonjour Celmar,

En fait Kaelig et moi parlons de la même solution (la solution wikipedia est 100% css et utilise le :target dont parle Kaelig).
Avec Kaelig tu as le concept, avec Wikipedia tu as son implémentation.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Change au target</title>
  <style media="screen">
    .changeAuTarget:target {
	  background:lavender;
	}
  </style>
</head>
<body>
  <a href="#ancre">aller à l’ancre</a>
  <span class="changeAuTarget" id="ancre">coucou</span>
</body>
</html>

@gc-nomade : Je ne suis pas censeur, mais pragmatique. Certains glosent allant même jusqu’à disserter sur leur vision des opérateurs css + et *. C’est fort aimable à eux, mais c’est complètement hors-sujet avec le problème de Celmar.
Sujet clos
Aller à