Texte sous une image

(reprise du message précédent)

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

J'ai oublié ...

.photos td {
   text-align: center;
}

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

K506 K508

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;
}

Hum finalement la methode du tableau correspond plus a la mise en forme souhaité car meme sans style CSS le contenu reste en ligne
Reste a savoir pouquoi je ne peut pas centré le contenu des cellules

yahrou a écrit :
J'ai oublié ...

.photos td {
   text-align: center;
}

Oui j'ai rajouté ca deja et ca ne change rien justement

Je viens de réfléchir : c'est parce que l'image est en block

Si tu enlèves cette histoire de block et rajoute un br apres l'image ca reglera le problème.

Tu peux aussi, mettre le texte dans un paragraphe, éventuellement en virant les marges, ou directement dans un div, et enlever le display block de l'image.

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

À noter que les éléments de type bloc ne sont pas centrés par un text-align: center (en mode Standard). Et si on passe les images en display: block, elles ne seront pas centrées non plus, à moins d'utiliser en plus la technique des marges automatiques sur ces images.

Eu un <br /> dans un <td> on a le droit???

nouvelle solution :

<table class="photos">

   <tr>

      <td>

           <img src="..." alt="...">

           <p>texte</p>

      </td>

    </tr>

   <tr>

      <td>

           <img src="..." alt="...">

           <p>texte</p>

      </td>

    </tr>

</table>

.photos td {
 tsxt-align: center;
}

.photos td p {
  text-align: center; /* pas sure que ce soit util */
  margin: 0px;
}

Modifié par yahrou (14 May 2007 - 14:29)

a écrit :

Eu un <br /> dans un <td> on a le droit???

Ba euh oui...

Hum...
Enfin niquel la solution avec le texte dans un paragraphe. Je pense que je vais rester la dessus Merci