je hais les css :-)

**JLC2000** · 04/12/2015, 12h43

Bonour
j'ai 4 images de 100 x 100 pixels dans un tableau de 4 cases (2 lignes 2 colonnes)
Je voudrais que mes 4 images se touchent verticalement et horizontalement (au pixel près).
J'ai brassé des feuilles de style à n'en plus finir, et je n'y arrive pas.
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
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>tableau</title>
	<style>
	</style>
	<script>
	</script>
</head>
 
 
<body>
  	<table id="tablo">
  		<tr>
  			<td id="hg"><img src="00.png" /></td>
  			<td id="hd"><img src="01.png" /></td>
  		</tr>
  		<tr>
  			<td id="bg"><img src="02.png" /></td>
  			<td id="bd"><img src="03.png" /></td>
  		</tr>
  	</table>
</body>
</html>

Bon, je sais que c'est débile, mais je n'y arrive pas.
Au passage, un bon outil pour les css ?
Très amicalement.
==
JLC

**champy** · 04/12/2015, 14h01

Alors d'une il n'y as pas de CSS dans ton code mais que du HTML

, de deux les tableaux pour faire ce genre de chose c'est pas une bonne idée

, google div grid 2x2 sa devrais te donner des solutions.

Sinon si tu veut absolument utilisé un tableau tu peut essayer de mettre les marges à 0 je ne sait plus à quelle valeur elle sont par défaut, mais avant vérifie tes images , essaye de les assembler dans un logiciel d'image pour voir si c'est pas elle qui on une marge

**Jacques Beauregard** · 04/12/2015, 14h14

Bonjour,

Code :

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

1
2
3
4
5
6
7
8
<div>
  <img src="http://mariofusion.free.fr/avatars/toad.PNG"/>
  <img src="http://mariofusion.free.fr/avatars/toad.PNG"/>
</div>
<div>
  <img src="http://mariofusion.free.fr/avatars/toad.PNG"/>
  <img src="http://mariofusion.free.fr/avatars/toad.PNG"/>	
</div>

**JLC2000** · 04/12/2015, 14h22

Envoyé par champy

Alors d'une il n'y as pas de CSS dans ton code mais que du HTML

, de deux les tableaux pour faire ce genre de chose c'est pas une bonne idée

, google div grid 2x2 sa devrais te donner des solutions.

Sinon si tu veut absolument utilisé un tableau tu peut essayer de mettre les marges à 0 je ne sait plus à quelle valeur elle sont par défaut, mais avant vérifie tes images , essaye de les assembler dans un logiciel d'image pour voir si c'est pas elle qui on une marge

Merci pour ta réponse
Je n'ai pas mis mon css, car je n'ai rien trouvé qui me convienne.
En fait j'arrive à coller mes images "gauche-droite" donc il n'y a plus d'espace vertical entre les deux.
avec :

Code :

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

1
2
3
4
 
#tablo {
	border-collapse: collapse;
}

mais je n'ai rien trouvé pour supprimer l'espace "haut-bas" : il reste toujours un espace horizontal.
Bien sûr, j'ai testé "border", "padding" et tout le tintouin, mais je n'ai rien trouvé qui marche, c'est pour ça que je n'ai pas posté le style.
Et pour mes images, ne t'inquiète pas, c'est du béton, c'est du 100% sûr : 100 x 100 px :-)
Amicalement
==
JLC

**JLC2000** · 04/12/2015, 15h26

Bonjour tout le monde
C'est résolu, ça traîne partout, j'avais mal cherché
Mais je continue à HAIR les css
La solution :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
	<style>	
		table {
			border-collapse: collapse;
			border-spacing : 0;
		}
		td {
			padding: 0;
		}
		img { 
			display: block;
		}
	</style>

Merci à tous pour l'absence de réponse pour une question aussi bateau.
Amicalement.
==
JLC

je hais les css :-)

CSS

Discussions similaires

Partager

Partager