Alignement d'images avec cases à cocher incorporées. html ou css ?

**nico le noob** · 15/05/2011, 20h27

Bonjour tout le monde

Ca fait un bail que j'avais pas mis la tête dans les codes et là je "galere" pas mal sur un problème de CCS/HTML ?? (bha oui, c'est pas si simple ^^)

Je sais que c'ets mal vu de mettre un lien direct mais sans le lien c'est pas evident de se faire une idée alors voilà le lien: http://www.agents-co.fr/test/index.php

Voyez les dégâts ! :s Le but étant évidement d'avoir mes images alignées à l’horizontale et avec la case à cocher insérer comme la première

J'avais déjà réussi ce système en bien plus poussé mais pas en horizontal, si quelqu'un avait la soluce (qui doit être un peu complexe), j'suis preneur !!!

Merci à tout ceux qui se pencheront sur le problème

**Fluid-Val** · 15/05/2011, 21h25

Bonjour,

Dans un premier temps, il faudrait remplacer tes span par des balises block comme div ou li (un peu plus propre à mes yeux mais question de point de vu).

Puis mettre un float:left à chaque container d'images afin de les aligner horizontalement.

Ca donnerait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div class="image">
<input type="checbox" name="image_12" />
<label for="image_12">
<img src="url_image.jpg" />
</label>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.image
{
float:left;
}

Puis, pour limiter le nombre d'images par ligne, il faut modifier la largeur de ton container.

J'espère avoir répondu à ta question ...

**nico le noob** · 15/05/2011, 22h36

Salut Fluid,
Merci de ta participation mais le résultat n’est pas là

Pour avoir un meilleur aperçu je met le zip, histoire de faire un test pour ceux qui veulent, c'est quand même plus simple comme ça

http://dl.free.fr/lUcEB5Qhh
Merci

**Fluid-Val** · 15/05/2011, 22h47

Ton problème d'alignement est dû à tes <br />.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
foreach($fichier as $lien) 
			{                            
			echo "<div class=\"photo_size\"><input type=\"checkbox\" name=\"box[]\" value=\"$lien\" id=\"$lien\" /><label class=\"lab_photo\" for=\"$lien\"><img src=\"images/min/$lien\"/></label></div>\n";
			}