Comment afficher 3 images sur une même ligne ?

**joffrey575** · 16/12/2015, 09h52

Bonjour à tous,

Je débute dans l'html, le php, le js et les css.

J'aimerais pouvoir afficher 3 images sur une ligne (33% chacune de la largeur de la page), les centrer vers le haut et associer un titre à chaque image.

Pour le moment je n'ai trouvé que cette manière de faire :

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
		<table>
			<tr>
				<td>
					<figure>
					<figcaption><h3>Surveillance vidéo</h3></figcaption>
					<a href="projets_surveillance_video.php">
					<img src="images/systemes_embarques/raspberry_pi2/miniatures/tn_rasp_1.png" border=5/></a>
					</figure>
				</td>
				<td>
					<figure>
					<figcaption><h3>Réseau de capteurs</h3></figcaption>
					<a href="projets_reseau_de_capteurs.html">
					<img src="images/systemes_embarques/reseau_de_capteurs_AFP51_ARMadeus/miniatures/tn_AFP51.png" border=5/></a>
					<figure>
				</td>
				<td>
					<figure>
					<figcaption><h3>Pilotage d'une carte</h3></figcaption>
					<a href="projets_pilotage_de_carte.html">
					<img src="images/systemes_embarques/carte_linux_elektor/miniatures/tn_carte_linux_elektor.png" border=5/></a>
					</figure>
				</td>
			</tr>
		</table>

On m'a dit que table ne doit pas être utilisé pour faire de la mise en page, alors qu'est-ce que je dois utiliser pour faire de la mise en page?

Autre souci, j'ai des puces associé à un texte mais la puce ne s'adapte pas à la taille de mon texte :

Code :

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

1
2
3
4
 
                <ul type="square">
		<li><h2>Développements VHDL sur puce FPGA</h2></li>
		</ul>

Merci d'avance.

**thelvin** · 16/12/2015, 11h31

Hello,

Envoyé par joffrey575

On m'a dit que table ne doit pas être utilisé pour faire de la mise en page, alors qu'est-ce que je dois utiliser pour faire de la mise en page?

Il faut utiliser CSS.

Par exemple dans ton cas, tu enlèves toutes les balises de table, il ne te reste plus que les <figure> et ce qu'elles contiennent. Par défaut, elles s'afficheront l'une au-dessus de l'autre.
En ajoutant le CSS suivant, elles s'afficheront sur la même ligne :

Code css :

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

1
2
3
figure {
  display: inline-block;
}

Ici, l'idée est de changer le mode de placement des <figure>, qui au départ est "block", l'un sur l'autre. Pour le remplacer par "inline-block", c'est un conteneur, mais qui s'affiche en ligne, c'est-à-dire au milieu du texte et autres éléments en ligne qui l'entourent. Comme les éléments qui l'entourent sont d'autres <figure>, et qu'on vient de rendre les <figure> en ligne, l'effet est qu'ils s'affichent en ligne.

Bref, pour la mise en page 'faut se former au CSS.

Envoyé par joffrey575

Autre souci, j'ai des puces associé à un texte mais la puce ne s'adapte pas à la taille de mon texte :

Même chose que les tableaux, on n'utilise pas les <h1>, <h2>, etc, pour régler la taille du texte. On règle la taille du texte en CSS.

Donc d'abord il faut enlever les h2, puis utiliser du CSS avec font-size pour régler la taille du texte qui t'intéresse.

Donc pour résumer, apprendre la base de CSS d'abord et s'intéresser à comment faire ça, ensuite. Et poser des questions sur le forum CSS, si besoin.

**joffrey575** · 16/12/2015, 11h44

Merci pour ta réponse.

J'ai tenté d'enlever la balise table mais visiblement avec le code-ci en css, mes figures ne s'affichent pas en ligne.

Code :

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

1
2
3
figure {
  display: inline-block;
}

**joffrey575** · 16/12/2015, 11h51

Si j'enlève la table, j'obtiens le code suivant dans un div :

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
	<!--CONTENU DE LA PAGE WEB-->
	<div id="contenu">
		<ul>
		<li class="menu1">Systèmes linux embarqués</li>
		</ul>
 
					<figure>
					<figcaption><h3>Surveillance vidéo</h3></figcaption>
					<a href="projets_surveillance_video.php">
					<img src="images/systemes_embarques/raspberry_pi2/miniatures/tn_rasp_1.png" border=5/></a>
					</figure>
 
					<figure>
					<figcaption><h3>Réseau de capteurs</h3></figcaption>
					<a href="projets_reseau_de_capteurs.html">
					<img src="images/systemes_embarques/reseau_de_capteurs_AFP51_ARMadeus/miniatures/tn_AFP51.png" border=5/></a>
					<figure>
 
					<figure>
					<figcaption><h3>Pilotage d'une carte</h3></figcaption>
					<a href="projets_pilotage_de_carte.html">
					<img src="images/systemes_embarques/carte_linux_elektor/miniatures/tn_carte_linux_elektor.png" border=5/></a>
					</figure>
             </div>

**thelvin** · 16/12/2015, 12h03

Elles s'affichent comment alors ? Et il est où le CSS ? De manière générale, peux-tu nous montrer l'URL de ta page directement, ou au moins le HTML entier (et qui contient uniquement ton problème et rien d'autre) ? C'est comme ça qu'on fait de l'informatique.

Autre information intéressante, tu testes sur quels navigateurs ?

**joffrey575** · 16/12/2015, 12h33

Oui okey, voici les sources :

index.php :

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
<!doctype html>
<html lang="fr">
<head>
	<?php include("header.html"); ?>
</head>
 
<body>
	<div id="bandeau">
	<!--TITRE DU SITE-->
	<h1>XXX</h1>
	</div>
 
	<div id="menu">
		<?php include("menu.html"); ?>
	</div>
 
	<!--CONTENU DE LA PAGE WEB-->
	<div id="contenu">
		<ul>
		<li class="menu1">Systèmes linux embarqués</li>
		</ul>
 
		<table>
			<tr>
				<td>
					<figure>
					<figcaption><h3>Surveillance vidéo</h3></figcaption>
					<a href="projets_surveillance_video.php">
					<img src="images/systemes_embarques/raspberry_pi2/miniatures/tn_rasp_1.png" border=5/></a>
					</figure>
				</td>
				<td>
					<figure>
					<figcaption><h3>Réseau de capteurs</h3></figcaption>
					<a href="projets_reseau_de_capteurs.html">
					<img src="images/systemes_embarques/reseau_de_capteurs_AFP51_ARMadeus/miniatures/tn_AFP51.png" border=5/></a>
					<figure>
				</td>
				<td>
					<figure>
					<figcaption><h3>Pilotage d'une carte</h3></figcaption>
					<a href="projets_pilotage_de_carte.html">
					<img src="images/systemes_embarques/carte_linux_elektor/miniatures/tn_carte_linux_elektor.png" border=5/></a>
					</figure>
				</td>
			</tr>
		</table>
 
		<ul type="square">
		<h2><li>Développements VHDL sur puce FPGA</li></h2>
		</ul>
		<table>
			<tr>
				<td>
					<figure>
					<figcaption><h3>Log-polar mapping</h3></figcaption>
					<img src="images/developpement_VHDL_cible_FPGA/1_Log_polar_mapping/miniatures/tn_illustration.png" border=5/>
					</figure>
				</td>
				<td>
					<figure>
					<figcaption><h3>Network-On-Chip (NoC)</h3></figcaption>
					<img src="images/developpement_VHDL_cible_FPGA/2_NoC/miniatures/tn_illustration.png" border=5/>
					</figure>
				</td>
				<td>
					<figure>
					<figcaption><h3>Decodeur protocole Oregon Scientifique</h3></figcaption>
					<img src="images/developpement_VHDL_cible_FPGA/3_Decodeur_protocole_oregon/miniatures/tn_illustration.png" border=5/>
					</figure>
				</td>
			</tr>
			<tr>
				<td>
					<figure>
					<figcaption><h3>Jeu d'esquive</h3></figcaption>
					<img src="images/developpement_VHDL_cible_FPGA/4_Jeu_d_esquive/miniatures/tn_materiel_1.png" border=5/>
					</figure>
				</td>
 
				<td>
					<figure>
					<figcaption><h3>Techniques d'optimisations architecturales</h3></figcaption>
					<img src="images/developpement_VHDL_cible_FPGA/4_Jeu_d_esquive/miniatures/tn_materiel_1.png" border=5/>
					</figure>
				</td>
			</tr>
		</table>
	</div>
 
	<!--PIED DE PAGE DE LA PAGE WEB-->
	<!--
	<div id="pied_page">
		<?php include("pied_de_page.html"); ?>
	</div>
	-->
 
 
</body>
</html>

CSS :

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
 
 
/*CHARGER LES STYLE DE TEXTES*/
@font-face {
    font-family: "RobotoUThin";
    src: url("Roboto/Roboto-Thin.ttf");
}
@font-face {
    font-family: "RobotoThin";
    src: url("Roboto/Roboto-Light.ttf");
}
@font-face {
    font-family: "Roboto";
    src: url("Roboto/Roboto-Regular.ttf");
}
 
/*STYLE DU TEXTE*/
body{
	font-family: 'RobotoThin';
	width: 800px;
	margin: auto;
}
 
/*STYLE DES TITRES*/
h1{
    /*background-color:white;*/
    font-family : 'RobotoThin'; /* on utilise Arial, c'est plus beau ^^ */
    color:white;
    font-size: 60px;
    margin-top:0cm;
    text-align : center;
}
 
h2{
    /*background-color:white;*/
    font-family : 'RobotoThin'; /* on utilise Arial, c'est plus beau ^^ */
    color:black;
    font-size: 23px;
    text-align : left;
}
 
h3{
	font-size: 16px;
    font-family : 'Roboto thin'; /* on utilise Arial, c'est plus beau ^^ */
	font-style: normal;
	font-weight:none;
	text-align : center;
}
 
td{
	vertical-align: top;
	text-align:center;
}
 
li.menu1{
    font-family : 'RobotoThin'; /* on utilise Arial, c'est plus beau ^^ */
    color:black;
    font-size: 23px;
}
 
/*MISE EN FORME DE LA PAGE*/
div#bandeau {
	max-width:800px;
	height:83px;
	background-color:rgb(0, 100, 230);
	}
div#menu {
	max-width:800px;
	height:22px;
	background-color:rgb(0, 100, 230);
	}
div#contenu {
	float:left;
	width:800px;
	height:auto;
	background-color:rgb(232,252,253);
	}
div#pied_page {
	clear:both;
	width:800px;
	height:50px;
	/*background-color:#33FF99*/;
	}

J'en profite que ce ne soit pas trop immense pour tout mettre.

Le code php est organisé comme ceci :
-body -> div contenu -> X tables

J'ai tenté sans les balises tables mais ça ne marche pas super bien encore.

Je teste mon site avec easyphp et le navigateur firefox pour le moment.

Comment afficher 3 images sur une même ligne ?

HTML

Vue hybride

Discussions similaires

Partager

Partager