Discussion :

[patrick.iribarne]

Bonjour
J'ai un slideshow avec des pages qui peuvent avoir des tailles différentes
==> Le slideshow ne reste pas positionné de manière fixe avec des boutons avec une position stable !
SOS !
Patrick

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
<! ================= Slideshow   =========================================  >
 
<div style="background-color: #F1F1F1; margin-top:0!important; margin-bottom:0!important;width:100%;height:80%;padding: 0;">
	<div>
	<div style="display: flex; justify-content: space-around; flex-wrap: wrap;align-items: center;">
		<div class="mySlides" style="background-color: #F1F1F1;width:100%;height:80%;padding: 0;">
			<div style="background-color: #F1F1F1;width:100%;height:80%;">
				<p>&nbsp;</p>
				<p style="text-align:center;"><titre2-normal><typo>La démarche d'Excellence 4.0 en 4 étapes</typo></titre2-normal> </p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p style="text-align:center;"><libelle-vert>Durant la phase d'initialisation vous identifez vos domaines d'excellence et vos cibles prioritaires en fonction de votre stratégie. Ensuite, chaque année, vous élaborez un plan de progrès fondé sur les résultats de l'évaluation PEPP'S sur le terrain.&nbsp;&nbsp;</libelle-vert></p>
				<p>&nbsp;</p>
				<p style="text-align:center;"><img alt="" src="templates/rt_galatea/custom/images/assets/icones/logo_pepps_coeur_vert.png" /></p>
				<p>&nbsp;</p>
			</div>
		</div>
		<div class="mySlides" style="background-color: #F1F1F1;width:100%;height:80%;">
			<div style="background-color: #F1F1F1;width:100%;height:80%;">
				<p>&nbsp;</p>
				<p><span class="x3-tag x3-vert">&nbsp;PHASE&nbsp;1&nbsp;</span> <span style="text-align:center;"><titre2-normal><typo>L'identification des domaines d'excellence</typo></titre2-normal> </span></p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p style="text-align:center;"><libelle-vert>La première étape consiste à identifier vos domaines d'actions&nbsp;prioritaires - ceux sur lesquels va se jouer la différenciation de votre entreprise&nbsp;pour les années à venir.&nbsp;</libelle-vert></p>
				<p>&nbsp;</p>
				<p style="text-align:center;"><libelle3-gras>Avec cette première étape, vous déclinez concrètement votre stratégie en champs d'actions concrets et durables : Voici le Cap!</libelle3-gras></p>
				<p>&nbsp;</p>
			</div>
		</div>
		<div class="mySlides" style="background-color: #F1F1F1;width:100%;height:80%;">
			<div style="background-color: #F1F1F1;width:100%;height:80%;">
				<p>&nbsp;</p>
				<p><span class="x3-tag x3-vert">&nbsp;PHASE&nbsp;1&nbsp;</span> <span style="text-align:center;margin:auto;"><titre2-normal><typo>L'identification des domaines d'excellence</typo></titre2-normal> </span></p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p style="text-align:center;"><libelle-vert>La première étape consiste à identifier vos domaines d'actions&nbsp;prioritaires - ceux sur lesquels va se jouer la différenciation de votre entreprise&nbsp;pour les années à venir.&nbsp;</libelle-vert></p>
				<p>&nbsp;</p>
				<p style="text-align:center;"><libelle3-gras>Avec cette première étape, vous déclinez concrètement votre stratégie en champs d'actions concrets et durables : Voici le Cap!</libelle3-gras></p>
			</div>
		</div>
		<div class="mySlides" style="background-color: #F1F1F1;width:100%;height:80%;">
			<div style="background-color: #F1F1F1;width:100%;height:80%;">
				<p>&nbsp;</p>
				<p><span class="x3-tag x3-vert">&nbsp;PHASE&nbsp;1&nbsp;</span> <span style="text-align:center;"><titre2-normal><typo>L'identification des domaines d'excellence</typo></titre2-normal> </span></p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p style="text-align:center;"><libelle-vert>La première étape consiste à identifier vos domaines d'actions&nbsp;prioritaires - ceux sur lesquels va se jouer la différenciation de votre entreprise&nbsp;pour les années à venir.&nbsp;</libelle-vert></p>
				<p>&nbsp;</p>
				<p style="text-align:center;"><libelle3-gras>Avec cette première étape, vous déclinez concrètement votre stratégie en champs d'actions concrets et durables : Voici le Cap!</libelle3-gras></p>
			</div>
		</div>
		</div>
	</div>
</div>
 
	<div class="w3-center" style="background-color: #F1F1F1;margin-top:0!important; margin-bottom:0!important;padding: 0;">
		<div class="w3-section">
			<button class="w3-btn" style ="border-radius: 16px; background-color: #525252; font-size:0.9 rem;" onclick="plusDivs(-1)">❮ Prec</button>
			<button class="w3-btn" style ="border-radius: 16px; background-color: #525252; font-size:0.9 rem;" onclick="plusDivs(1)">Suiv ❯</button>
		</div>
		<button class="w3-btn demo" style ="background-color: #525252; font-size:0.7 rem;" onclick="currentDiv(1)">1</button>
		<button class="w3-btn demo" style ="background-color: #525252; font-size:0.7 rem;" onclick="currentDiv(2)">2</button>
		<button class="w3-btn demo" style ="background-color: #525252; font-size:0.7 rem;" onclick="currentDiv(3)">3</button>
		<button class="w3-btn demo" style ="background-color: #525252; font-size:0.7 rem;" onclick="currentDiv(4)">4</button>
	</div>
	<p>&nbsp;</p>
 
 
<script>
var slideIndex = 1;
showDivs(slideIndex);
 
function plusDivs(n) {
  showDivs(slideIndex += n);
}
 
function currentDiv(n) {
  showDivs(slideIndex = n);
}
 
function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-red", "");
  }
  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " w3-red";
}
</script>

[Beginner.]

Salut,

Il manque des choses dans la partie que tu as postée mais de toute façon je pense que c'est normal qu'il bouge comme ça puisque la hauteur de la div juste avant varie en fonction de son contenu... Essaye en fixant cette hauteur à une valeur suffisamment grande pour que la div contienne tous les contenus, exemple en remplaçant height:80%; par height: 350px; ça ne bouge plus : http://jsbin.com/calafiwala/edit?html,output