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 52 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
Poster une réponse 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
Poster une réponse 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
Poster une réponse 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
Poster une réponse 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
Poster une réponse 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