Alignement de plusieur images
Résolu
Pilou_le_picard
Messages postés
372
Date d'inscription
Statut
Membre
Dernière intervention
-
Pilou_le_picard Messages postés 372 Date d'inscription Statut Membre Dernière intervention -
Pilou_le_picard Messages postés 372 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je rencontre un problème avec mon CSS.
.add {
position: absolute;
display: block;
left: 10px;
top: 136px;
float: left;
}
Voilà, l'idée est de mettre à la suite des images. Je veux que ces images soient à un endroit précis sur la verticale (top: 136px).
Mais je veux bien evidemment qu'elle soit espacée (d'où le float:left)
Dans ce cas présent, elle se mettent bien sur la verticale, mais ne s'espace pas (elle sont toute au même endroit). Mais si je mets, par exemple (width:90px), en oubliant volontairement le point-virgule, là les images se mettent l'une à la suite de l'autre, mais ne sont pas bien placé à la verticale.
Je suis pas encore pro au language CSS, aider de vos lumière s'il vous plait.
Merci
Je rencontre un problème avec mon CSS.
.add {
position: absolute;
display: block;
left: 10px;
top: 136px;
float: left;
}
Voilà, l'idée est de mettre à la suite des images. Je veux que ces images soient à un endroit précis sur la verticale (top: 136px).
Mais je veux bien evidemment qu'elle soit espacée (d'où le float:left)
Dans ce cas présent, elle se mettent bien sur la verticale, mais ne s'espace pas (elle sont toute au même endroit). Mais si je mets, par exemple (width:90px), en oubliant volontairement le point-virgule, là les images se mettent l'une à la suite de l'autre, mais ne sont pas bien placé à la verticale.
Je suis pas encore pro au language CSS, aider de vos lumière s'il vous plait.
Merci
A voir également:
- Alignement de plusieur images
- Des images - Guide
- Extraire images pdf - Guide
- Recherche images - Guide
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
- 4 images 1 mot niveau 10 chaperon rouge ✓ - Forum Jeux vidéo
2 réponses
le float left ne sert pas à les espacer, mais au contraire de les coller les uns après les autres
il te faut sans doute ajouter un margin-left:20px; par exemple
il te faut sans doute ajouter un margin-left:20px; par exemple
essaie un truc plutot comme ca :
<style type="text/css">
ul.add {
position: absolute;
display: block;
left: 10px;
top: 136px;
}
ul.add li{
float: left;
margin-left:20px;
}
</style>
<ul class="add">
<li><img src="img/icon/fb.png" /></li>
<li><img src="img/icon/tw.png" /></li>
<li><img src="img/icon/g+.png" /></li>
</ul>
<style type="text/css">
ul.add {
position: absolute;
display: block;
left: 10px;
top: 136px;
}
ul.add li{
float: left;
margin-left:20px;
}
</style>
<ul class="add">
<li><img src="img/icon/fb.png" /></li>
<li><img src="img/icon/tw.png" /></li>
<li><img src="img/icon/g+.png" /></li>
</ul>
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.
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
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.
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...
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...
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 ?