"Grille" d'images sans espaces entre les lignes ni les colo

Bonsoir,

Je souhaite creer une mosaique d'images sur un site xhtml+css. J'entends par mosaique: un genre de grille/matrice d'images rectangles toutes de meme taille. Le probleme est que je souhaite ne pas avoir d'espaces, ni entre les lignes, ni entre les colonnes. Et je n'y arrive pas! Je viens donc vous demander de l'aide.

Mon code ressemble a ca (tout simplement):

<div id="mosaique">
<img src="img1.jpg" alt="youpi"  height="38" width="50"/>
<img src="img2.jpg" alt="youpi"  height="38" width="50"/>
<br/>
<img src="img4.jpg" alt="youpi"  height="38" width="50"/>
<img src="img5.jpg" alt="youpi"  height="38" width="50"/>
</div>

J'aimerai le faire en css. J'ai donc essaye comme ci dessous:

.mosaique img{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}

mais cela ne change rien, j'ai toujours un espace entre chaque image, sur les lignes et les colonnes.

Si je change mon code pour:

<img src="img1.jpg" alt="youpi"  height="38" width="50"/><img src="img2.jpg" alt="youpi"  height="38" width="50"/>
<br/>
<img src="img4.jpg" alt="youpi"  height="38" width="50"/><img src="img5.jpg" alt="youpi"  height="38" width="50"/>

les photos sur une meme ligne sont bien collees, plus d'espace. Mais cela ne resoud pas mon probleme sur les colonnes. Et vu que j'ai bien plus de 2 images sur chaque ligne, c'est un peu pénible comme solution.

Remarquez, j'ai aussi essaye avec une TABLE, mais je n'y arrive pas non plus, j'ai toujours un espace entre 2 lignes (mais plus entre les colonnes), meme en mettant

border="0" cellspacing="0" CELLPADDING="0"

.
Mais bon, ca doit bien etre possible avec juste la css, sans table, je ne sais juste pas comment... est ce que vous avez une idee??

Merci beaucoup pour votre aide
DameLaine
Modifié par DameLaine (25 Mar 2009 - 19:42)

Hello,

en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Bonne continuation

Bonjour et rebienvenue,

1er cas (div): il y a un espace entre tes deux images présentes sur la même ligne car une série d'espaces, de retours-chariot et de tabulation = un(e) espace à l'affichage. Il faut donc que tu colles la fin du 1er élément au début du 2ème:

<img src="" alt="" /><img src="" alt="" />

2ème cas (table): affiche les bordures:

td { border: 1px solid blue; }

et tu verras que les cellules sont par défaut isolées les unes des autres (pas "fusionnées" si tu veux). Pour cela, il faut utiliser en CSS l'instruction border-collapse

table { border-collapse: collapse; }

L'espace dû au <br /> peut être résolu en n'en mettant pas.

Par exemple :

<div id="mosaique">
<img src="img1.jpg" alt="youpi"  height="38" width="50"/><img src="img2.jpg" alt="youpi"  height="38" width="50"/><img src="img4.jpg" alt="youpi"  height="38" width="50"/><img src="img5.jpg" alt="youpi"  height="38" width="50"/>
</div>

#mosaique{
width:100px; /* la taille de tes images multiplié par le nombre d'images voulues sur une ligne */
}
#mosaique img{
margin:0;
padding:0;
border:0; /*si tu compte ajouter un lien */
}

Dans ton code CSS tu avais d'ailleurs fait une erreur :

.mosaique img{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}

Ceci cible les élément "img" présent dans la class="mosaique" et non dans l'id="mosaique".

Bonjour a tous,

Merci Felipe et Laurie-Anne pour votre aide.
En appliquant vos conseils, j'arrive a supprimer les espaces entre les colonnes, mais toujours pas entre les lignes.

En rajoutant cet ingrédient a vos conseils:
http://www.alsacreations.com/astuce/lire/52-espaces-indsirables-sous-les-images.html

Je m'en sors avec la TABLE!

Voici la CSS:

#mosaique{}
#mosaique img{ vertical-align: bottom;}

et le code

<div id="mosaique">
<table width="70%" cellspacing="0" CELLPADDING="0">
  <TR>
    <TD><img src="img1.jpg" alt="youpi"  height="38" width="50"/></TD>
    <TD><img src="img2.jpg" alt="youpi"  height="38" width="50"/></TD>
  </TR>
  <TR>
    <TD><img src="img3.jpg" alt="youpi"  height="38" width="50"/></TD>
    <TD><img src="img4.jpg" alt="youpi"  height="38" width="50"/></TD>
  </TR>
</TABLE>

Si quelqu'un a une idee pour faire cela sans TABLE, je suis toujours preneuse

Merci beaucoup,
DameLaine

Hello,

Pour les espaces horizontaux entre les images, voir aussi l'article suivant qui explique en détail le pourquoi du comment:
http://www.alsacreations.com/article/lire/626-impact-rendu-indentation-code.html

Pour les espaces verticaux entre les lignes, l'astuce que tu as suivi commence ainsi:

a écrit :
Lorsqu'une image est placée dans une div dotée d'une bordure, ou dans une cellule de tableau, ou dans tout autre conteneur de type bloc, on peut voir apparaitre un espace de quelques pixels sous l'image.

Tu remarqueras qu'elle ne dit pas qu'il faut utiliser un tableau pour régler le problème! Les solutions proposées sont en réalité applicables à diverses situations, et tu aurais pu partir de ton code de départ pour appliquer l'une ou l'autre de ces solutions.

Je te laisse appliquer ça sans tableau si tu le souhaites. Si tu utilises la solution du display:block sur les images, le problème que tu rencontreras sera que toutes les images passeront à la ligne. Il faudra peut-être utiliser du display:inline-block à la place, ou simplement faire flotter les images (float:left).

Par contre je me pose la question suivante: c'est quoi ce bazar? D'après ton code HTML, ton contenu signifie "youpi youpi youpi youpi" (c'est le texte alternatif des images), et ça m'a l'air assez peu pertinent. S'agit-il des vignettes d'une galerie d'images, de liens de navigation, d'une simple décoration?

Le statut de ces contenus devrait dicter (en bonne partie) le code HTML utilisé. Pas le rendu graphique souhaité.