Espace indésirable entre image (RESOLU)

Bonsoir
J'ai cherché la réponse à mon cas dans la FAQ et dans le forum mais je ne trouve pas.
Alors si vous pouvez m'indiquer un lien où se problème est expliqué, cela m'arrangerait ! Je découvre les CSS.
Voilà:
je souhaite disposer des images côte à côte en utilisant des float et des div. j'y arrive mais j'ai toujours un espace entre chaque image surtout sur la droite et je ne comprends pas pourquoi cet espace persiste. J'ai tout essayé: des margins, paddings et borders à 0 dans les div, les img etc...
Quand une image passe en dessous, elle se "colle" bien à celle du dessus mais il reste toujours un espace sur la droite des images.
Merci de votre aide
Sellig
Modifié par sellig60 (20 Feb 2007 - 20:46)

Bonsoir & bienvenue, sellig60.

La première chose à faire pour obtenir de l'aide de la part des membres du forum, c'est de modifier le titre de ton sujet pour qu'il donne une indication sur la nature du problème que tu rencontres. Par exemple "Espace entre images en float", ou "Marges indésirables à droite de mes images". Tu peux éditer ton premier message pour changer le titre du sujet.

La seconde opération consistera à fournir des précisions: quel code as-tu utilisé, as-tu une page en ligne où on peut constater le problème, avec quel navigateur cela se produit, etc ...

Salut sellig60

a écrit :

je souhaite disposer des images côte à côte en utilisant des float et des div

Non...

Ce que tu souhaites c'est disposer des images côte à côte point final.

Donc un ptit bout de code html pour savoir de quoi tu pars ce serait bien

Bon sinon le problème vient sans doute de la façon dont sont déclarées tes images dans le code source html.

Essayes avec les balises sur la même ligne sans espace pour voir.

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

Florent V t'en dira plus si il passe dans le secteur


Et à part ça comme tu es un ptit nouveau ben bienvenue sur ce forum

Tu vas voir c'est l'éclate

Réponses rapides! Whaou!!! Merci.
En fait depuis que j'ai découvert les CSS, j'essaie de voir comment on peut changer le code pour afficher des images sans tableau. Ce n'est donc pas pour utiliser sur un site (du moins pas encore). C'est pus pour apprendre et comprendre. Voici un extrait du code:

<div  id=bandeau_top_droit >
      <img src="../ldc2007/images/ban_ais60_1x3.jpg" alt="ban_ais60_1x3.jpg, 21 kB" title="ban_ais60_1x3" height="101" width="306">
      <img src="../ldc2007/images/ban_ais60_2x1.jpg" alt="ban_ais60_2x1.jpg, 1 kB" title="ban_ais60_2x1" height="64" width="48">
      <img src="../ldc2007/images/ban_ais60_2x2.jpg" alt="ban_ais60_2x2.jpg, 3 kB" title="ban_ais60_2x2" height="64" width="55">
      <img src="../ldc2007/images/ban_ais60_2x3.jpg" alt="ban_ais60_2x3.jpg, 8 kB" title="ban_ais60_2x3" height="64" width="203">
    </div>

Ce code est créé avec PSPad. Avec ce code j'ai mes images qui se mettent en ligne avec un espace entre chaque. Si dans mon fichier css, je fixe le width à la valeur de la première image (306 pixels), les 3 autres images se placent en dessous mais la quatrième image "glisse" encore plus bas. Si je mets un width à 350px, alors la quatrième image "remonte d'un cran mais j'ai toujours ce d'espace qui persiste. J'ai mis des arrières plan colorés pour voir: je vois la couleur entre chaque image. J'utilise firefox et l'extension web developper. J'ai pas trouvé.
Demain soir (pas avant) je mettrais en ligne la page pour que vous puissiez mieux vous rendre compte car là c'est dodo.
A demain
Sellig

Salut,
j'ai l'impression que tu n'as pas bien lu les conseils de Christians sur la
diposition des images dans le code...

Remarques :
Tu n'as pas besoin d'avoir des title insignifiant comme title="ban_ais60_1x3" et cet attribut est inutile dans ton cas.

et alt="ban_ais60_1x3.jpg, 21 kB" est un contre-exemple :
Si ton image apporte une information utile au contenu, alors tu dois
y mettre sa description, sinon mettre un alt="" suffit.
Cet attibut est obligatoire en HTML et XHTML strict.
Modifié par Hermann (20 Feb 2007 - 09:01)

Bonjour sellig60,

Tu as un retour à la ligne entre chaque image. Sur le navigateur, un retour à la ligne est interprété comme un espace !

Christian Le Bouler a écrit :
Florent V t'en dira plus si il passe dans le secteur

Hop, je passe dans le secteur, et je dis :

- si les images elles-mêmes sont flottantes et n'ont pas de marges ou de padding, on ne devrait pas avoir d'écarts ;
- si les images ne sont pas elles-mêmes flottantes mais simplement en affichage de type en-ligne (par défaut pour des images), les retours à la ligne dans le code source correspondent à des espaces et sont affichés sous la forme d'une espace simple. À ce sujet, voir ceci : Impact sur le rendu de la mise en forme du code HTML.

Bonjour,

Attention à ne pas supprimer des indentations de code uniquement pour obtenir l'effet visuel souhaité : elles sont en effet toujours susceptibles d'être automatiquement restaurées par un processus ultérieur. Privilégier les images flottantes.
Modifié par Laurent Denis (20 Feb 2007 - 09:11)

