Mettre un texte sous une image

Version imprimable

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 :
http://img11.hostingpics.net/pics/189260Capture.png

Si le titre est grand, le texte dépasse l'image est j'aimerais que le texte vient juste en dessous, un peu comme çà:
http://img11.hostingpics.net/pics/878670Capture.png

Voilà mon code HTML:
Code:

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:

1 2 3 a { display:inline-block; }
Et J'aimerais aussi que le titre sois centrer sous l'image :)

Merci pour votre aide

Cordialement

Bonjour,
une solution avec liste ordonnées :

Code:

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:

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>

05/02/2012, 19h50
Invité

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

Merci
05/02/2012, 20h51
alexgille
Pour que les éléments de la liste <li> se mettent côte à côte ce CSS pourra t'aider :
Code:

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.
05/02/2012, 21h36
Invité

Citation:

Envoyé par Twinkie97441

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.

Citation:

#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;
}
06/02/2012, 03h55
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 :ccool: