Un bloc déroulant "responsive"

**Nighthawk** · 04/03/2015, 09h24

Bonjour.

A partir d'un guide trouvé sur internet je me suis fabriqué une petite liste de "références" avec apparition des détails au survol (et au clic). Content de ma trouvaille, je me suis dit : "tiens, et si je montrais ma science à mes amis". J'ai cependant eu la présence d'esprit de vérifier avant (j'aurais été discrédité à vie) et, horreur, j'avais oublié que mon ordi perso était bien plus petit que mon ordi du boulot.

Mon souci, vous l'aurez sûrement remarqué dans mon css, c'est que mon "onglet déroulant" est caché sous l'image et qu'il se déplie sur 1000pixels pour prendre sa forme. Comme mon ordi perso est vieillissant, je n'ai pas une résolution aussi élevée, et du coup ça dépasse (coupant le texte au passage).

Le rendu que je souhaitais c'était avoir, à droite de mon onglet déroulé, un espace équivalent à celui présent à gauche de mon image. Mais si je place la largeur en 100%, ça me fait un petit carré.

Quelqu'un pourrait-il me venir en aide s'il vous plaît?

D'avance merci.

Invité · 04/03/2015, 10h26

Bonjour,
je pense avoir une solution : http://codepen.io/jreaux62/pen/xbJPxB

J'ai ajouté des balises <aside> autour des <div>.

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
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
<section id="ListeReferences" class="crayon references demoTime">
	<ul>
		<li tabindex="0">
			<img class="pic" src="http://distilleryimage1.s3.amazonaws.com/621b77142f7411e39a8f22000a9f195b_6.jpg"/>
			<aside><div>
				<h5>
					111
				</h5>
				<p>
					Sed fruatur sane hoc solacio atque hanc insignem ignominiam, quoniam uni praeter se inusta sit, putet esse leviorem, dum modo, cuius exemplo se consolatur, eius exitum expectet, praesertim cum in Albucio nec Pisonis libidines nec audacia Gabini fuerit ac tamen hac una plaga conciderit, ignominia senatus.
				</p>
				<p class="lien">
					<a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">HTML sur Wikipédia</a>
				</p>
			</div></aside>
		</li>
		<li tabindex="0">
			<img class="pic" src="http://distilleryimage1.s3.amazonaws.com/f3f72dc42f3111e3ba2c1231391eb9f5_6.jpg"/>
			<aside><div>
				<h5>
					222
				</h5>
				<p>
					Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini praepositum celerari speciem perurgebant quam autem non indicabant denique etiam idem ad usque discrimen vitae vexatus nihil fateri conpulsus est.
				</p>
				<p class="lien">
					<a href="http://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade">CSS sur Wikipédia</a>
				</p>
			</div></aside>
		</li>
		<li tabindex="0">
			<img class="pic" src="http://distilleryimage9.s3.amazonaws.com/d720325c2f3311e3b41222000a1f8cb0_6.jpg"/>
			<aside><div>
				<h5>
					333
				</h5>
				<p>
					Illud tamen clausos vehementer angebat quod captis navigiis, quae frumenta vehebant per flumen, Isauri quidem alimentorum copiis adfluebant, ipsi vero solitarum rerum cibos iam consumendo inediae propinquantis aerumnas exitialis horrebant.
				</p>
				<p class="lien">
					<a href="http://fr.wikipedia.org/wiki/PHP">PHP sur Wikipédia</a>
				</p>
			</div></aside>
		</li>
		<li tabindex="0">
			<img class="pic" src="http://distilleryimage1.s3.amazonaws.com/621b77142f7411e39a8f22000a9f195b_6.jpg"/>
			<aside><div>
				<h5>
					444
				</h5>
				<p>
					Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina et ubique patrum reverenda cum auctoritate canities populique Romani nomen circumspectum et verecundum.
				</p>
				<p class="lien">
					<a href="http://fr.wikipedia.org/wiki/Javascript">Javascript sur Wikipédia</a>
				</p>
			</div></aside>
		</li>
		<li tabindex="0">
			<img class="pic" src="http://distilleryimage1.s3.amazonaws.com/f3f72dc42f3111e3ba2c1231391eb9f5_6.jpg"/>
			<aside><div>
				<h5>
					555
				</h5>
				<p>
					Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per omnia diffuso propinqua, magnis undique praesidiis conmunitam.
				</p>
				<p class="lien">
					<a href="http://fr.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML">AJAX sur Wikipédia</a>
				</p>
			</div></aside>
		</li>
	</ul>
</section>

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
* {
  margin:0;
  padding:0;
  border:0;
  outline : none;
  box-sizing:border-box; /* important : empêcher les débordements de boîtes dûs aux border ou padding */
}
 
#ListeReferences{
  font-family : "Myriad Pro", sans-serif;
  height : 1200px;
}
 
#ListeReferences ul{
  list-style : none;
  margin : 20px;
}
 
#ListeReferences ul li{
  position : relative;
  height : 240px;
  width : 200px; /*largeur de l'image */
}
#ListeReferences ul li:hover{
  width : 100%;
}
 
