[HTML] Affichage d'une mosaique - images espacées

Affichage d'une mosaique - images espacées [HTML] - HTML/CSS - Programmation

Marsh Posté le 07-09-2002 à 22:24:33    

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:

Code :
  1. [cpp]<HTML>
  2. <BODY>
  3.  <P ALIGN="CENTER">
  4.  <IMG SRC="images/index1_a.jpg">
  5.  <IMG SRC="images/index2_a.jpg">
  6.  <IMG SRC="images/index3_a.jpg">
  7.  <BR>
  8.  <IMG SRC="images/index4_a.jpg">
  9.  <IMG SRC="images/index5_a.jpg">
  10.  <IMG SRC="images/index6_a.jpg">
  11.  <BR>
  12.  <IMG SRC="images/index7_a.jpg">
  13.  <IMG SRC="images/index8_a.jpg">
  14.  <IMG SRC="images/index9_a.jpg">
  15. </BODY>
  16. </HTML>


---------------
last.fm
Reply

Marsh Posté le 07-09-2002 à 22:24:33   

Reply

Marsh Posté le 07-09-2002 à 22:28:14    

Construit un tableau:

<HTML>
 <BODY>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
 <td><IMG SRC="images/index1_a.jpg"></td>
 <td><IMG SRC="images/index2_a.jpg"></td>
 <td><IMG SRC="images/index3_a.jpg"></td>
</tr>
<tr>
 <td><IMG SRC="images/index4_a.jpg"></td>
 <td><IMG SRC="images/index5_a.jpg"></td>
 <td><IMG SRC="images/index6_a.jpg"></td>
</tr>
<tr>
 <td><IMG SRC="images/index7_a.jpg"></td>
 <td><IMG SRC="images/index8_a.jpg"></td>
 <td><IMG SRC="images/index9_a.jpg"></td>
</tr>
</table>
</BODY>
</HTML>


---------------
༼ つ ◕_◕ ༽つ
Reply

Marsh Posté le 07-09-2002 à 22:28:38    

[:vomi]

Reply

Marsh Posté le 07-09-2002 à 22:32:14    

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>

Reply

Marsh Posté le 07-09-2002 à 22:36:02    

youdontcare a écrit a écrit :

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é :cry:


---------------
last.fm
Reply

Marsh Posté le 07-09-2002 à 22:36:16    

W3C Compliant a écrit a écrit :

[:vomi]



bah quoi, c'est une solution non ?:/


---------------
༼ つ ◕_◕ ༽つ
Reply

Marsh Posté le 07-09-2002 à 22:37:37    

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é :cry:


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

Reply

Marsh Posté le 07-09-2002 à 22:39:50    

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

Reply

Marsh Posté le 07-09-2002 à 22:41:40    

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


---------------
last.fm
Reply

Marsh Posté le 07-09-2002 à 22:42:42    

W3C Compliant a écrit a écrit :

img {display:block;}


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

Reply

Marsh Posté le 07-09-2002 à 22:42:42   

Reply

Marsh Posté le 07-09-2002 à 22:42:45    

Cutter a écrit a écrit :

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



:jap:


---------------
༼ つ ◕_◕ ༽つ
Reply

Marsh Posté le 07-09-2002 à 22:44:40    

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


---------------
last.fm
Reply

Marsh Posté le 07-09-2002 à 22:50:45    

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

Reply

Marsh Posté le 07-09-2002 à 22:58:40    

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

Reply

Marsh Posté le 07-09-2002 à 23:06:17    

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

Reply

Marsh Posté le 07-09-2002 à 23:10:35    

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

Reply

Marsh Posté le 07-09-2002 à 23:14:17    

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

Reply

Marsh Posté le 08-09-2002 à 02:07:11    

<HTML>
 <BODY>
  <P ALIGN="CENTER">
  <IMG SRC="images/index1_a.jpg"><IMG SRC="images/index2_a.jpg"><IMG SRC="images/index3_a.jpg">
  <BR>
  <IMG SRC="images/index4_a.jpg"><IMG SRC="images/index5_a.jpg"><IMG SRC="images/index6_a.jpg">
  <BR>
  <IMG SRC="images/index7_a.jpg"><IMG SRC="images/index8_a.jpg"><IMG SRC="images/index9_a.jpg">
 </BODY>
</HTML>


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

<HTML>
  <BODY>
    <div class="ligne">
      <IMG SRC="images/index1_a.jpg"><IMG SRC="images/index2_a.jpg"><IMG SRC="images/index3_a.jpg">
    </div>
     <div class="ligne">
      <IMG SRC="images/index4_a.jpg"><IMG SRC="images/index5_a.jpg"><IMG SRC="images/index6_a.jpg">
    </div>
    <div class="ligne">
      <IMG SRC="images/index7_a.jpg"><IMG SRC="images/index8_a.jpg"><IMG SRC="images/index9_a.jpg">
    </div>
  </BODY>
</HTML>


 
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.


Message édité par gm_superstar le 08-09-2002 à 02:17:08
Reply

Marsh Posté le 08-09-2002 à 02:09:02    

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



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.

Reply

Marsh Posté le 01-04-2011 à 12:54:42    

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

Reply

Marsh Posté le 01-04-2011 à 13:35:37    

This is the best déterrage ever  
http://hfr.toyonos.info/generateurs/golden/?&code=pseudo%20______&yellow_ratio=40&align_hor=E&align_ver=N


Message édité par gatsu35 le 01-04-2011 à 13:39:51

---------------
Blablaté par Harko
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed