Discussion :

[DJ Caësar 9114]

Bonjour à tous,

Je suis en train de coder un «diaporama» constitué des éléments suivants :

• en haut, deux choix possibles (A ou B) qui tiennent sur une ligne prenant tout l'espace (A prend 50% et B également) ;
• en dessous, le cadre sera divisé en deux : une partie contenant l'ensemble des pages du diaporama A (ou B selon qu'il est choisi), et sur le côté droit, des cercles indiquant quelle page est parcourue (le n-ième cercle est rempli si on lit la n-ième page). Les cercles sont les uns au dessus des autres, et centrés verticalement ;
• si on peut aller à la page précédente, une flèche apparaît en haut de la diapo, et idem en bas si on peut aller à la page suivante (dans ce cas, une div est créée dans ce que j'ai fait actuellement) ;
• ce diaporama doit être intégré dans le body et mesurer 70% de sa hauteur.

Pour ce qui est des liens et des actions, c'est géré en jQuery, pas de souci.
Je me pose la question du CSS et des balises à utiliser en revanche.

Voilà ma structure HTML actuelle :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="diaporamas">
	<ul class="diap_entete">
		<li class="diap_titre">A</li>
		<li class="diap_titre">B</li>
	</ul>
	<div class="diap_diapos">
		<div class="diaporama">
			<div class="diap_boules"></div>
			<div class="diap_pages">
				<div class="diap_page">
					PAGE A-1
					</div>
				<div class="diap_page">
					PAGE A-2
					</div>
			</div>
		</div>
		<div class="diaporama">
			<div class="diap_boules"></div>
			<div class="diap_pages">
				<div class="diap_page">
					PAGE B-1
					</div>
				<div class="diap_page">
					PAGE B-2
					</div>
				<div class="diap_page">
					PAGE B-3
					</div>
			</div>
		</div>		
	</div>
</div>

Voilà mon CSS associé :

Code css :

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
.diap_entete {
	background: #eeece1;
	cursor: pointer;
	height: 50px;
	vertical-align: middle;
 
 
}
 
.diap_titre {
	padding: 10px;
	margin: 0 auto;
	vertical-align: middle;
	line-height:50px;
 
 
}
 
.diaporamas {
	background: #f9f9f9;
	border:1px solid #bbbbbb;
	width: 90%;
	margin: 0 auto;
	height: 500px;
}
 
.diap_diapos, .diaporama {
	height: 100%;
}
 
.diap_pages {
	width: 80%;
	height: 90%;
}
 
.diap_page, .diap_boules {
	display: none;
	height: 100%;
	position: relative;
}
 
.diap_titre {
	display: inline;
}
 
.boule {
	display: inline-block;
	background-image:url('../img/diapo_inac.png');
	background-repeat:no-repeat;
	height: 30px;
	width: 30px;
	cursor: pointer;
	z-index: 10;
}
 
.diap_boules {
	float: right;
	width: 30px;
	vertical-align: middle;
}
 
.diap_boules img {
	border: 0;
	margin: 0;
}
 
.diap_fleche_bas, .diap_fleche_haut {
	width: 100%;
	height: 30px;
	text-align: center;
	background-image:url('../img/vague_bas.png'),url('../img/vague_haut.png');
	background-repeat:no-repeat;
	background-position:center;	
	cursor: pointer;
}
 
.diap_fleche_bas {
	background-image:url('../img/fleche_bleue_bas.png');
	position: absolute;
	bottom: 0;
}
 
.diap_fleche_haut {
	background-image:url('../img/fleche_bleue_haut.png');
	position: absolute;
	top: 0;
}

Vous vous en doutez, le code actuel ne fonctionne pas :

• les boules ne sont pas centrées ;
• les menus A et B ne prennent pas chacun 50% de la largeur ;
• quand les flèches apparaissent, elles ne se mettent pas où je le souhaite (en haut et en bas de la page, tout en restant dans le diaporama).

Suis-je sur la bonne voie ? Quelqu'un peut-il m'aiguiller ?

Merci à tous.

[rodolphebrd]

Bonjour,

avez-vous une page en ligne ou éventuellement votre code en version zippée pour bénéficier des images...

[DJ Caësar 9114]

Affirmatif

Pour info dans la source jointe j'ai forcé le style (display: block) de certains éléments, afin de ne pas polluer le code avec des requêtes jquery. Il n'y a donc qu'une «diapo» de visible, mais ça donne une idée du CSS.

Voilà un exemple de ce que je cherche à faire (exemple pour la page B-2)