Galerie images et redimensionnement fenêtre

**sebastien4444** · 15/10/2015, 10h54

Bonjour,

Je désire faire une sorte de galerie d'images pour un site intranet.
Le résultat que je souhaite obtenir est, à quelquechose près, ce que ça donne lorsque je suis en plein écran :

Nom : Capture1.JPG
Affichages : 108
Taille : 191,9 Ko

Nom : Capture1.JPG
Affichages : 108
Taille : 191,9 Ko

Cependant, lorsque je redimensionne ma fenêtre (diminution de la largeur), le comportement des blocs ne me plait pas vraiment...

1) Dans un premier niveau de redimensionnement, mes images s'organisent en une seule colonne.

Nom : Capture2.JPG
Affichages : 109
Taille : 99,7 Ko

Nom : Capture2.JPG
Affichages : 109
Taille : 99,7 Ko

Ce comportement ne me déplaît pas, par contre je ne comprends pas pourquoi mes images (balises <article>) sortent du corps (balise <section> matérialisée par une bordure verte).
C'est assez gênant car je compte mettre un background particulier pour ma section.

2) Dans un second niveau de redimensionnement, même comportement que précédemment mais toute la partie section se retrouve sous le niveau du menu latéral

Nom : Capture3.JPG
Affichages : 93
Taille : 64,6 Ko

Je préfèrerai bien sûre que la section reste à sa place, à droite du menu et que le redimensionnement de fenêtre passe par dessus les images, comme ça se produit quand je passe à un troisième niveau de redimansionnement :
Nom : Capture4.JPG
Affichages : 101
Taille : 43,1 Ko

Nom : Capture4.JPG
Affichages : 101
Taille : 43,1 Ko

Voici donc mon html et mon css :

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
 
<html>
<head>
     <title>Portail</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	 <meta http-equiv="refresh" content="60">
	 <link rel="stylesheet" href="style/style.css" type="text/css" />
</head>
<body>
 
	<header id="first">	
		<img src="img/logo.jpg" />
		<h1>Portail</h1>
	</header>
 
	<header id="second">
		<h3>Images</h3>
	</header>
 
	<nav>
		<ul>
			<li class="menu"><a href="index.php?group=tbo">TBO</a></li>
			<li class="sousmenu"><a href="index.php?group=tbo&mod=tbc">TBC</a></li>
			<li class="sousmenu"><a href="index.php?group=tbo&mod=tbm">TBM</a></li>
			<li class="sousmenu"><a href="index.php?group=tbo&mod=tbs">TBS</a></li>
			<li class="sousmenu"><a href="index.php?group=tbo&mod=trn">TRN</a></li>
			<li class="sousmenu"><a href="index.php?group=tbo&mod=trs">TRS</a></li>
			<li class="sousmenu"><a href="index.php?group=tbo&mod=tbf">TBF</a></li>
			<li class="sousmenu"><a href="index.php?group=tbo&mod=tee">TEE</a></li>
			<li class="menu"><a href="index.php?group=tbe">TBE</a></li>
			<li class="sousmenu"><a href="index.php?group=tbe&mod=tme">TME</a></li>
			<li class="sousmenu"><a href="index.php?group=tbe&mod=tmf">TMF</a></li>
			<li class="sousmenu"><a href="index.php?group=tbe&mod=mbis">MBIS</a></li>
			<li class="sousmenu"><a href="index.php?group=tbe&mod=2e">2E</a></li>
		</ul>
	</nav>
 
	<section>
 
	<article class="lien-image">
		<header class="lien"><a href="#" title="Accès au dossier des captures">Image 1</a></header>
		<div class="image"><img src="image\c.jpg" id="tbc" title="Double-cliquez pour agrandir"></div>
	</article>
	<article class="lien-image">
		<header class="lien"><a href="#" title="Accès au dossier des captures">Image 2</a></header>
		<div class="image"><img src="image\c.jpg" id="tbc" title="Double-cliquez pour agrandir"></div>
	</article>
	<article class="lien-image">
		<header class="lien"><a href="#" title="Accès au dossier des captures">Image 3</a></header>
		<div class="image"><img src="image\c.jpg" id="tbc" title="Double-cliquez pour agrandir"></div>
	</article>
 
	</section>
 
