[HTML/CSS]Espace entre images

**Psykorel** · 16/06/2006, 14h26

Salut tout le monde,

j'ai une page dans laquelle j'ai 4 images dans des cellules de tableau, mon probleme c'est qu'il y a des espaces entre chacuen d'elles.
Pourtant, j'utilise le padding en CSS, et cellspacing en HTML (puisque le border-spacing ne marche pas sous IE il me semble).
Le truc bizarre mais aps tant que ca est qu'il n y a aucun espace sous Firefox...

Je vous mets mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<link href="langues/stylesheet.css" rel="stylesheet" type="text/css">
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Webby's</title>
	</head>
	<body>
	<table width="860" border="0" cellspacing="0">
	  <tr>
		<td colspan="6"><img src="langues/images/langue_01.gif" width="860" height="84"></td>
	  </tr>
	  <tr>
		<td>&nbsp;</td>
		<td width="224"><img src="langues/images/langue_09.gif" width="224" height="390"></td>
		<td width="141"><img src="langues/images/langue_03.gif" width="141" height="391"></td>
		<td width="112"><img src="langues/images/langue_04.gif" width="112" height="391"></td>
		<td width="151"><img src="langues/images/langue_10.gif" width="151" height="391"></td>
		<td width="193"><img src="langues/images/langue_06.jpg" width="193" height="391"></td>
		<td></td>
	  </tr>
	  <tr>
	  <td></td>
		<td>Fran&ccedil;ais</td>
		<td>Nederlands</td>
		<td>English</td>
		<td>Deutsch</td>
		<td>Español</td>
		<td>&nbsp;</td>
	  </tr>
	</table>
	</body>
</html>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
*{
	margin:0px;
}
 
td{
	padding:0px;
	text-align:center;
}
img{
	border:none; 
}

Merci de votre aide

**<romain/>** · 16/06/2006, 14h40

bonjour,

en faisant ca :

Code :

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

1
2
3
*{
	margin:0px;
}

tu dis à tous tes éléments d'avoir une marge nul à gauche, à droite, au dessus et en dessous.

Si tu veux que es images soit séparé tu dois rajouter une marge à ta balise image :

Code :

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

1
2
3
4
5
 
img{
margin-left : 5px /*tes images auront une marge de 5px a gauche*/
 
}

ou :

Code :

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

1
2
3
4
 
img{
margin: 5px /*tes images auront une marge de 5px partout autour d'elle*/
}

**Psykorel** · 16/06/2006, 14h42

J'ai du mal m'exprimer, justement je ne veux aucun espace entre mes images maisil y en a quand meme...

Merci

**<romain/>** · 16/06/2006, 14h51

J'ai du mal m'exprimer, justement je ne veux aucun espace entre mes images maisil y en a quand meme.

Autant pour moi, c'est plutot moi qui ait mal lu apparement

tu as essayéde mettre un padding : 0 à tes tr?

ahh, les problèmes de mise en page avec les tableaux.....

**Auteur** · 16/06/2006, 15h16

bonjour,

ton problème est un classique sous IE, je me demande si la réponse est dans une faq (sinon l'ajouter

). Les marges n'y font rien.

IE ajoute une ligne sous la balise img pour éviter cela il faut ajouter l'attribut align à l'image (ce n'est pas du CSS).

Code :

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

1
2
3
 
 
<img src="...." align="absbottom">

il y a d'autres valeurs pour cet attribut, pour les connaître, un petit tour sur google s'impose.

**Psykorel** · 16/06/2006, 15h35

Ok merci pour vos réponses mais malheureusement aucune ne marche...

Merci

**Auteur** · 16/06/2006, 18h43

et comme ça :

Code :

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

1
2
3
 
 
<table width="860" border="0" cellspacing="0" cellpadding="0">

**Psykorel** · 19/06/2006, 10h18

Merci pour ton aide mais ca non plus ca ne marche pas...
Si vous avez d'autres idées, n'hésitez pas.

Merci

**IdF-Socrateus** · 19/06/2006, 10h33

tu peux toujours ajouter dans ta balise <table :

Code :

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

<table cellpadding="0" [...] >

et en css :

Code :

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

1
2
3
4
5
table {
         border:0;
         padding:0;
         margin:0;
}

après les tr et td en héritent, normalement...

**Psykorel** · 19/06/2006, 11h00

Désolé, toutjours rien, c'est vraiment bizarre la...

Merci quand meme

**IdF-Socrateus** · 19/06/2006, 11h22

un lien vers ta page stp, sinon je vais avoir du mal à trouver d'autres idées...

**masu** · 19/06/2006, 11h37

le probleme vien de la taille de ta premiere ligne qui est suppérieur a celle de la deuxieme dans ton tableau
largeur du tableau 860
largeur de la deuxieme ligne : 224+141+112+151+193=821
du coup il répartie les cellules sur la taille totale.
pour ne pas avoir ce probleme il faut que ta premiere cellule de la deuxieme ligne prenne toute la place restante.

Code :

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