Désolé, j'ai pas compris ce que vous esssayez de me dire... Merci de votre patience...
OK cela est fait... mais comme j'ai pas compris eu-dessus...
Désolé...
Version imprimable
Comme cela ?
Code:
1
2
3
4
5
6
7
8
9
10
11 <div> <ul > <li class="diaporama"><a href="https://www.monsite1.com" target="_blank"><img src="https://www.monsite1.com/images/banniere-haute-monsite1.jpg" alt="monsite1" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> <li class="diaporama"><a href="https://www.monsite2.com" target="_blank"><img src="https://www.monsite2.com/images/banniere-haute-monsite2.jpg" alt="monsite2" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> <li class="diaporama"><a href="https://www.monsite3.com" target="_blank"><img src="https://www.monsite3.com/images/banniere-haute-monsite3.png" alt="monsite3" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> <li class="diaporama"><a href="https://www.monsite4.com" target="_blank"><img src="https://www.monsite4.com/images/banniere-haute-monsite4.jpg" alt="monsite4" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> <li class="diaporama"><a href="https://www.monsite5.com" target="_blank"><img src="https://www.monsite5.com/images/banniere-haute-monsite5.png" alt="monsite5" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> <li class="diaporama"><a href="https://www.monsite6.com" target="_blank"><img src="https://www.monsite6.com/images/banniere-haute-monsite6.jpg" alt="monsite6" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> <li class="diaporama"><a href="https://www.monsite7.com" target="_blank"><img src="https://www.monsite7.com/images/banniere-haute-monsite7.jpg" alt="monsite7" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> </ul> </div>
............non je pense que c'est plutôt comme cela ?
Code:
1
2
3
4
5
6
7
8
9
10
11 <div> <ul > <li><a href="https://www.monsite1.com" target="_blank"><img class="diaporama" src="https://www.monsite1.com/images/banniere-haute-monsite1.jpg" alt="monsite1" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> <li><a href="https://www.monsite2.com" target="_blank"><img class="diaporama" src="https://www.monsite2.com/images/banniere-haute-monsite2.jpg" alt="monsite2" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> <li><a href="https://www.monsite3.com" target="_blank"><img class="diaporama" src="https://www.monsite3.com/images/banniere-haute-monsite3.png" alt="monsite3" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> <li><a href="https://www.monsite4.com" target="_blank"><img class="diaporama" src="https://www.monsite4.com/images/banniere-haute-monsite4.jpg" alt="monsite4" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> <li><a href="https://www.monsite5.com" target="_blank"><img class="diaporama" src="https://www.monsite5.com/images/banniere-haute-monsite5.png" alt="monsite5" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> <li><a href="https://www.monsite6.com" target="_blank"><img class="diaporama" src="https://www.monsite6.com/images/banniere-haute-monsite6.jpg" alt="monsite6" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> <li><a href="https://www.monsite7.com" target="_blank"><img class="diaporama" src="https://www.monsite7.com/images/banniere-haute-monsite7.jpg" alt="monsite7" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> </ul> </div>
• Inutile de compliquer la structure, celle ci dessous suffit
la class est reportée sur le conteneur <div>.Code:
1
2
3
4
5
6
7
8
9 <div class="diaporama"> <a href="https://www.monsite1.com" target="_blank"><img src="https://www.monsite1.com/images/banniere-haute-monsite1.jpg" alt="monsite1"></a> <a href="https://www.monsite2.com" target="_blank"><img src="https://www.monsite2.com/images/banniere-haute-monsite2.jpg" alt="monsite2"></a> <a href="https://www.monsite3.com" target="_blank"><img src="https://www.monsite3.com/images/banniere-haute-monsite3.png" alt="monsite3"></a> <a href="https://www.monsite4.com" target="_blank"><img src="https://www.monsite4.com/images/banniere-haute-monsite4.jpg" alt="monsite4"></a> <a href="https://www.monsite5.com" target="_blank"><img src="https://www.monsite5.com/images/banniere-haute-monsite5.png" alt="monsite5"></a> <a href="https://www.monsite6.com" target="_blank"><img src="https://www.monsite6.com/images/banniere-haute-monsite6.jpg" alt="monsite6"></a> <a href="https://www.monsite7.com" target="_blank"><img src="https://www.monsite7.com/images/banniere-haute-monsite7.jpg" alt="monsite7"></a> </div>
• Concernant le style des images il suffit de mettre dans la partie <style> de la feuille
c'est quand même plus propre !Code:
1
2
3
4 .diaporama img { width: 1100px; height: 61px; }
• Avec cette nouvelle structure il faut appliquer les effets sur les balises <a>.
On ne doit être pas loin de la vérité ;)Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 .diaporama { position: relative; } .diaporama a { position: absolute; top: 0; left: 0; } /* définition de l'animation sur les images */ .diaporama a { animation: fade-in-out 14s ease infinite 0s; opacity: 0; } /* définition délai des images */ .diaporama a:nth-child(1) { animation-delay: 0s;} .diaporama a:nth-child(2) { animation-delay: 2s;} .diaporama a:nth-child(3) { animation-delay: 4s;} .diaporama a:nth-child(4) { animation-delay: 6s;} .diaporama a:nth-child(5) { animation-delay: 8s;} .diaporama a:nth-child(6) { animation-delay: 10s;} .diaporama a:nth-child(7) { animation-delay: 12s;} /* définition des étapes */ @keyframes fade-in-out { 0%, 100% { opacity: 0; } 7.14% { opacity: 1; } 14.29% { opacity: 1; } 21.43% { opacity: 0; } }
YES pas loin en effet !
J'ai voulu rajouter les margin dans le style et ils ne sont pas pris en compte !!???
Code:
1
2
3
4
5
6
7 .diaporama img { width: 1100px; height: 61px; margin-left: auto; margin-right: auto; }
J'ai rajouté dans le code HTML
Code:<div class="diaporama" style="text-align: center;">
et les bannières sont bien centré dans l'éditeur du module, mais je crois, peut-être à tort que cela est incompatible avec le style
Votre avis ?Code:
1
2
3
4
5
6
7
8 .diaporama { position: relative; } .diaporama a { position: absolute; top: 0; left: 0; }
Autres problèmes les liens qui sont à chaque image ne fonctionnent pas, le dernier lien de la dernière image est rattachée à toutes les images ??!!
A mettre dans la partie <style>.Citation:
<div class="diaporama" style="text-align: center;">
ne pas confondre mise en forme du contenu et mise en forme du conteneur !Citation:
et les bannières sont bien centré dans l'éditeur du module, mais je crois, peut-être à tort que cela est incompatible avec le style
le fait qu'ils ne se voient ne les empêche pas d'être présent mais empilés ce qui fait que le dernier est dessus et reçoit le click.Citation:
(...)les liens qui sont à chaque image ne fonctionnent pas(...)
Pour contrer ce comportement il te suffit de placer l'élément actif, celui que l'on voit, au dessus du panier en lui affectant un z-index:1 par exemple, dans les autres cas il aura un z-index:0.
Concrètement cela modifie le CSS de la façon suivante
et les étapes deviennentCode:
1
2
3
4
5
6 /* définition de l'animation sur les images */ .diaporama a { animation: fade-in-out 14s ease infinite 0s; opacity: 0; z-index : 0; }
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 /* définition des étapes */ @keyframes fade-in-out { 0%, 100% { opacity: 0; } 7.14% { opacity: 1; z-index: 1; } 14.29% { opacity: 1; z-index: 1; } 21.43% { opacity: 0; } }
C'est bien ce que j'avais fait au début, mais cela ne fonctionne pas non plus... mais je crois comprendre ce que vous dites...Citation:
ne pas confondre mise en forme du contenu et mise en forme du conteneur !
OUI tout à fait ! je les vois en examinant le code !Citation:
le fait qu'ils ne se voient ne les empêche pas d'être présent mais empilés ce qui fait que le dernier est dessus et reçoit le click.
C’est beau la compétence...Citation:
Pour contrer ce comportement il te suffit de placer l'élément actif, celui que l'on voit, au dessus du panier en lui affectant un z-index:1 par exemple, dans les autres cas il aura un z-index:0.
Merci beaucoup !Je sais que je suis un boulet et je vous remercie encore de votre patience et de votre pédagogie..Citation:
Concrètement cela modifie le CSS de la façon suivante
Je reviens vers vous demain...
Bonne soirée...
Bonjour NoSmoking et encore merci !
Les tests sont proches de la perfection, mais je n'avais pas le lien de la première bannière actif alors j'ai modifié le style comme cela :
Cela fonctionne lors de la première boucle, mais lors de la seconde boucle et suivantes, le premier de la la première bannière est celui de la deuxième bannière et je ne trouve pas comme faire pour quelque soit le nombre de boucle la prmière bannière est bien son lien actif ?Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 @keyframes fade-in-out { 0%, 100% { opacity: 0; z-index: 1; } 7.14% { opacity: 1; z-index: 1; } 14.29% { opacity: 1; z-index: 1; } 21.43% { opacity: 0; z-index: 1; } }
Merci...
Pour le centrage des bannières images, j'avis oublié simplement que textalign:center ne fonctionne pas avec la position absolute
donc
mais j'ai toujours ce problème de lien sur la première bannière un fois la boucle faite...Code:
1
2
3
4
5
6
7 .diaporama a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 35px; }
Visiblement tu n'as pas saisi l'utilité du z-index !
Comme je l'ai écritil se peut néanmoins qu'il y ait un peu de latence entre le passage du dessus au dessous, là cela va dépendre des navigateurs.Citation:
Pour contrer ce comportement il te suffit de placer l'élément actif, celui que l'on voit, au dessus du panier en lui affectant un z-index:1 par exemple, dans les autres cas il aura un z-index:0.
Je suis un vrai boulet oui ! Comme cela donc ?
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 keyframes fade-in-out { 0%, 100% { opacity: 0; z-index: 1; } 7.14% { opacity: 1; z-index: 0; } 14.29% { opacity: 1; z-index: 0; } 21.43% { opacity: 0; z-index: 0; } }
Et peut-être aussi de la durée de la transition (fade), non ? (je suis la discussion de loin... ;) )Citation:
cela va dépendre des navigateurs
Non l'inverse, normalement le z-index:0 est repris par défaut en l’absence de propriété définie.Citation:
Envoyé par IED factory
Si tu avais une page en ligne pour que l'on puisse se rendre compte.
@jreaux62 :
je n'avais même pas fait attention que j'ai mis en exemple des valeurs pour le moins un peu farfelues :mouarf:
C'sts que que j'avais fait et cela ne fonctionne plus au bout d'une boucle...
https://www.chaine-oregon-chs.com
merci encore de votre aide...
Le problème est ailleurs comme disait Claude Rich.
Ta <div class="diaporama"> n'a pas de hauteur puisqu'elle contient des éléments en position:absolute.
Tu places tes <a> en top:50% (qui est la dimension du parent), donc 50% de rien = 0, puis tu les translates de 50% (là c'est sa dimension) dont tu es obligé de mettre un padding-top: 35px pour compenser ce qui au final fait que l'<img> est décalée par rapport au <a>, mets un background pour voir.
Fixe une hauteur à ta <div class="diaporama"> et supprime le sur les <a>.
Code:
1
2
3
4
5
6
7
8
9
10
11 .diaporama { position: relative; height: 65px; } .diaporama a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /*! padding-top: 35px; */ }
Bonjour NoSmoking et merci pour cette précision que j'ai appliqué et modifié aussi du coup le bloc parent dans le global.css pour que tout cela soit en place !
MAIS... il y a toujours au bout d'une boucle du slider le lien des bannières qui renvoit toujours sur la dernière...
Avez-vous cliqué sur chaque bannière jusque cela fasse un tour ? Quand on arrive au deuxième tour c'est toujours le lien de la dernière bannière qui prend le dessus sur les autres..
Merci de votre patience et de votre gentillesse...
Bonjour,
si tu ne remets pas ton code, on ne peut pas tester...
Pardon...
CSS
lien : https://www.chaine-oregon-chs.comCode:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 .diaporama { position: relative; height: 65px; } .diaporama a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .diaporama img { width: 1100px; height: 61px; } .diaporama a { animation: fade-in-out 35s ease infinite 0s; opacity: 0; z-index : 0; } .diaporama a:nth-child(1) { animation-delay: 0s;} .diaporama a:nth-child(2) { animation-delay: 5s;} .diaporama a:nth-child(3) { animation-delay: 10s;} .diaporama a:nth-child(4) { animation-delay: 15s;} .diaporama a:nth-child(5) { animation-delay: 20s;} .diaporama a:nth-child(6) { animation-delay: 25s;} .diaporama a:nth-child(7) { animation-delay: 30s;} @keyframes fade-in-out { 0%, 100% { opacity: 0; z-index: 0; } 7.14% { opacity: 1; z-index: 1; } 14.29% { opacity: 1; z-index: 1; } 21.43% { opacity: 0; z-index: 1; } }