18067 sujets

Questions générales et questions de débutants

Problème de décalage dans un tableau... HELP !

Bonjour à tous,

Voici le soucis :

J'ai réalisé un site dont l'une des pages comprend un tableau affichant sur 10 lignes (20 en réalité avec les retours chariot) strictement la même chose : une image à 210 pixels de large, un espace, et du texte dans la dernière cellule. Exemple visible ici.

Pour le code, une ligne du tableau donne ça :

<tr>
    <td><div align="right"><img src="images/stories/cinema.jpg" alt="Cinéma" name="Loisirs" width="211" height="150" id="Loisirs" /></div></td>
    <td width="20">&nbsp;</td>
    <td><font color="#8c2703"><h3><Strong>Le Celtic</strong></h3></font>
      <strong>Cinéma / complexe</strong><br />
      <p>Le cinéma "historique" de Concarneau (à 12 km du Clos), entièrement reconstruit et modernisé, diffuse les films les plus récents. Idéal en soirée ou pour égayer une journée pluvieuse... <br />
        <Strong><a href="http://www.cineceltic.com/" target="_blank">[Site internet]</a></Strong><br />
        <em>Adresse : Rue de Colguen - 29900 Concarneau<br />
          Tel : 02 98 97 02 46</em></p>    </td>
  </tr>


Comme vous pouvez le constater, il y a un décalage, le texte devrait se trouver dans le prolongement de l'image, face à elle, et non pas décalé dessous.

Si l'un d'entre vous a une solution, je suis preneur, merci d'avance.

Précision utile : le site utilise le moteur joomla et un template commercial.
Modifié par dourveil (28 May 2010 - 14:23)
Bonjour,
A quoi sert le div ? Uniquement à aligner l'image ? Dans ce cas, pourquoi ne pas faire plus simplement :
<td align="right"><img src="images/stories/cinema.jpg" alt="Cinéma" name="Loisirs" width="211" height="150" id="Loisirs" /></td>

Il faut essayer mais ça perturbe peut-être l'alignement...

Vous pourriez également traiter l'espacement entre les colonnes avec un cellpadding ou cellspacing au lieu de mettre une colonne vide au milieu....
Administrateur
Bonjour,

le template est atteint d'une divite suraigüe, ça fait peur ! Par exemple le fil d'Ariane "Région" est dans 19 div imbriqués Smiley eek

Sinon hannahiss a raison et on peut aller beaucoup plus loin (plus simple), le tableau n'est pas nécessaire ... entre autres.

Bref, pour arriver à ton problème : vertical-align: baseline; appliqué à tes cellules par gantry.css est ce qui fiche la pagaille.
Le sélecteur de règles fait 5 lignes dans Smiley firebug et c'est peut-être nécessaire dans d'autres tableaux mais là non.
Sujet clos
Aller à