Forum - En vrac ! - Positionnement des images avec les Hover effects
le 22/06/2019 @ 12:59
par Aramise
J'ai commencé à tester la mise en oeuvre des exemples décrits dans les Hover Effects dans l'idée de refondre notre page d'accueil
Je précise que je ne suis pas un pro, mais grâce à la qualité du tuto (bravo !), j'arrive à peu près à faire ce que j'imagine.
Il me reste néanmoins un souci de positionnement des images que je n'arrive pas à caler correctement ... mon idée étant un alignement par 3 en horizontal
la page est visible ici :
merci d'avance
--------
le 22/06/2019 @ 14:16
par JeanDenis
Administrateur
Bonjour,
Je suis content que tu te sois inspiré des tutoriels de ce site...
Pour commencer, sache que le dispositif n'est pas vraiment "responsive" : les images, dans ton cas de 350px, s'afficheront ainsi...
350px, est correct, y compris pour les smartphones, donc pas de soucis...
La règle à connaitre (voir le tutoriel), est pour l'enchainement des images sur une même ligne :
<div style="display: inline-block;"> ... le code correspondant à ce que tu souhaites ... </div>
si tu ne mets que cela (et cela peut largement suffire...) les images vont s'enchainer et, évidemment, si la taille d'affichage est insuffisante, les images sont automatiquement reportées au dessous.
Cela peut tout à fait te convenir... fais un test en ne plaçant que cela.
Par contre, si tu veux "forcer" le retour à la ligne après une image, il te faut placer cette règle après le code de l'image.
<div style="clear:both;"></div>
Donc, en bonne logique, si tu voulais 3 images de front, il te faudrait placer cette règle toutes les 3 images... Hélas ! si la taille d'affichage est insufisante, tu auras, en colonne: 2 images, puis 1, puis 2 images, puis 1, ...
Regarde le tutoriel en diminuant l'affichage du navigateur...
Reviens vers ce forum au cas ou...
Cordialement,
--------
le 23/06/2019 @ 12:41
par Aramise
Merci Jean-Denis pour ta rapidité à répondre.
Je viens de m'y remettre en suivant tes conseils
En mettant 3 fois ton code de base, j'ai bien l'alignement souhaité.
J'en ai donc conclu que le pb venait de la personnalisation que j'avais introduit pour mes images .
et j'ai retrouvé des "clear:both;" qui trainaient dans ce code : en les supprimant, tout est rentré dans l'ordre
Grand merci !
--------
le 23/06/2019 @ 13:21
par JeanDenis
Administrateur
Bonjour,
Eh bien... tant mieux !
En regardant ton essai, je m'aperçois que pour quelques images, la couleur de fond des paragraphes survolés n'est pas très esthétique...
Essaie de transformer la règle .view-first:hover p ainsi
.view-first:hover p { background: transparent; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s; /* délai transition paragraphe survolé + préfixes*/ }
si cela ne te convient pas, évidemment, tu supprimes la ligne du background...
Cordialement,
Rectifier message Clôturer sujet Remonter