Discussion :

[Invité]

Bonjours à tous,
Actuellement en création d"un site web de jeux vidéo, j'aimerai mettre le titre des jeux sous leurs images qui leurs correspond.
Voilà mon problème en image :



Si le titre est grand, le texte dépasse l'image est j'aimerais que le texte vient juste en dessous, un peu comme çà:


Voilà mon code HTML:

Code :

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

1
2
3
4
5
6
7
8
<h4> <a href=".."> <strong>PlayStation 3</strong> </a> </h4>
 
	<p> <a href="..">  <img  src="images/1.jpg" alt="jeux"/><br/>   <span>Final Fantaisie XII-2    </span>  </a>
	    <a href="..">  <img  src="images/2.jpg" alt="jeux"/><br/>   <span>Captain Morgane and and the Golden Turtle</span>  </a> 
	    <a href="..">  <img  src="images/3.jpg" alt="jeux"/><br/>   <span>Eye Pet and Friends    </span>  </a>
	    <a href="..">  <img  src="images/4.jpg" alt="jeux"/><br/>   <span>Obut Pétanque</span>  </a> 
	    <a href="..">  <img  src="images/5.jpg" alt="jeux"/><br/>   <span>Ferrari Challenge  </span>  </a>
	</p>

Et mon code CSS:

Code :

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

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

Et J'aimerais aussi que le titre sois centrer sous l'image

Merci pour votre aide

Cordialement

[Invité]

Bonjour,
une solution avec liste ordonnées :

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

Code :

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

1
2
3
4
5
6
7
8
<h4> <a href=".."> <strong>PlayStation 3</strong> </a> </h4>
<ul id="ul_liste">
  <li><a href="..">  <img  src="dossier-images/photo-01.jpg" alt="jeux"/><br/>   <span>Final Fantaisie XII-2</span></a></li>
  <li><a href="..">  <img  src="dossier-images/photo-02.jpg" alt="jeux"/><br/>   <span>Captain Morgane and and the Golden Turtle</span>  </a></li>
  <li><a href="..">  <img  src="dossier-images/photo-03.jpg" alt="jeux"/><br/>   <span>Eye Pet and Friends    </span>  </a></li>
  <li><a href="..">  <img  src="dossier-images/photo-04.jpg" alt="jeux"/><br/>   <span>Obut Pétanque</span>  </a></li>
  <li><a href="..">  <img  src="dossier-images/photo-05.jpg" alt="jeux"/><br/>   <span>Ferrari Challenge  </span>  </a></li>
</ul>

[Invité]

Merci pour ta réponse mais je veux qu'on voit les images horizontalement et non verticalement.

Merci

[alexgille]

Pour que les éléments de la liste <li> se mettent côte à côte ce CSS pourra t'aider :

Code :

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

1
2
3
li {
display: inline;
}

Après à toi de jouer sur les margin et padding pour homogénéiser l'espace entre les éléments.

[Invité]

Merci pour ta réponse mais je veux qu'on voit les images horizontalement et non verticalement. Merci

le minimum est d'essayer le code qu'on te propose.

#ul_liste li { /* liste */
list-style-type:none;
list-style-position:inside;
display:inline-block;
width:120px;
padding:5px;
text-align:center;
vertical-align:top;
}

[Invité]

J'ai essayer le code que tu m'a donner en 1er avant de te répondre, c'était les ligne " <style type="text/css"> " et " </style> " qui fessaient défaut.

Mais maitenant sa marche comme je le voulais, t'es un chef,

Merci