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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Coller des images, vspace="0" n'est pas suffisant

weed

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

Publicité

FlorentG

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

afbilou

pouet your life

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

weed

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

plainsofpain

Pingouino's lover

Code :

a img
{
margin:0;
padding:0;
}

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

FlorentG

display: inline, ou block, un des deux

afbilou

pouet your life

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

weed

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

FlorentG

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

plainsofpain

Pingouino's lover

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

Publicité

FlorentG

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

afbilou

pouet your life

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 :

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

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

afbilou

pouet your life

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 :

<im /><im /><im /><im />

plainsofpain

Pingouino's lover

(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

afbilou

pouet your life

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

FlorentG

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 )

plainsofpain

Pingouino's lover

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

afbilou

pouet your life

Tu te faches ?

Edit : weed qui a supprimé un message ...

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

plainsofpain

Pingouino's lover

Arf flute je l'ai loupé

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

afbilou

pouet your life

Ca ne volait pas haut.

weed

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"

weed

plainsofpain a écrit :

Arf flute je l'ai loupé

:kaola:

il faut dégainé plus vite que son ombre

plainsofpain

Pingouino's lover

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

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

afbilou

pouet your life

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.

weed

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

afbilou

pouet your life

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

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function() {
var galerie = document.getElementById('galerie');
if (galerie)
removeBlank(galerie);
}
function removeBlank(root)
{
var items = root.childNodes;
if (items.length > 0)
for (var i=0 ; i<items.length ; i++)
removeBlank(items[i]);
else
if (root.nodeName=="#text" && root.nodeValue.match(/[ \t\n\r]+/i))
root.nodeValue = "";
}
</script>
</head>
<body>
<div id="galerie">
<a href="#">
<img src="test.jpg" alt="" />
</a>
<a href="#">
<img src="test.jpg" alt="" />
</a>
<a href="#">
<img src="test.jpg" alt="" />
</a>
<a href="#">
<img src="test.jpg" alt="" />
</a>
<a href="#">
<img src="test.jpg" alt="" />
</a>
</div>
</body>
</html>

afbilou

pouet your life

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

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

skyh_ead

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:
FlorentG mon mentor, l'élève veut égaler le maître :na:
(d'ailleurs FlorentG c'est le frère de TKG :kaola: )

weed

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.

FlorentG

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

FlorentG

skyh_ead a écrit :

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

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

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
[Java - JLabel] Affichage d'images	bordures en images
contour bleu autour des images , pourquoi ?	Bibliothèque traitement d'images
Php, les images et les polices....	convertir des images bmp en bmx(format texture xbox)
images+redimention	[CSS] Faire coller un texte a un contour
ResourceManager: images en ressources incorporées	Preloader d'images !
Plus de sujets relatifs à : Coller des images, vspace="0" n'est pas suffisant

Page générée en 0.060 secondes