[img] Pas d'espace entre les images

**Mister Nono** · 05/05/2006, 01h27

Bonjour,

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

Code :

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

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.

**blueice** · 05/05/2006, 08h50

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.

**titoumimi** · 05/05/2006, 08h59

Code :

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

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

?

**Auteur** · 05/05/2006, 09h44

bonjour,

essaye ceci :

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

**jp949** · 05/05/2006, 14h37

pour supprimer les espaces sur les images simplement:
{ display: block;float: left: border: 0; margin: 0;}

**Mister Nono** · 05/05/2006, 15h20

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 ?

Merci.

**Auteur** · 05/05/2006, 19h42

ajoute align="absbottom" à tes images.

code CSS

Code :

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

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

code HTML

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

**ederf** · 05/05/2006, 20h06

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 :

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

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>

@ +

**francis m** · 05/05/2006, 23h04

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

**Auteur** · 06/05/2006, 09h30

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

**ederf** · 06/05/2006, 15h45

ça marche très bien comme ça :

Code :

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

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>