Coller des images, vspace="0" n'est pas suffisant

Coller des images, vspace="0" n'est pas suffisant - HTML/CSS - Programmation

Marsh Posté le 20-07-2005 à 15:39:26    

voilou que me conseiller vous pour coller des images à part en utilisant des div qui s'entrecouperais legerement
 
je veux mettre plusieurs images cote à cote horizontallement et je voudrais aucun espace entre chaque image

Reply

Marsh Posté le 20-07-2005 à 15:39:26   

Reply

Marsh Posté le 20-07-2005 à 15:42:08    

vspace n'existe pas, il est deprecated. Pour les histoires d'espace et de machin, c'est tout en CSS ;)

Reply

Marsh Posté le 20-07-2005 à 15:44:55    

CSS :
img {
margin: 0;
border: none;
}

Reply

Marsh Posté le 20-07-2005 à 15:54:04    

cela ne marche pas non plus :
 

img {
 margin: 0;
 border: none;
 width : 180px;
 height : 140px;
 padding: 0px;
}


 
mes images vont etre cliquable et lorsque l'on rajoute la balise <a> cela rajoute encore plus d'espace entre.
Je sens que je vais etre obligé de passer avec des puces ou des div

Reply

Marsh Posté le 20-07-2005 à 15:57:10    

Code :
  1. a img
  2. {
  3. margin:0;
  4. padding:0;
  5. }


 
Au pire les liens contenant une image tu les mets dans la meme classe, pour laquelle tu mets une marge et un padding de 0 ...


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 20-07-2005 à 16:00:19    

display: inline, ou block, un des deux

Reply

Marsh Posté le 20-07-2005 à 16:02:59    

Le mieux c'est encore de travailler sur un document auquel tu as pris soin de supprimer les marges et paddings predefinis sur tous les elements. De cette facon tu travailles avec un modele de marges et de paddings nuls quelque soit le navigateur.
 
* {
margin: 0;
padding: 0;
}


Message édité par afbilou le 20-07-2005 à 16:06:14
Reply

Marsh Posté le 20-07-2005 à 16:12:07    

FlorentG a écrit :

display: inline, ou block, un des deux


 
arf, inline ne fonctionne pas. avec block ca fonctionne mais ce n'est pas sur la meme ligne. Les images avec block sont aligné verticallement.
 

img {
 margin: 0;
 border: none;
 width : 180px;
 height : 140px;
 padding: 0px;
 display: inline;
}


 
afbilou, ce n'est pas tres utile car je precise que pour les balises img que je ne veux pas de marge

Reply

Marsh Posté le 20-07-2005 à 16:13:24    

