Discussion :

[ploufleouf74]

Bonjour,

je souhaite aligner horizontalement 4 blocs sur ma page HTML.

J'ai choisi l'option <span> mais le problème c'est que je n'arrive pas à "coller" mes <span> entre eux : j'ai toujours un espace d'environ 3 ou 4 px qui les sépare.

Voici la partie html concernée :

Code :

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

1
2
3
4
5
 
 <span id="span1"><a href="lien"> <img src="images/image1.jpg" /></a></span>
 <span id="span2"><a href="lien"> <img src="images/image2.jpg" /></a></span>
<span id="span3"><a href="lien"> <img src="images/image3.jpg" /></a></span>
<span id="span4"><a href="lien"> <img src="images/image4.jpg" /></a></span>

Et la CSS qui va avec :

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
#span1{
height:68px;
width:235px;
}
 
 
#span2{
height:68px;
width:246px;
}
 
#span3{
height:68px;
width:188px;
}
 
#span4{
height:118px;
width:188px;
}

J'ai tenté

Code :

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

1
2
3
4
span{
margin:0px;
padding:0px;
}

mais sans succès

j'ai également tenté de mettre margin:0 et padding:0 dans la css sur chacun de mes span mais sans succès non plus.

J'ai également lu dans un autre forum que dans la page html, je ne devais pas revenir à la ligne entre chaque span.
cela revient a faire ca :

Code :

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

<span id="span1">...</span><span id="span2">...</span><span id="span3">...</span><span id="span4">...</span>

mais cette technique de scioux ne marche pas non plus.

La seule chose qui fonctionne est de poser des margin-left négatifs sur chacun de mes span mais le site doit être ultra compatible, ultra accessible, ultra tout quoi...

Any idea ?

[coeos.pro]

Bonjour, avez vous essayé de supprimer l'espace entre la balise a et img ? ...lien"> <img...

[thelvin]

Mais... Et si tu enlevais tous tes <span> et que tu te contentais de ne pas mettre d'espace dans la balise <a> ?

Pour info, <span> est un élément inline, pas un élément block. width et height sont ignorés. Quant à padding et margin, ils sont à zéro par défaut puisque span est typiquement l'élément inline neutre, qui n'a aucun effet si on ne le style pas.

Edit: Grillé

[ploufleouf74]

@coeos.pro : je viens d'essayer mais ca ne résoud pas le probleme
@thelvin : je viens d'enlever mes span et les espaces dans les balises <a> et le problème est résolu.
Cette interprétation des navigateurs est vraiment dommage, ca enlève de la lisibilité dans le fichier html...

et au fait, pourquoi

Edit: Grillé

?

[thelvin]

Cette interprétation des navigateurs est vraiment dommage, ca enlève de la lisibilité dans le fichier html...

Bah, une autre interprétation ne serait pas mieux -_-°, ça voudrait dire que les espaces qui ont été mis là volontairement sont ignorés ! Et si on les veut on fait quoi ?
(D'ailleurs les navigateurs ne sont pas libres de l'interpréter autrement. C'est la règle.)

à la place, tu peux faire

Code :

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

<a ><img /></a><a ><img /></a><a ><img /></a>

et au fait, pourquoi

Parce que quelqu'un a répondu la même chose avant moi. Je me suis fait griller .