#ListeReferences ul li img.pic{
  cursor : pointer;
  position : absolute;
  z-index : 110;
  margin : 20px 0;
  display : block;
  width : 200px;
  height : 200px;
  text-decoration : none;
  text-shadow : 0px 0px 5px rgba(0,0,0,0.5);
  filter : grayscale(100%);
  -webkit-filter : grayscale(100%);
  filter : gray;
  transition : all 1s ease-in-out;
  box-shadow : 0px 0px 10px rgba(0,0,0,0.75);
}
 
#ListeReferences ul li:hover img.pic, #ListeReferences ul li:focus img.pic{
  filter : grayscale(0);
  -webkit-filter : grayscale(0);
  filter : none;
  outline : none;
}
 
/* Slide */
 
#ListeReferences ul li aside{
    position : absolute;
    width:100%;
    height : 240px;
    margin-left:20px;
    overflow : hidden;
}
#ListeReferences ul li aside div{
  height : 200px;
  width : 98%;
    padding : 0 20px 0 200px;
background : rgba(0,0,0,0.6);
  overflow : auto;
  color : white;
  position : absolute;
  top : 20px;
  left : -200px;
  z-index : 50;
  opacity : 0;
  -webkit-transition : 1s all;
  -moz-transition : 1s all;
  -o-transition : 1s all;
  transition : 1s all;
}
 
#ListeReferences ul li:hover aside div, #ListeReferences ul li:focus aside div{
  left : 0;
  opacity : 1;
  background : rgba(0,0,0,0.6);
}
 
/* Dans la boîte */
 
#ListeReferences ul li div h5{
  font-size : 2.8em;
  color : #9DAE3F;
  text-align : right;
  margin-top : auto;
  margin-bottom : 15px;
}
 
#ListeReferences ul li div p{
  text-indent : 15px;
  margin-top : auto;
  width : 100%;
  font-size : 1em;
  font-weight : normal;
  text-align : justify;
}
 
#ListeReferences ul li div p.lien{
  text-align : right;
}
 
#ListeReferences ul li div p.lien a{
  color : #DFDFDF;
}

Attention : pour une taille de fenêtre trop petite, j'ai mis un overflow:auto; sur la div, pour éviter de tronquer les textes trop longs.
Il faudra prévoir un CSS modifié pour les petites résolutions d'écran.

N.B. Si on veut que le texte apparaissent AUSSI en mettant le curseur sur l'ESPACE VIDE à droite de l'image :
remplacer :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#ListeReferences ul li{
  position : relative;
  height : 240px;
  width : 200px; /*largeur de l'image */
}
#ListeReferences ul li:hover{
  width : 100%;
}

par :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#ListeReferences ul li{
  position : relative;
  height : 240px;
  width : 100%;
}

**Nighthawk** · 04/03/2015, 12h50

Bonjour et merci pour cette réponse.

Effectivement, l'idée est là. Je remarque cependant que la transition en est sévèrement affectée (constaté sur chrome, firefox, opéra et safari). Je n'ai plus l'effet d'apparition depuis la photo.

En voyant ce résultat, je pense changer mon idée de distances égales entre les bords droits et gauches de la box et de la photo et l'écran. J'hésite entre réduire la part de l'écran occupée par la box (75% semble pas mal) et limiter sa taille maximale (à 1000px par exemple), ou même les deux (si possible).

Du coup j'ai passé un certain temps à explorer des possibilités, mais je cale. Puis-je demander de l'aide supplémentaire?

Encore merci pour la réponse.

Invité · 04/03/2015, 13h02

As-tu actualisé ta page ? (Pour nettoyer le cache et activer le nouveau CSS).

[Edit] Vu.

pour la div, mettre :
Left:-100%;

**Nighthawk** · 04/03/2015, 14h12

Effectivement, le fait de mettre le left à -100% me donne bien l'effet de "déroulement", mais mon effet d'opacité ne respecte pas la transition, et le retour ne se fait plus non plus...

Invité · 04/03/2015, 21h00

Bon. Finalement, on peut se passer de la balise <aside>...

