Texte sous une image

Bonjour et oui encore moi

Je voudrais savoir s'il est possible en CSS de place un texte sous une image.
Ou si on est obligé de passer par un tableau?
Merci

Re-Hello

Comment ça ? Genre un png transparent avec du texte en dessous ?

Avec tes éléments en position absolu et un conteneur en position relatif ça peut le faire je pense...

C'est pour un faire un truc de ce style:
http://img177.imageshack.us/img177/9158/sanstitrend5.jpg
Modifié par cerede2000 (14 May 2007 - 10:36)

Quelque chose comme ça ne pourrait pas fonctionner?

<div>
	<img src="img.jpg" alt="Image">
	Texte
</div>

div {
	text-align:center;
}
div img {
	display:block;
}

Hum effectivement je n'avais pas penser a ca et meme il suffit de ca:

<style type="text/css">
div {
	width: 50px;
	text-align:center;
}

</style>

<div>
	<img src="image.gif" alt="" />Texte
</div>

Salut

Remarque HS, quelle drôle d'idée de mettre un <div> pour un contenu de niveau inline, il y a <p> qui est fait pour ça

Je supposais qu'il allait devoir donner des dimensions à ses éléments pour bien les aligner et les passer en float par la suite ^^

Tymlis a écrit :
Je supposais qu'il allait devoir donner des dimensions à ses éléments pour bien les aligner et les passer en float par la suite ^^

On peut tout à fait donner des dimensions à la balise <p>

Oui lol, par contre j'ai un soucis mes P ne se collent pas les un a la suite des autres, mais les un en dessous des autres...
Pour ca je peut mettre un float: left; mais a ce moment ca la fait merder les design :S

Christian Le Bouler a écrit :
Salut

Remarque HS, quelle drôle d'idée de mettre un <div> pour un contenu de niveau inline, il y a <p> qui est fait pour ça

+1

cerede2000 a écrit :
Oui lol, par contre j'ai un soucis mes P ne se collent pas les un a la suite des autres, mais les un en dessous des autres...
Pour ca je peut mettre un float: left; mais a ce moment ca la fait merder les design :S

Oui j'ai remplacer en P...

.imgtab {
	width: 50px;
	text-align:center;
}

<p class="imgtab">
	<img src="image.gif" alt="" />Texte
</p>

Mikachu a écrit :
On peut tout à fait donner des dimensions à la balise <p>

Ah, oh... merci !

a écrit :

Oui lol, par contre j'ai un soucis mes P ne se collent pas les un a la suite des autres, mais les un en dessous des autres...
Pour ca je peut mettre un float: left; mais a ce moment ca la fait merder les design :S

Peut-être en donnant des dimensions (height:) à tes <p> pour qu'il s'alignent bien tous sur la même ligne ?

Et rajouter un overflow:hidden sur leur conteneur (et/ou un height:1% pour IE), ou tout simplement rajouter un clear:both sur l'élément suivant pour que tout ce beau monde rentre dans le flux ?

Hum ben finalement ca sera un tableau...

Si tu fais un tableau, mais que tu mets dans chaque case une image et son texte, pas de problème !

Non car ca pose soucis aussi :S Je suis obligé ce mettre une ligne image et une ligne texte...

Ca pour le coup, c'est vraiment dommage pour l'accessibilité...
Quel est le problème avec texte et image dans la même case ?

Le probleme est le suivant:
http://benjy.ovh.org/test/cda.html
Edit: Petit soucis regler, reste juste l'alignement du tout
Comment faire pour que ca bien a gauche?
Modifié par cerede2000 (14 May 2007 - 14:06)

D'apres moi, pour alligner tes différentes cases, le tableau me semble tout à fait approprié et plus solide que les float left. Par contre, pour la logique de l'information, il faut laisser le texte et l'image dnas la même case.
A ta place, voilà ce que je ferai :

<table class="photos">
   <tr>
      <td>
           <img src="..." alt="...">
           texte
      </td>
    </tr>
   <tr>
      <td>
           <img src="..." alt="...">
           texte
      </td>
    </tr>
</table>

.photos img {
   display: block;
}

Pour éviter que « K506 K508 » ne soit coupé en deux, on peut utiliser une espace insécable.

K506 K508

cerede2000 a écrit :
Comment faire pour que ca bien a gauche?

L'affichage d'une longue série de flottants est loin d'être évident. Voir par exemple :
http://web.covertprestige.info/test/15-organiser-serie-de-flottants-en-colonnes-1.html

Si tu sais à l'avance combien d'éléments tu auras sur chaque ligne, tu peux :
- Placer un clear: left sur les éléments N+1, 2N+1, 3N+1... (N étant le nombre d'éléments par ligne). Mais cette technique pose problème notamment à Internet Explorer (voir lien ci-dessus).
- Englober chaque série de N éléments dans un div en overflow: hidden pour éviter le dépassement des flottants.
- Utiliser un tableau de mise en forme.

Sinon, pour garder quelque chose de fluide, une piste : il faut éviter que certains éléments soient plus hauts que les autres, sinon les flottants de la seconde ligne viendront se caler contre cet élément plus haut que les autres. Dans l'exemple que tu donnes, il s'agit du paragraphe du « W610 », plus grand que les autres à cause d'une image trop grande.
Un correctif possible :

.imgtab {
min-height: 70px;
}

Oui effectivement ca marche a merveille par contre je ne peut plus centrer les contenue de mes cellules :S Pourquoi?