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

**qmulonainbus** · 06/09/2006, 14h17

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**fallais** · 06/09/2006, 15h52

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**qmulonainbus** · 06/09/2006, 15h55

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?

**fallais** · 06/09/2006, 15h58

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**MasterOfChakhaL** · 06/09/2006, 16h12

je pense que tu devrais rajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style="display:block;"

comme attribut à tes images

**qmulonainbus** · 06/09/2006, 16h20

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

=>MasterOfChakhaL :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**MasterOfChakhaL** · 06/09/2006, 16h43

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

**qmulonainbus** · 06/09/2006, 18h06

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

**fallais** · 06/09/2006, 18h11

T'as essayé ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ^^

**qmulonainbus** · 06/09/2006, 18h41

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

**Linaa** · 06/09/2006, 20h00

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)

**qmulonainbus** · 06/09/2006, 23h43

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

merci à tous pour votre aide

**fallais** · 07/09/2006, 20h32

Ah mais donc la tu n'es plus aux "normes"

Non linaa ?

**Linaa** · 07/09/2006, 20h34

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...

**fallais** · 07/09/2006, 20h37

Toute balise image doit etre entre deux <p></p> non ? Je parle XHTML 1.0 Trans ... Enfin je peux me tromper

**Linaa** · 07/09/2006, 20h45

Pas à ma connaissance en tout cas...

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

HTML

Discussions similaires

Partager

Partager