</body>

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
 
/* HEADERS (bandeaux) */
 
header#first{
	border: 1px solid transparent;
	text-align:center;
	background-color: #7F8585;
	height: 8%;
}
 
header img {
	float: left;
}
 
header#second{
	border: 1px solid transparent;
	text-align:center;
	background-color:#FFD552;
	height: 5%;
}
 
#first h1 {
	font-weight:bold;
	color: white;
	font-family:Rockwell;
	line-height: 50%;
}
 
#second h3 {
	font-weight:bold;
	color: #142E3F;
	font-family:Rockwell;
	line-height: 50%;
}
 
/* MENU LATERAL */
 
nav {
	display: inline-block;
	width: 8%;
	border: 2px solid red;
	vertical-align: top;
	height: 100%;
}
 
ul {
	display: inline-block;
	width: 100%;
	padding:0;
	margin: 0;
}
 
li {
	display: inline-block;
	border: 1px dashed #24225F;
}
 
.menu{
	height:35px;
	width:100%;
	padding:1px 0;
	background-image:url(../img/menu.jpg);
	color:#fff;
	text-align:center;
}
.sousmenu{
	height:35px;
	width:100%;
	padding:1px 0;
	background-image:url(../img/sousmenu.jpg);
	color:#fff;
	text-align:center;
}
 
.menu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:20px;
	font-weight:bold;
	text-decoration:none;
	background-image:url(../img/menu.jpg);
	line-height:40px;
}
 
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:16px;
	font-weight:bold;
	text-decoration:none;
	background-image:url(../img/sousmenu.jpg);
	line-height:40px;
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
	background:#FF7714;
}
 
/* CORPS */
 
section{
	display: inline-block;
	border : 2px solid green;
	vertical-align: top;
	width: 91%;
	height: 100%;
	float: right;
}
 
article{
	display: inline-block;
	border : 2px solid pink;
	margin : 2% 2% 2% 2%;
}
 
.lien-image a {
	display:inline-block;
	text-decoration:none;
	color:black;
}
 
.lien-image {
	float:left;
	text-align:center;
	margin: 25px 25px 25px 0px;
}
 
.lien-image  {
	border-collapse: collapse;
	background-color: white;
}
 
.lien {
	border: 2px solid white;
	background-color: #FFFA72;
	text-align: center;
}
 
.lien a{
	color: #383C3D;
	font-weight:bold;	
}
 
.image img{
	width: 507px; 
	height: 285px;
}

Merci d'avance de votre aide.

Invité · 15/10/2015, 13h33

Bonjour,

Il faut mettre la taille des images en %.

**sebastien4444** · 15/10/2015, 15h24

Bonjour,

Merci de votre réponse. En effet j'avais oublié de mettre les tailles d'image en %.
Cependant cela ne change rien à mon problème, au contraire voici ce que ça donne :
Nom : Capture7.JPG
Affichages : 85
Taille : 129,4 Ko

Nom : Capture7.JPG
Affichages : 85
Taille : 129,4 Ko

Nom : Capture8.JPG
Affichages : 89
Taille : 61,7 Ko

]

1) je n'arrive plus à faire en sorte que mon bloc de balise <article> englobe mon <header> et mon <img> comme c'était le cas précédement (grosse partie blanche à droite de mon image)
2) bien que les images rétrécisse en même temps que le redimensionnement de la fenêtre, il existe toujours ce point de rupture où tout la section passe en dessous du niveau du menu.

Voici le code html et le code css (modifié) de cette partie (note : pour plus de lisibilité et une meilleur logique, j'ai retiré mes class qui n'étaient pas necessaires)

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
 
