28172 sujets

CSS et mise en forme, CSS3

Plusieurs image dans une div, parametre top non fonctionnel

Bonjour , je cherche à mettre dans une div plusieurs images, cette div est en position relative et les images en absolute tous mes paramètres sont fonctionnels sauf pour le paramètre "top" qui ne fait aucun effet.

#schema{
position : relative;
}

#image{
position : absolute ;
top : 25 %;
width : 15 %;
left : 45 ;
}

#image2{
position : absolute ;
top : 5 %;
width : 25%;
left : 55%;
}

#image3{
position : absolute ;
top : 35 %;
width : 30%;
left : 75;
}

Si vous avez une solution pour cela
Merci de votre retour !
Modifié par kangting (25 Jun 2019 - 09:44)
Modérateur
Ola,

il ne faut pas d'espace entre la valeur et l'unité.
top : 35 %; /* No */
top : 35%; /* Yes */

Modifié par _laurent (25 Jun 2019 - 09:52)
J'ai retiré les espaces mais aucun effet pour le top, je peux toujours les déplacer horizontalement avec "left" ou regler la taille avec "width" mais le top n'affecte rien, ça me rend fou, je sens que c'est un truc stupide. Car si je retire la position relative à la div "schema" le paramètre top fonctionne.
Je connaissais pas trop ce site, mais voilà l'url avec les codes
https://jsfiddle.net/zrth3904/11/

Ne faites pas attention dans le html aux affichages de la date et de l'heure, j'ai retiré le script n'étant pas utile pour le moment.
Modifié par kangting (25 Jun 2019 - 11:02)
Bonjour,

le souci c'est que la div parent n'a pas de hauteur. Lorsque tu positionnes un élément en absolute, celui-ci est sorti du flux et donc n’influencera pas la taille de la div parent.

Donc il faut soit laisser une des images avec un positionnement par défaut (si le but est de superposer des éléments sur une des images) soit préciser une hauteur à la div parent.

PS: tu devrais utiliser des classes plutôt que des id. Les id doivent être unique donc ça peut poser des problèmes.
Modifié par bacasable (25 Jun 2019 - 11:21)
upload/1561456098-76141-capturedancran.png En effet, j'ai donc mis une des images en positionnement par défaut et c'est donc fonctionnel, je comprends mieux le souci, je te remercie beaucoup.

Sinon, en ayant ma div comme relative je n'arrive pas à mettre ma div de texte sur le côté gauche et mes images sur le côté droit. Il respecte la structure html de façon linéaire. A moins peut être de mettre mon texte dans la div des images et redécaler après mais étant donné que le texte sera remis à jour x fois, ça obligerait à rafraîchir les images aussi
Modifié par kangting (25 Jun 2019 - 11:48)
Administrateur
Bonjour,

pour placer côte à côte 2 blocs, le plus simple est d'utiliser Flexbox. Il faut un élément parent ayant display: flex ce qui fait de ses enfants directs des flex items (ne concerne pas les descendants de ces enfants, le code HTML peut ne pas convenir dès le départ ce qui est assez ennuyeux…).
Ensuite on s'arrange pour que chaque bloc ne fasse pas 100% de la largeur et on peut jouer sur l'alignement dans les 2 axes, la répartition de l'espace en trop, de qui doit se réduire en largeur ou pas, etc

Il y a aussi Grid layout plus adapté mais plus complexe à mettre en œuvre au tout début AMHA.

Si on veut faire "couler" le texte autour d'une image, faire float-er l'image reste d'actualité mais l'inconvénient est que l'image sort du flux et que tout le reste devient plus compliqué… Vieille méthode
Bonjour,

Je rejoins l'idée du Flexbox. Je modifié tout mon site et ai utilisé cette méthode sur tout mon css. Il y a beaucoup de site qui parle de cette méthode. Cerise sur le gâteau, le responsive fut plus facile ensuite à "installer".
Sujet clos
Aller à