Alignement de plusieur images

Merci pour ta réponse Waelb83 et merci pour cette précision.
Mais malheureusement mon problème n'est pas résolu, les images en question reste toute sur le même axe verticale.

Elles ne s'alignent pas.

Voici comment je procède. Je dois faire une erreur quelque part, c'est certains.

.add {
margin-left:20px;
position: absolute;
display: block;
left: 10px;
top: 136px;
float: left;
}


<div ><img class="add" src="img/icon/fb.png" /></div>
<div ><img class="add" src="img/icon/tw.png" /></div>
<div ><img class="add" src="img/icon/g+.png" /></div>
<div><img class="add" src="img/icon/ptr.png" /></div>
<div><img class="add" src="img/icon/tmb.png" /></div>
<div><img class="add" src="img/icon/fkr.png" /></div>
<div><img class="add" src="img/icon/ld.png" /></div>
<div><img class="add" src="img/icon/dva.png" /></div>
<div><img class="add" src="img/icon/cloud.png" /></div>
<div><img class="add" src="img/icon/yt.png" /></div>
<div><img class="add" src="img/icon/add.png" /></div>
<div ><img class="add" src="img/icon/rss.png" /></div>



Je ne sais pas si le class="add" est bien placé.
Ne peut-on pas placer un left=70px quelque part, pour chaque image ?

Merci, ça fonctionne impeccablement !

J'ai juste ajouté dans ul.add li{ un color:black; pour cacher des petits points qui se mettaient à l'origine de l'image (20px).


Sans vouloir abuser de ta gentillesse, saurais-tu comment je dois m'y prendre pour que tout ceci ne bouge pas lorsqu'une personne zoom ou réduit la résolution de son navigateur. Et si je peux le coupler avec une méthode pour centrer sur la page ?

Merci encore.

pour virer les points noir, il faut mettre un list-style: none; dans le style du LI

pour centrer sur la page, il faut remplacer le absolute, le left, et le top par un margin:auto;
pour les résolutions, c'est pas possible
car pour schématiser si tu zoom X2, tous les éléments de ta page seront X2 genre ton left:10px sera un left:20px

Salut,

Pour cacher les puces de la liste, tu peux utiliser la propriété css suivante :

ul.add li { list-style-type: none; }

Pour centrer ta liste, une solution simple est d'utiliser la propriété margin, avec ta liste en position relative :

ul.add {
position: relative;
display: block;
margin-top: 136px;
margin-left: auto;
margin-right: auto;
}

Enfin il ne me semble pas qu'il soit possible de contrôler l'affichage si le visiteur utilise le zoom du navigateur. Le zoom du navigateur est différent de la résolution de l'écran.
Si tu veux adapter l'affichage en fonction de la résolution, tu peux par exemple utiliser des valeurs en pourcentage pour définir les dimensions de tes éléments.

Merci à vous deux pour l'astuce du list-style: none; ça marche très bien et au moins c'est fait dans les règles.

Par contre, j'avais effectivement penser au margin (les cours de CCM en parle bien), mais je pensais plutot le mettre avec l'intégralité du body.

Car dans le cas présent, seul la liste d'image sera en margin: auto; , Hors j'aimerais que l'intégralité du body reste tel qu'il est mais soit au centre, de sorte à ce que l'orsqu'on dézoom, le body reste au centre verticale de la page.

Si vous ne comprenez pas, c'est de ma faute, j'ai pas les mots encore...

J'ai finalement trouvé.

J'ai simplement ajouté width: 1300px; et margin: auto; à body {

Et ainsi même, lorsque la résolution change, tout reste en place. Rien ne bouge. Donc c'est ce qu'il me manquait.

Merci à vous deux.