Hello!
 
J'essaie d'afficher une mosaique pour faire des rollovers intéressants. Malheureusement, les images affichées sont espacées de quelques pixels. J'aimerais pouvoir les coller les unes aux autres pour qu'on pense qu'il s'agit d'une seule et même image, comment faire? D'avance merci.
 
Voici mon code:

Construit un tableau:

c'est la taille du texte. entre chaque image, tu as une ligne donnat un espace de la taille de la fonte courante. idem pour chaque <br>.
 
donc par les css : font-size: 0px, eg
 
<p style="font-size: 0px">
 <img ...>
 ...
</p>

 
Et y'a pas simplement un moyen d'enlever ces espaces? Amoins avec un éditeur web mais là j'ai rien d'installé

W3C Compliant a écrit a écrit :

bah quoi, c'est une solution non ?

Cutter a écrit a écrit : Et y'a pas simplement un moyen d'enlever ces espaces? Amoins avec un éditeur web mais là j'ai rien d'installé

hmm, c'est la base du html quand même donc a priori non.
 
sinon comme le dit the real smiley, tableau.

ou bien, en CSS :
 
img {display:block;}
 
 

Oui, le tableau marche bien, je vais l'utiliser à defaut de qqchose plus simple.
 
Merci tlm

ça va justement créer un block, donc toutes les images seront empilées ...

p.S: Sinon, y'a t-il un moyen de centrer une image verticalement sur la page?

passer par un tableau de height: 100%, puis centrer le contenu de la cellule.
 
déjà abordé pas mal de fois, -> recherche.

youdontcare a écrit a écrit : ça va justement créer un block, donc toutes les images seront empilées ...

 
Non, chaque image sera affichée en tant que bloc (et non élément texte "inline" ) donc collera aux voisines, ca permet aussi de définir des marges précises etc. enfin voila

le comportement d'un block est de créer un box prenant toute la largeur de l'élément parent.
 
t'es pas très compliant en fait

teste par toi-même
 
bien sûr suffit pas de laisser block tout seul

je comprends plus rien ... t'as pas un exemple de ce que tu veux dire ?

 
ça devrait déjà éliminer les espaces horizontaux entre les images.
 
Pour éliminer les espaces verticaux entre les lignes on peut mettre chaque ligne dans un <div> :
 

 
Et définir une marge haute négative avec les CSS :
 
div.ligne {
  margin-top: -5px; /* à ajuster */
  text-align: center;
}
 
Cela a pour effet de faire remonter la ligne d'image sur la précédente.
 
Mais ce n'est pas la seule solution.

youdontcare a écrit a écrit : le comportement d'un block est de créer un box prenant toute la largeur de l'élément parent.   t'es pas très compliant en fait

Par exemple, si tu rajoute la propriété :
 
float: left;
 
les images iront se coller les une à coté des autres bien que ce soit des blocks.

Ajoute style="display:block" à chacune de tes balises <img/>

This is the best déterrage ever