En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Forum » En vrac ! » Positionnement des images avec les Hover effects
 
 
 
    Imprimer la page...
    Imprimer la section...

Forum - En vrac ! - Positionnement des images avec les Hover effects


Nombre de membres 56 membres
Connectés : ( personne )
Snif !!!
 


le 22/06/2019 @ 12:59
par Aramise

Aramise

1 message

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

Site web Aramise
sujet clos Haut  

Réponse n° 1
--------
le 22/06/2019 @ 14:16
par JeanDenis

JeanDenis

Administrateur
183 messages

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,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 2
--------
le 23/06/2019 @ 12:41
par Aramise

Aramise

2 messages

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 !

Site web Aramise
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 3
--------
le 23/06/2019 @ 13:21
par JeanDenis

JeanDenis

Administrateur
184 messages

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,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 4
--------
le 23/06/2019 @ 13:55
par Aramise

Aramise

3 messages

Ah oui, c'est bien mieux ainsi ! merci

Site web Aramise
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
actif sujet actif   clos sujet clos   Important! Important!   Nouveau Nouveau message
Rectifier Rectifier message   Clôturer Clôturer sujet   Remonter Remonter  
Catégories de discussion  Forum