<section>
	<article>
		<header><a href="#" title="Accès au dossier des captures">Image 1</a></header>
		<img src="image\c.jpg" id="tbc" title="Double-cliquez pour agrandir">
	</article>
	<article>
		<header><a href="#" title="Accès au dossier des captures">Image 2</a></header>
		<img src="image\c.jpg" id="tbc" title="Double-cliquez pour agrandir">
	</article>
	<article>
		<header><a href="#" title="Accès au dossier des captures">Image 3</a></header>
		<img src="image\c.jpg" id="tbc" title="Double-cliquez pour agrandir">
	</article>
 </section>

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
 
/* CORPS */
 
section{
	display: inline-block;
	border : 2px solid green;
	vertical-align: top;
	width: 91%;
	height: 100%;
	float: right;
}
 
article{
	display: inline-block;
	border : 2px solid pink;
	margin : 2% 2% 2% 2%;
	display:inline-block;
	border-collapse: collapse;
	background-color: white;
}
 
article a {
	display:inline-block;
	text-decoration:none;
	color:black;
 
}
 
article header {
	border: 2px solid white;
	background-color: #FFFA72;
	text-align: center;
	width: 49%; 
	height: auto;
	border: 1px solid blue;
}
 
article header a{
	color: #383C3D;
	font-weight:bold;	
}
 
article img{
	width: 49%; 
	height: auto;
	border: 1px solid red;
}

Invité · 15/10/2015, 15h57

Compte tenu de ton code HTML, ce sont les <article> qu'il faut mettre à 50% et float:left :

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
article{
	float: left;
	margin : 2%; padding: 0;
	width: 46%; /* 2 par ligne : (50 - 2x2) = 46% */
	box-shadow : 0 0 2px 2px pink; /* on évite de mettre un border (sinon il s'ajoute au calcul précédent) */
	background-color: white;
	text-align: center; /* centre image et texte */
}
 
article img{
	display:block; /* (<img> est "inline" par défaut) */
	max-width: 100%; 
	height: auto;
	border: 1px solid red;
}

**sebastien4444** · 15/10/2015, 16h34

Ok merci, tout est rentré dans l'ordre !

Par contre j'avais toujours mon problème de section qui passe sous le menu au rétrécissement de la fenêtre ; je l'ai réglé en mettant :

Code :

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

1
2
3
4
 
body {
width: 100%;
min-width: 800px;

Sinon, j'ai un dernier soucis pour que tout soit comme je le veux :
Bien que mes titres de header soient bien centrés verticalement en pleine page

Nom : Capture9.JPG
Affichages : 87
Taille : 32,4 Ko

Nom : Capture9.JPG
Affichages : 87
Taille : 32,4 Ko

Lorsque je redimensionne verticalement, ils ne le sont plus et débordent même de mes header...

Nom : Capture10.JPG
Affichages : 89
Taille : 35,5 Ko

Pour rappel, voici le html et css de cette partie :

Code :

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

1
2
3
4
5
6
7
8
9
 
	<header id="first">	
		<img src="img/logo.jpg" />
		<h1>Portail</h1>
	</header>
 
	<header id="second">
		<h3>Images</h3>
	</header>

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
 
/* HEADERS (bandeaux) */
 
header#first{
	border: 1px solid transparent;
	text-align:center;
	background-color: #7F8585;
	height: 8%;
}
 
header img {
	float: left;
}
 
header#second{
	border: 1px solid transparent;
	text-align:center;
	background-color:#FFD552;
	height: 5%;
}
 
#first h1 {
	font-weight:bold;
	color: white;
	font-family:Rockwell;
	line-height: 50%;
}
 
#second h3 {
	font-weight:bold;
	color: #142E3F;
	font-family:Rockwell;
	line-height: 50%;
}

Et encore une fois merci

Invité · 15/10/2015, 18h58

Enlève les height en %.

Galerie images et redimensionnement fenêtre

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager