je hais les css :-)

Version imprimable

je hais les css :-)

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:

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

04/12/2015, 14h01
champy

Alors d'une il n'y as pas de CSS dans ton code mais que du HTML :aie:, de deux les tableaux pour faire ce genre de chose c'est pas une bonne idée :aie:, 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 ;)

Bonjour,

Code:

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>

04/12/2015, 14h22
JLC2000
Citation:

Envoyé par champy

Alors d'une il n'y as pas de CSS dans ton code mais que du HTML :aie:, de deux les tableaux pour faire ce genre de chose c'est pas une bonne idée :aie:, 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:

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
04/12/2015, 15h26
JLC2000
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:

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