Merde, j'avais vu la solution l'autre jour :(

Reply

Marsh Posté le 20-07-2005 à 16:15:10    

weed a écrit :


img {
 margin: 0;
 border: none;
 width : 180px;
 height : 140px;
 padding: 0px;
 display: inline;
}


 
afbilou, ce n'est pas tres utile car je precise que pour les balises img que je ne veux pas de marge


 
Ben c'est à dire que margin:0; ca ne mets pas de marges  :sol:


Message édité par plainsofpain le 20-07-2005 à 16:15:23

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 20-07-2005 à 16:15:10   

Reply

Marsh Posté le 20-07-2005 à 16:17:07    

ok, en fait, c'est display: block. Rajoute un float-left, et le tour est joué.

Reply

Marsh Posté le 20-07-2005 à 16:21:34    

Ah en fait ca doit etre tout bete : tu dois ecrire tes images dans le code html a la ligne les unes en dessous des autres :

Code :
  1. <img />
  2. <img />
  3. <img />
  4. <img />


et toute serie de blanc et de retour a la ligne est convertis en un espace en xhtml/html.

Reply

Marsh Posté le 20-07-2005 à 16:29:17    

Vivement http://www.w3.org/TR/2005/WD-css3- [...] e-collapse :)
 
Sinon pour l'instant la solution c de faire ce ke t'as dit FlorentG ou bien de mettre tes img collés comme ceci :

Code :
  1. <im /><im /><im /><im />

Reply

Marsh Posté le 20-07-2005 à 16:30:25    

(avec des g c'est mieux :sol:)


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 20-07-2005 à 16:31:27    

non t fou ... reviens en 2028 ... img est depreciée depuis belle lurette maintenant !

Reply

Marsh Posté le 20-07-2005 à 16:31:57    

Toujours mettre un g. D'ailleurs le pseudo "Florent" était déjà pris, d'où le G :sol: (bon, première lettre de mon nom, effectivement :o )

Reply

Marsh Posté le 20-07-2005 à 16:32:58    

PlainsofpainG c'était pas pris, mais c'était long, alors j'ai pris plainsofpain ... :sol:


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 20-07-2005 à 16:38:05    

Tu te faches ?
 
Edit : weed qui a supprimé un message ...


Message édité par afbilou le 20-07-2005 à 16:38:45
Reply

Marsh Posté le 20-07-2005 à 16:39:45    

Arf flute je l'ai loupé :o


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 20-07-2005 à 16:41:49    

Ca ne volait pas haut.

Reply

Marsh Posté le 20-07-2005 à 16:49:10    

FlorentG a écrit :

ok, en fait, c'est display: block. Rajoute un float-left, et le tour est joué.


ou, incroyable mais vrai, ca marche. Cela confirme que tu fais partis de l'élite (cf http://forum.hardware.fr/hardwaref [...] 4099-3.htm )  
 
Quand je t'ai vu trainé sur mon topic, j'etais a peu pres sur que tu allait me trouvé la reponse ....
 
non non mes chevilles ne gonflent pas  
 
 
 
 
 

afbilou a écrit :

Tu te faches ?
 
Edit : weed qui a supprimé un message ...


 
 
vous etes tellement recatif que je n'avais pas ton autre poste, c'est à dire mettre sur la meme ligne les <a href=""><img src></a>.
J'ai essayé mais cela ne fonctionne pas.
Je prefere la solution de Florent qui est bien plus éleguante....
 
Tu t'adressé à moi : "Tu te faces" ;)

Reply

Marsh Posté le 20-07-2005 à 16:49:55    

plainsofpain a écrit :

Arf flute je l'ai loupé :o


 :kaola:  
 
il faut dégainé plus vite que son ombre

Reply

Marsh Posté le 20-07-2005 à 17:03:22    

ben désolé mais j'essaie de fournir un pseudo travail pour mon stage à coté :p


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 20-07-2005 à 17:04:19    

Tu n'as pas compris l'histoire des espaces.
C'est <a><img></a><a><img></a><a><img></a><a><img></a> qu'il faut ecrire pour que ca fonctionne. Cela dit c'est juste pour ta culture personnelle et que tu comprennes ce qu'il t'arrivait.

Reply

Marsh Posté le 20-07-2005 à 17:29:22    

justement j'essayé de le faire pour quelques images mais cela n'a pas fonctionné, j'ai pas trop insisté car je suis plutot du genre à bien aéré mon code bcp plus que d'autre....
 
 
sinon pour info, il est en fait pas necessaire de mettre block car c'est pas défaut.  
 
On m'a dit que le fait de mettre float : left peut etre une contraite pour la suite de ma page.....
 
Enfin bon j'ai du mal à maitriser le float, c'est pas tres precis leur article : http://fr.selfhtml.org/css/proprie [...] .htm#float
 
Ce n'est pas un simple allignement vers la gauche... Enfin bon

Reply

Marsh Posté le 20-07-2005 à 18:47:28    

Me suis amusé a faire un javascript qui resout le probleme :p
Bon evidemment c du javascript ... donc c pas pour tout le monde ^^;
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  3. <head>
  4. <title>Test</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  6. <style type="text/css">
  7. </style>
  8. <script type="text/javascript">
  9.  window.onload = function() {
  10.   var galerie = document.getElementById('galerie');
  11.   if (galerie)
  12.    removeBlank(galerie);
  13.  }
  14.  function removeBlank(root)
  15.  {
  16.   var items = root.childNodes;
  17.   if (items.length > 0)
  18.    for (var i=0 ; i<items.length ; i++)
  19.     removeBlank(items[i]);
  20.   else
  21.    if (root.nodeName=="#text" && root.nodeValue.match(/[ \t\n\r]+/i))
  22.     root.nodeValue = "";
  23.  }
  24. </script>
  25. </head>
  26. <body>
  27. <div id="galerie">
  28.  <a href="#">
  29.   <img src="test.jpg" alt="" />
  30.  </a>
  31.  <a href="#">
  32.   <img src="test.jpg" alt="" />
  33.  </a>
  34.  <a href="#">
  35.   <img src="test.jpg" alt="" />
  36.  </a>
  37.  <a href="#">
  38.   <img src="test.jpg" alt="" />
  39.  </a>
  40.  <a href="#">
  41.   <img src="test.jpg" alt="" />
  42.  </a>
  43. </div>
  44. </body>
  45. </html>

Reply

Marsh Posté le 20-07-2005 à 18:50:07    

Le script supprime les espace inutiles introduit par les retours a la ligne et compagnie dans le conteneur ayant l'id "galerie" :)
Ce conteneur pouvant etre une liste dans le cas d'une galerie d'images par exemple ... un div dans mon exemple car la sémantique n'avait pas d'importance.
Bref le script ne sert a rien ... c'est purement didactique :p


Message édité par afbilou le 20-07-2005 à 20:24:46
Reply

Marsh Posté le 20-07-2005 à 21:11:30    

FlorentG a écrit :

ok, en fait, c'est display: block. Rajoute un float-left, et le tour est joué.


Au moment de lire que FlorentG "a vu la solution l'autre jour", j'avais trouvé la solution ci-dessus, et je me suis dit "bah merde pourquoi il trouve pas le FlorentG, quelle subtilité je maitrise pas ?"  :??:  :sweat:  
 
Et en fait j'étais plus rapide que FlorentG  :bounce:  :bounce:  :bounce:  
FlorentG mon mentor, l'élève veut égaler le maître  :p  :na:  
(d'ailleurs FlorentG c'est le frère de TKG  :kaola: )

Reply

Marsh Posté le 21-07-2005 à 02:15:17    

malheuresement y a encore des personnes en 800*600 et lorsque je affiche avec cette résolution, ma série de 5 photo s'affiche non plus sur une ligne mais sur 2.  
Comment puis je forcer que ca soit sur une seule ligne et pouvoir scroller à l'horyzontal.
 
 

Reply

Marsh Posté le 21-07-2005 à 10:29:21    

Laisse les deux lignes. Le scroll horizontal est un peu relou :/

Reply

Marsh Posté le 21-07-2005 à 10:29:57    

skyh_ead a écrit :

Et en fait j'étais plus rapide que FlorentG  :bounce:  :bounce:  :bounce:


blablablafatiguéblablablalendemain de fêteblablablacouché tardblablablacerveau pas branchéblablabla :D

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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