[img] Pas d'espace entre les images

Version imprimable

Bonjour,

Le code suivant crée un espace entre les images :
Code:

1 2 3 4 5 6 7 8 <a href="#"><img src="partieGauche.jpg"></a> <a href="#"><img src="partieMilieuGauche.jpg"></a> <a href="#"><img src="partieMilieuDroite.jpg"></a> <a href="#"><img src="partieDroite.jpg"></a>
Et bien sûr je n'en veux pas, car en faite c'est une image reconstituée où l'utilisateur pourra cliquer sur 4 zones différentes.

Comment faire ? :?

Merci. ;)

05/05/2006, 08h50
blueice

Soit en CSS avec un truc du genre margin et padding à 0.
ou alors et je pense que c'est plutôt ca, enlève tous les espaces dans le code entre les balises.
05/05/2006, 08h59
titoumimi
Code:

1 2 3 4 a img { border:0; }
?

bonjour,

essaye ceci :

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
26
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
img{float: left;border: none;padding: 0px;margin: 0px;}
//-->
</style>
 
</head>
 
<body>
<a href=""><img vspace="0" hspace="0" src="i1.jpg"></a>
<a href=""><img vspace="0" hspace="0" src="i2.jpg"></a>
<a href=""><img vspace="0" hspace="0" src="i3.jpg"></a>
<a href=""><img vspace="0" hspace="0" src="i4.jpg"></a>
du texte du texte du texte du texte du texte du texte<br>
du texte du texte du texte du texte du texte du texte<br>
du texte du texte du texte du texte du texte du texte<br>
du texte du texte du texte du texte du texte du texte<br>
du texte du texte du texte du texte du texte du texte<br>
du texte du texte du texte du texte du texte du texte<br>
</body>
 
</html>

j'ai dû déclarer les images en float et attribuer une valeur à hspace et vspace pour vraiment supprimer les espaces. Et cela ne gène pas la mise en forme du texte.

05/05/2006, 14h37
jp949

pour supprimer les espaces sur les images simplement:
{ display: block;float: left: border: 0; margin: 0;}
05/05/2006, 15h20
Mister Nono

Merci, vos solutions sont exactes lorsque les images sont placées les unes à côté des autres.

Mais cela n'est plus valable quand elles se trouvent les unes en dessous des autres.

En fait, l'image finale reconstituée est composée de 8 petites images :

2 lignes de 4 images.

Et bien je n'arrive pas à coller les petites images les unes aux autres : il subsiste toujours une petite marge entre la première ligne et la deuxième.

Si j'utilise une <table> cela est pareil.

Comment faire ? :?

Où trouver un exemple pour faire cela ? :roll:

Merci. ;)

ajoute align="absbottom" à tes images.

code CSS

Code:

1
2
3
4
5
 
img{border: none}
table td tr{
border: none;
}

code HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<table cellpadding="0" cellspacing="0">
<tr>
<td><a href=""><img align="absbottom" vspace="0" hspace="0" src="image.jpg"></a></td>
<td><a href=""><img align="absbottom" vspace="0" hspace="0" src="image.jpg"></a></td>
<td><a href=""><img align="absbottom" vspace="0" hspace="0" src="image.jpg"></a></td>
<td><a href=""><img align="absbottom" vspace="0" hspace="0" src="image.jpg"></a></td>
</tr>
<tr>
<td><a href=""><img align="absbottom" vspace="0" hspace="0" src="image.jpg"></a></td>
<td><a href=""><img align="absbottom" vspace="0" hspace="0" src="image.jpg"></a></td>
<td><a href=""><img align="absbottom" vspace="0" hspace="0" src="image.jpg"></a></td>
<td><a href=""><img align="absbottom" vspace="0" hspace="0" src="image.jpg"></a></td>
</tr>
</table>

Je connaissais pas cet attribut.
Moi pour les design j'utilisais le code ci-dessous mais ça ne permet pas de cliquer sur l'image.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <table border="0" cellpadding="0" cellspacing="0"> <tr > <td background='test2.jpg' width='479' height='269'> <a href="#"> </a> </td> </tr> <tr> <td background='test2.jpg' width='479' height='269'> <a href="#"> </a> </td> </tr> </table>
@ +;)

05/05/2006, 23h04
francis m

ben non tu ne peux pas cliquer sur une image si elle est en background !
06/05/2006, 09h30
Auteur

Citation:

Envoyé par francis m

ben non tu ne peux pas cliquer sur une image si elle est en background !

+1 Ou gérer l'événement onclick sur le <td>.

Sinon pour cliquer sur l'image il faut l'encadrer de balise <a>.

ça marche très bien comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<table border="0" cellpadding="0" cellspacing="0">
<tr >
<td background='test2.jpg' width='479' height='269' onclick="location.href='http://www.free.fr'">
</td>
</tr>
<tr>
<td background='test2.jpg' width='479' height='269' onclick="location.href='http://www.free.fr'">
</td>
</tr>
</table>

Je savais bien qu'il y avait une autre solution, merci Auteur.

@+

06/05/2006, 19h13
Mister Nono

Bien sûr que cela fonctionne mais c'est du javascript, et tout le monde n'utilise pas le javascript, alors qu'en CSS tout le monde le verra.

A+
09/05/2006, 17h04
Sheriff

Citation:

Envoyé par blueice

enlève tous les espaces dans le code entre les balises.

je pense que c la soluce la plus simple, avec biensur les bordures des images à 0