Comme cela ?
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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; } }
Les joies du CSS | Réponses sur forum | Simple comme JS | Essais libres autour de l'API G$$gle Maps
✂ ---------------------------------------------
developpez.net c'est aussi :
✔ Les meilleurs cours et tutoriels pour apprendre le CSS
✔ Les meilleurs cours et tutoriels pour apprendre le (X)HTML
✔ Les meilleurs cours et tutoriels pour apprendre le JavaScript
YES pas loin en effet !
J'ai voulu rajouter les margin dans le style et ils ne sont pas pris en compte !!???
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 html : Sélectionner tout - Visualiser dans une fenêtre à part <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 : Sélectionner tout - Visualiser dans une fenêtre à part
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>.<div class="diaporama" style="text-align: center;">
ne pas confondre mise en forme du contenu et mise en forme du conteneur !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.(...)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 deviennent
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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; } }
Les joies du CSS | Réponses sur forum | Simple comme JS | Essais libres autour de l'API G$$gle Maps
✂ ---------------------------------------------
developpez.net c'est aussi :
✔ Les meilleurs cours et tutoriels pour apprendre le CSS
✔ Les meilleurs cours et tutoriels pour apprendre le (X)HTML
✔ Les meilleurs cours et tutoriels pour apprendre le JavaScript
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...ne pas confondre mise en forme du contenu et mise en forme du conteneur !
OUI tout à fait ! je les vois en examinant le code !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...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..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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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.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.
Les joies du CSS | Réponses sur forum | Simple comme JS | Essais libres autour de l'API G$$gle Maps
✂ ---------------------------------------------
developpez.net c'est aussi :
✔ Les meilleurs cours et tutoriels pour apprendre le CSS
✔ Les meilleurs cours et tutoriels pour apprendre le (X)HTML
✔ Les meilleurs cours et tutoriels pour apprendre le JavaScript
Je suis un vrai boulet oui ! Comme cela donc ?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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... )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.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
Les joies du CSS | Réponses sur forum | Simple comme JS | Essais libres autour de l'API G$$gle Maps
✂ ---------------------------------------------
developpez.net c'est aussi :
✔ Les meilleurs cours et tutoriels pour apprendre le CSS
✔ Les meilleurs cours et tutoriels pour apprendre le (X)HTML
✔ Les meilleurs cours et tutoriels pour apprendre le JavaScript
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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; */ }
Les joies du CSS | Réponses sur forum | Simple comme JS | Essais libres autour de l'API G$$gle Maps
✂ ---------------------------------------------
developpez.net c'est aussi :
✔ Les meilleurs cours et tutoriels pour apprendre le CSS
✔ Les meilleurs cours et tutoriels pour apprendre le (X)HTML
✔ Les meilleurs cours et tutoriels pour apprendre le JavaScript
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.com
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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; } }
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager