Discussion :

[bertrand6631]

Bonjour !

Suite à des recherches sur le net, je suis tombé sur ce sujet, Mettre un texte sous une image, qui m'a bien aidé !

Seulement, il ne manque qu'un petit détail pour que je solutionne mon problème !



J'ai réussi à mettre les deux images côte à côte, comme dans l'entouré rouge, grâce à ce morceau de CSS :

Code CSS :

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

1
2
3
4
.imageCentre {
	text-align:center;
	display:inline-block;
}

Mais je n'ai pas pu mettre de texte sous chaque image comme je l'avais fait dans l'entouré vert ! Ce sont deux méthodes différentes que j'ai piochées, et impossible pour moi de "fusionner" les deux, car mon niveau de codage est aussi élevé que le niveau de grammaire d'un analphabète..

Je vous donne le CSS et l'HTML des deux entourés :

CSS rouge :

Code CSS :

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

1
2
3
4
.imageCentre {
	text-align:center;
	display:inline-block;
}

HTML rouge :

Code :

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

1
2
3
4
5
6
7
8
9
<div class="imageCentre">
 
<a href="Electrique/1-direction.jpg" target="_blank"><img src="Electrique/1-direction.jpg" alt="" width="40%" height="auto"></a>
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;	
 
<a href="Electrique/1-direction.jpg" target="_blank"><img src="Electrique/1-direction.jpg" alt="" width="40%" height="auto"></a>
 
</div>

CSS vert :

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
#ul_liste li { /* liste */
        display:inline-block;
	list-style-type:none; 
        list-style-position:inside;
        width:120px;
        padding:5px;
        text-align:center;
        vertical-align:top;
}
 
#ul_liste li img { /* image */
	width: 100%;
	height: auto;
}
 
#ul_liste li span { /* texte */
        width:120px;
        font-size:1em;
        color:blue;
}
 
li {
display: inline;
}

HTML vert :

Code :

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

1
2
3
4
<ul id="ul_liste">
  <li><a href="Electrique/1-direction.jpg"><img src="Electrique/1-direction.jpg" alt="jeux" width="40%"><br/><span>Texte 1</span></a></li>
  <li><a href="Electrique/1-direction.jpg"><img src="Electrique/1-direction.jpg" alt="jeux" width="40%"><br/><span>Texte 2</span></a></li>
</ul>

En récapitulatif, je désire donc mettre un texte sous chaque image de l'entouré rouge, mais qu'il reste centré et ne déborde pas sur l'autre image s'il est trop long, qu'il revienne à la ligne en cas !

Merci d'avance !

[Invité]

Bonjour,

Il suffit d'utiliser la même méthode.

[psychadelic]

la bonne méthode c'est de commencer par utiliser les balises HTML qui sont précisésement faites pour ce genre de cas :

Code html :

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

1
2
3
4
<figure>
  <img src="image.jpg" alt="" />
  <figcaption>Légende associée</figcaption>
</figure>

=> https://developer.mozilla.org/fr/doc...Element/figure

et pour la suite, si on veut être en avance sur l'implémentation future on utilise l'élément <picture et <source au lieu d'<img

Code html :

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

1
2
3
4
<picture>
  <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="examples/images/art-large.jpg" media="(min-width: 800px)">
</picture>

https://html.spec.whatwg.org/multipa...icture-element

oui, il existe un polyfill pour les navigateurs quo ne l'on pas encore implémenté ( il y en a au moins 2 à ma connaissance)
https://wooster.checkmy.ws/2014/04/p...onsive-images/