[HTML] faire correspondre 2 moitiés d'images

Version imprimable

bonjour à tous :)
je suis nouveau sur le forum et semi-débutant en hmtl
mon problème : j'ai un tableau à 2 lignes, 1 image /ligne
ces 2(moitié/moitié) images doivent n'en former q'une seule.
Dans l'aperçu ça marche, mais sous firefox mes 2 images sont séparées
voici le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="958" height="106"><p><img src="../A.gif" width="183" height="148" border="0" valign="top" nowrap></td> </tr> <tr> <td width="958"><p><img src="../B.gif" width="183" height="130" border="0" valign="top" nowrap></td> </tr> </table> </body>
pouvez-vous m'aider? merci d'avance

:tagcode:

Code:

1
2
3
4
5
6
7
8
9
10
 
<table border="0" style="width: 958px; border: 0px; border-collapse: collapse;">
<tr>
<td valign="top">
<p><img src="../A.gif" width="183" height="148" border="0" /></p></td>
</tr>
<tr>
<td valign="top"><p><img src="../B.gif" width="183" height="130" border="0" /></p>
</td></tr>
</table>

Ca marche la ?
Tu devrais utiliser le CSS !

06/09/2006, 15h55
qmulonainbus

merci c'est déjà mieux : l'espace entre les 2 est réduit
mais néamoins il subsiste :
mes images sont séparées par 2 pixels environ, comme si il y avait une bordure invisible
à quoi cela est-il du?

Code:

1
2
3
4
5
6
7
8
9
<table border="0" style="width: 958px; border: 0px; border-collapse: collapse;">
<tr>
<td valign="top"  style="border: 0px;">
<p><img src="../A.gif" width="183" height="148" border="0" /></p></td>
</tr>
<tr>
<td valign="top" style="border: 0px;"><p><img src="../B.gif" width="183" height="130" border="0" /></p>
</td></tr>
</table>

Et la ?

06/09/2006, 16h12
MasterOfChakhaL

je pense que tu devrais rajouter

Code:

style="display:block;"

comme attribut à tes images

merci pour ton investissement Elwyn mais l'espacement est toujours présent

=>MasterOfChakhaL :
Code:

1 2 3 4 5 6 7 8 9 <table border="0" style="width: 958px; border: 0px; border-collapse: collapse;"> <tr> <td valign="top" " style="display:block;"> <p><img src="../A.gif" width="183" height="148" border="0" /></p></td> </tr> <tr> <td valign="top" style="display:block;"><p><img src="../B.gif" width="183" height="130" border="0" /></p> </td></tr> </table>
voilà j'ai essayé ta méthode, mais le résultat ne change :(
quel avantage à utiliser CSS pour cela?

pour vous aider je vais expliquer plus mon problème que j'ai simplifier avec cet exemple
en fait la page du site en question sera composée en partie un tableau de 5 par 4 contenant des images qui reproduisent si elle se collent bien, une plus grande
avez-vous une solution ?
oui je suis un semi-newb :)

06/09/2006, 16h43
MasterOfChakhaL

solution:
enlever le tableau,

tu mets toutes tes images à la suite en float: left;
tu rajoutes clear:right à l'image qui est censé être en bout de ligne...

L'interêt du css, c'es qu'il te permet de faire certaines choses que tu ne pourrait pas faire autrement...

par exemple une image est en inline (comme du texte) ce qui fait qu'elle s'aligne sur la ligne de base du texte laissant une place de quelques pixels pour la queue des lettres comme p,q y...

je t'ai dit de les mettre les images en bloc pour supprimer cet inconvénient (dans ce cas)
j'ai oublié de te dire de virer les p et de vérifier le cellspacing et cellpadding
06/09/2006, 18h06
qmulonainbus

dsl pr la balise code que j'ai oubliée ;)

ta solution serait envisageable
sauf que j'ai besoin que ce soit un tableau car il devrait y avoir qq cases vides dans lequel viendrait s'insérer des images : je m'explique : je veux faire un site pour exposer mes travaux; le tableau problématique permet le design du site(navigation); ce design occupe les cases périphériques du tableau; ce design forme un tout d'où la nécessité que les images se collent. A l'intérieur du tableau se trouve le contenu (mes travaux); sur chaque page chaque travail occupe une image placée dans les cases intérieur.
rien de très sorcier donc, sauf le pb de l'espacement ..

schéma du tableau en question, 0=image du design, X=travaux
00000
0XX00
0XX00
00000

j'espère ne pa avoir été tro confu

help :s

T'as essayé ca :

Code:

1
2
3
4
5
6
7
8
9
<table border="0" style="width: 958px; border: 0px; border-collapse: collapse;">
<tr>
<td valign="top"  style="border: 0px;">
<p><img src="../A.gif" width="183" height="148" border="0" /></p></td>
</tr>
<tr>
<td valign="top" style="border: 0px;"><p><img src="../B.gif" width="183" height="130" border="0" /></p>
</td></tr>
</table>

Sinon pour tes tableaux tu sais qu'on peut fusionner des cellules ? Car c'est vrai que mettre 2 moitiés dans des cellules c'est bof ^^

06/09/2006, 18h41
qmulonainbus

merci j'ai essayé ça
oui je sais que l'on peut fusionner, mais je n'y avais pas vraiment réfléchi pour les alignement verticaux ce qui pourrait être pratique... mais bon j'ai des boutons sur le côté (enfin des images bouton) je sais pa si ça marchera tj si je fusionne ... je vais essayer :)

et essayer aussi le CSS ça à l'air sympa pour mon pb :)
06/09/2006, 20h00
Linaa

La balise de paragraphe <p> rajoute une marge autour du bloc!
A mon avis en les enlevant, ça va retirer les pixels de trop
(De toute façon ils ne servent pas à grand chose dans ton cas)

merci linaa c'est exactement ce qu'il manquait !
et donc en combinant tout on obtient :

Code:

1
2
3
4
5
6
7
8
9
<table border="0" cellpadding="0" cellspacing="0" style="width: 958px; border: 0px; border-collapse: collapse;">
<tr>
<td valign="top"  style="border: 0px;">
<img src="../A.gif" width="183" height="148" border="0" /></td>
</tr>
<tr>
<td valign="top" style="border: 0px;"><img src="../B.gif" width="183" height="130" border="0" />
</td></tr>
</table>

voilà, là ça marche :D
merci à tous pour votre aide

07/09/2006, 20h32
fallais

Ah mais donc la tu n'es plus aux "normes" :) Non linaa ?
07/09/2006, 20h34
Linaa

Citation:

Envoyé par Elwyn

Ah mais donc la tu n'es plus aux "normes" :) Non linaa ?

Et pourquoi donc?
On a juste supprimer une balise <p>
Cette balise sert logiquement à regrouper des éléments, mais comme il n'y a qu'une image, ça ne sert à rien...
07/09/2006, 20h37
fallais

Toute balise image doit etre entre deux <p></p> non ? Je parle XHTML 1.0 Trans ... Enfin je peux me tromper :)
07/09/2006, 20h45
Linaa

Pas à ma connaissance en tout cas...