Bonjour
Je reviens du boulot et je vois que l'on s'est occupé de mon cas. Grand merci.
Merci à Hermann pour ses conseils. Tout ce qu'il me signale comme inutile, n'est en fait que l'utilisation de PSPad. Je me suis amusé à remplir certains champs pour comprendre comment cela se traduisait dans le code.
Merci aussi et surtout à Papillon41 et Florent V qui ont trouvé. J'ai supprimé le retour chariot et l'espace a disparu.
Au fait comment signale-t-on un post résolu?
Encore merci à tous pour votre aide.
Sellig
Modifié par sellig60 (20 Feb 2007 - 20:48)

sellig60 a écrit :
Au fait comment signale-t-on un post résolu?

Voir la FAQ du forum, par exemple (quatrième item).

Bonjour,
Je me permet de poster a la suite de ce message car j ai le meme probleme ou du moins tres similaire.
En effet comme vous pourrez le constater a cette adresse www.rosagalana.com/joomla en visionnant avec Ffox et IE, il y a un léger décalage sur ce dernier entre les images.
Je me suis baladé sur le forum et dans la Faq et j ai essayé les solutions proposées rien n'y fait...

Le code css de mes 3 conteneurs

.titlebefore{
        background-image: url(../images/before.png);
        background-repeat: no-repeat; 
        width: 14px;
        height: 30px;
        float: left;
padding: 0px;
margin: 0px;
border: 1px solid black; 
line-height: 1px 
font-size: 0.1em;
display: block;
}

.contentheading {
	
	font-size: 1em;
	font-weight: bold;
	color: #ffffff;
	text-align: left;
	height: 30px;
	background-image: url(../images/bla.png);	
        background-repeat: repeat-x;
        float: left;
        width: 300px;
padding: 0px;
margin: 0px;
border: 1px solid black; 
line-height: 1px 
font-size: 0.1em;
display: block;
}

html>body .contentheading {
        width: auto;
        min-width: 300px;
}   

.titleafter{
       background-image: url(../images/after.png);
       background-repeat: no-repeat;
       float :left;
       width: 15px;
       height: 30px;
padding: 0px;
margin: 0px;
border: 1px solid black; 
line-height: 1px 
font-size: 0.1em;
display: block;
}

Donc je m en remet a vous...(les border sont la pour mieux voir la taille des conteneurs.
Je sais ce code est bizarre (surtout le html dispo via le site) mais je travail avec joomla ki fait tout en tableau et je veux reussir a avoir un fond qui s'adapte au contenu avec un min width. (d ailleurs ce code marche bien avec la hauteur sous IE pour mon fond du contenu(en min-height) mais pas pour le fond de ces images (en min-width)
Je sais pas si c est tres clair...
Merci de votre aide en tout cas


Merci de me repondre ici http://forum.alsacreations.com/topic-4-22986-1-Espace-indesirables-entre-des-images-dans-des-conteneurs-en-float.html#copy
afin de ne pas polluer ce message
Modifié par niluge (20 Feb 2007 - 19:29)

Bonjour niluge et bienvenue sur Alsacreations,

Je t'invite à créer un nouveau sujet, même si ton problème semble, à priori, similaire à celui de ce présent topic.

En effet, il se peut que les raisons soient totalement différentes, et le sujet risque d'être difficile à suivre : qui pose une question, à qui est adressée une réponse ...

En revanche, tu peux faire un lien sur ce topic dans un nouveau sujet.



Modifié par Vero (20 Feb 2007 - 19:20)

Laurent Denis a écrit :
Bonjour,
Attention à ne pas supprimer des indentations de code uniquement pour obtenir l'effet visuel souhaité : elles sont en effet toujours susceptibles d'être automatiquement restaurées par un processus ultérieur. Privilégier les images flottantes.

En voilà peut-être un exemple : Opquast.(le menu)
Et oui même les sites de référence tombent dans le pièges
Et puis pour la lecture du code c'est pas terrible sur une ligne.
Modifié par Hermann (20 Feb 2007 - 19:24)

Il est tout à fait probable qu'un code de ce type traîne dans Opquast, entre autres horreurs . Nous avons en effet peu de temps pour travailler cet aspect, compte-tenu des temps de développements que nous privilégions (Pour ma part, cela fait longtemps que je ne suis pas intervenu sur le code HTML du front d'Opquast, pour tout dire).

Mais je ne le trouve pas dans la page que tu cites ?
Modifié par Laurent Denis (20 Feb 2007 - 19:29)

Oui en fait ce sont des <li> et non des images:

<li><a href="/bonnes-pratiques/">Bonnes pratiques</a></li>
<li><a href="/prestataires/">Prestataires</a></li>
<li><a href="/projet/">Le projet</a></li>
<li><a href="/faq/"><abbr title="FAQ - Questions fréquentes">FAQ</abbr></a></li>
<li><a href="http://fr.declarations.opquast.com/">Déclarations</a></li>
<li><a href="/mon-opquast/">Mon-Opquast</a></li>

J'ai eu à faire au même problème.
Je me souviens qu'Opquast n'avait pas ce problème d'affichage au départ
d'ou mon message précédent.

a écrit :
Nous avons en effet peu de temps pour travailler cet aspect, compte-tenu des temps de développements que nous privilégions

Oui on peut s'en douter, c'est seulement que ça fait un peu tache
sur un site au design soigné.