28172 sujets

CSS et mise en forme, CSS3

Bonjour

J’essaie de faire fonctionner une galerie d'images faite uniquement en css qui se trouve elle même dans une div qui s'ouvre façon accordéon également seulement en CSS
problème: l'accordéon s'ouvre bien mais si on clique sur la navigation de la galerie l'accordéon se referme.

J'ai d'abord testé la galerie en dehors de la div accordéon elle fonctionne correctement.Pour les deux cas j'ai pris du code d'exemple mais je ne comprends pas bien le :target qui s'applique à un lien sur un h1 pour l'effet accordéon et à lien sur une img pour la galerie... Smiley ohwell
Si qqun pouvait éclairer ma lanterne Smiley biggrin

Voila le lien vers le problème en question ce sera plus parlant...
http://www.je-day.ch/portfolio5/screen.html#deux

Merci d'avance
Jenny
Bonjour,


:target est une pseudo-classe qui signifie en "français" :
"L'élément au moment où il est ciblé par une ancre".

Exemple :

<a href="#image1">Image 1</a>

Ciblera l'élément qui possède l'ID image1. C'est uniquement à ce moment que les styles seront appliqués.

La :target peut cependant être affecté à une classe :
.the_image:target {
/* ton code ici */
}

pour simplifier le code.
Dès qu'un des .the_image est ciblé par son ID, les styles lui sont appliqués.

Je ne sais pas si la chose est plus claire ainsi Smiley smile

Un effet comme celui-ci uniquement en CSS risque d'être difficile à réaliser, il faudra ruser et abuser de div et span et de positionnement avancé.

Peut-être que mes essais sur cette page peuvent t'apporter quelques idées :
http://www.creativejuiz.fr/trytotry/webdesign-and-slideshow-with-css3/

Bonne fin de journée Smiley cligne
Bonjour
Merci beaucoup pour votre réponse, j'ai bien compris maintenant le :target

Par contre j'ai du mal à comprendre pourquoi les liens de la galerie affectent le comportement de la div effet accordéon alors qu'ils n'ont pas les mêmes cibles... Smiley rolleyes

Je vais faire encore des essais en spécifiant plus dans la css, je posterai plus tard.

En attendant merci pour l'explication rapide et bravo pour le forum!
Bon week end
Jenny