Discussion :

[philippef]

Bonjour,

Je construis un diaporama et j'ai un souci pour aligner du texte à gauche et à droite de mon image.
Le texte à aligner à gauche de la photo est : < puis l'image puis le texte à aligner à droite de la photo est :>
Les signes < et > sont utilisés avec un clic pour afficher les photos suivantes ou précédentes.

le code

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
 
<style type="text/css">
#divdiapo { text-align:center; font-weight:bold; }
#contenu { display: table; }
#contenu span { vertical-align:middle; display: table-cell; }
.photoprevious 	{ font-weight:bold; cursor:pointer; font-size:4em; vertical-align:middle; display: table-cell; }
.photonext { font-weight:bold; cursor:pointer; font-size:4em; vertical-align:middle; }
 
.photosL { width:70%; display:none; }
.photosH { width:50%; display:none; }
</style>
 
 
<script type="text/javascript" >
function next(gen){
	var numero = parseInt(document.gen.zonedebut.value);
	var numerofin = parseInt(document.gen.zonefin.value);
	if (numero < numerofin){
		document.getElementById(+numero).style.display = "none";
		var numero = ++numero ;
		document.gen.zonedebut.value= +numero;
		document.getElementById(+numero).style.display = "inline";
	}
	else if (numero == numerofin){
		document.getElementById(+numero).style.display = "none";
		var numero = 0;
		document.gen.zonedebut.value= +numero;
		document.getElementById(+numero).style.display = "inline";
	}
}
function previous(gen){
	var numero = document.gen.zonedebut.value;
	if (numero > 0){
		document.getElementById(+numero).style.display = "none";
		var numero = --numero ;
		document.gen.zonedebut.value= +numero;
		document.getElementById(+numero).style.display = "inline";
	}
}
</script>
 
 
<div id="divdiapo">
	<p>Diaporama</p>
	<div id="contenu">
		<span class="photoprevious" onclick="previous(gen);"> <  </span>
		<img src="images/rencontres/2019/20190428_102500.jpg" id="0" alt="" style="width:70%;" />
		<img src="images/rencontres/2019/20190428_102610.jpg" class="photosL" id="1" alt="" " />
		<img src="images/rencontres/2019/20190428_102723.jpg" class="photosH" id="2" alt="" />
		<span class="photonext" onclick="next(gen)">></span>
	</div>
	<FORM name="gen">
		<INPUT type="hidden" name="zonedebut" value="0">
		<INPUT type="hidden" name="zonefin" value="2">
	</FORM>
</div>

merci d'avance

l'image en pièce jointe

[philippef]

j'ai trouvé une solution qui ne me plait pas trop mais qui rend ce que je veux; J'ai construis un tableau

Code html :

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
 
<div id="divdiapo">
	<p>Diaporama</p>
	<table border=0 align="center" style="width:80%;">
		<tr>
			<td style="width:8%;"><span class="photoprevious" onclick="previous(gen);"> <  </span></td>
			<td ><img src="images/rencontres/2019/20190428_102500.jpg" id="0" alt=""  />
			     <img src="images/rencontres/2019/20190428_102610.jpg" class="photosL" id="1" alt="" " />
			     <img src="images/rencontres/2019/20190428_102723.jpg" class="photosH" id="2" alt="" /></td>
			<td style="width:8%;"><span class="photonext" onclick="next(gen)">></span></td>
		</tr>
	</table>
	<FORM name="gen">
		<INPUT type="hidden" name="zonedebut" value="0">
		<INPUT type="hidden" name="zonefin" value="2">
	</FORM>
</div>

si quelqu'un a mieux je suis preneur !!