Voir : http://codepen.io/jreaux62/pen/xbJPxB

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
34
35
36
37
38
39
40
41
42
43
44
<section id="ListeReferences" class="crayon references demoTime">
	<ul>
		<li tabindex="0">
			<img class="pic" src="http://distilleryimage1.s3.amazonaws.com/621b77142f7411e39a8f22000a9f195b_6.jpg"/>
			<div>
				<h5>111</h5>
				<p>Sed fruatur sane hoc solacio atque hanc insignem ignominiam, quoniam uni praeter se inusta sit, putet esse leviorem, dum modo, cuius exemplo se consolatur, eius exitum expectet, praesertim cum in Albucio nec Pisonis libidines nec audacia. </p>
				<p>Gabini fuerit ac tamen hac una plaga conciderit, ignominia senatus.</p>
				<p class="lien"><a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">HTML sur Wikipédia</a></p>
			</div>
		</li>
		<li tabindex="0">
			<img class="pic" src="http://distilleryimage1.s3.amazonaws.com/f3f72dc42f3111e3ba2c1231391eb9f5_6.jpg"/>
			<div>
				<h5>222</h5>
				<p>Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini praepositum celerari speciem perurgebant quam autem non indicabant denique etiam idem ad usque discrimen vitae vexatus nihil fateri conpulsus est.</p>
				<p class="lien"><a href="http://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade">CSS sur Wikipédia</a></p>
			</div>
		</li>
		<li tabindex="0">
			<img class="pic" src="http://distilleryimage9.s3.amazonaws.com/d720325c2f3311e3b41222000a1f8cb0_6.jpg"/>
			<div>
				<h5>333</h5>
				<p>Illud tamen clausos vehementer angebat quod captis navigiis, quae frumenta vehebant per flumen, Isauri quidem alimentorum copiis adfluebant, ipsi vero solitarum rerum cibos iam consumendo inediae propinquantis aerumnas exitialis horrebant.</p>
				<p class="lien"><a href="http://fr.wikipedia.org/wiki/PHP">PHP sur Wikipédia</a></p>
			</div>
		</li>
		<li tabindex="0">
			<img class="pic" src="http://distilleryimage1.s3.amazonaws.com/621b77142f7411e39a8f22000a9f195b_6.jpg"/>
			<div>
				<h5>444</h5>
				<p>Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina et ubique patrum reverenda cum auctoritate canities populique Romani nomen circumspectum et verecundum.</p>
				<p class="lien"><a href="http://fr.wikipedia.org/wiki/Javascript">Javascript sur Wikipédia</a></p>
			</div>
		</li>
		<li tabindex="0">
			<img class="pic" src="http://distilleryimage1.s3.amazonaws.com/f3f72dc42f3111e3ba2c1231391eb9f5_6.jpg"/>
			<div>
				<h5>555</h5>
				<p>Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per omnia diffuso propinqua, magnis undique praesidiis conmunitam.</p>
				<p class="lien"><a href="http://fr.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML">AJAX sur Wikipédia</a></div>
		</li>
	</ul>
</section>

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
* {
  margin:0;
  padding:0;
  border:0;
  outline : none;
  box-sizing:border-box; /* important : empêcher les débordements de boîtes dûs aux border ou padding */
}
 
#ListeReferences{
  font-family : "Myriad Pro", sans-serif;
  height : 1200px;
}
 
#ListeReferences ul{
  list-style : none;
  margin : 20px;
}
 
#ListeReferences ul li{
  position : relative;
  height : 240px;
  width : 200px; /*largeur de l'image */
  -webkit-transition : 1s all;
  -moz-transition : 1s all;
  -o-transition : 1s all;
  transition : 1s all;
}
#ListeReferences ul li:hover{
  width : 100%;
}
 
#ListeReferences ul li img.pic{
  cursor : pointer;
  position : absolute;
  z-index : 110;
  margin : 20px 0;
  display : block;
  width : 200px;
  height : 200px;
  text-decoration : none;
  text-shadow : 0px 0px 5px rgba(0,0,0,0.5);
  filter : grayscale(100%);
  -webkit-filter : grayscale(100%);
  filter : gray;
  transition : all 1s ease-in-out;
  box-shadow : 0px 0px 10px rgba(0,0,0,0.75);
}
 
#ListeReferences ul li:hover img.pic, #ListeReferences ul li:focus img.pic{
  filter : grayscale(0);
  -webkit-filter : grayscale(0);
  filter : none;
  outline : none;
}
 
/* Slide */
 
#ListeReferences ul li div{
  position : absolute;
  height : 200px;
  width : 98%;
  padding : 0 20px 0 200px;
  background : rgba(0,0,0,0.6);
  overflow : hidden;
  color : white;
  top : 20px;
  left : 20px;
  z-index : 50;
  opacity : 0;
  -webkit-transition : 1s all;
  -moz-transition : 1s all;
  -o-transition : 1s all;
  transition : 1s all;
}
 
#ListeReferences ul li:hover div, #ListeReferences ul li:focus div{
  overflow : auto;
  opacity : 1;
  background : rgba(0,0,0,0.6);
}
 
/* Dans la boîte */
 
#ListeReferences ul li div h5{
  font-size : 2.8em;
  color : #9DAE3F;
  text-align : right;
  margin-bottom : 15px;
}
 
#ListeReferences ul li div p{
  text-indent : 15px;
  width : 100%;
  font-size : 1em;
  font-weight : normal;
  text-align : justify;
}
 
#ListeReferences ul li div p.lien{
  text-align : right;
}
 
#ListeReferences ul li div p.lien a{
  color : #DFDFDF;
}

**Nighthawk** · 10/03/2015, 20h42

Bon. Au final je vais m'orienter vers la solution des media querries.
C'est gentil de m'avoir aidé, mais cette solution a tendance à mettre à mal les effets et éléments déjà présents.
Merci encore.
Sujet résolu.

Un bloc déroulant "responsive" [CSS 3]

Responsive design en CSS

Partager

Partager