Connexion à votre interface Wifeo
X
Nom d'utilisateur :
Mot de passe :


Mot de passe oublié ?

Pas encore inscrit ? Créez votre site gratuitement !
Connexion
 FERMER LE MENU


Menu du forum :

Accueil du forum

Derniers messages

S'inscrire au forum

Se connecter au forum

Mot de passe oublié

Menu général de Wifeo :

Accueil de Wifeo

Connexion

Créer un site

Nouveautés Wifeo

Blog

Forum

Boite à outils

Documentations

Mise en page de vos pages > Décalage d'image dans tableau

Connectez-vous au forum     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite

Décalage d'image dans tableau

Répondre
La question
Posté le 4 Juin 2018 à 14:52
canvas

483 messages
Inscrit le 17/1/2008
Bonjour,

J'ai effectué plusieurs modifications sur mon site et notamment sur mon tableau (il s'agit des 9images en début de site).
Néanmoins, deux erreurs subsistent et je ne parviens pas à les régler...

- Le 1er problème vient du fait qu'il y ait un espace blanc entre chaque ligne de mon tableau. Mon tableau comporte 9 images insérées dans des carrés de tailles identiques. Néanmoins, un espace vient s'intégrer horizontalement entre chacune de mes lignes et je ne comprends pas pourquoi.

-Le 2ème problème vient de la dernière ligne de ce même tableau. Effectivement, les 2images latérales sont plus hautes que l'image centrale et impossible de les modifier. Pour info, sur ces 2 images latérales j'utilise un effet en css. Le problème vient sûrement du code. Je ne comprends pas ce que je dois ajouter afin d'aligner ces images et ce quel que soit le support (ordinateur, tablette...)

Juste au cas où; je vous transmets mon code css:
   SCRIPT
figure.effect-romeo h2 {font-size:20px; }

figure.effect-romeo {position: relative;font-size: 18px; font-family: 'Raleway', sans-serif; width: 338px; height: 338px; Text-align: center;color: #000; margin: 0; }

figure.effect-romeo img{width: 338px; height: 338px;-webkit-transitionpacity .35s,-webkit-transform .35s;transitionpacity .35s,transform .35s;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}

figure.effect-romeo:hover img{width: 350px; height: 350px;opacity:.6;-webkit-transform:scale3d(1,1,1);transform:translate3d(1,1,1)}

figure.effect-romeo figcaption::before,figure.effect-romeo figcaption::after{position:absolute;top:48%;left:50%;width:80%;height:1px;background:#000;content:'';-webkit-transitionpacity .35s,-webkit-transform .35s;transitionpacity .35s,transform .35s;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}

figure.effect-romeo:hover figcaption::before{opacity:.5;-webkit-transform:translate3d(-50%,-50%,0) rotate(45deg);transform:translate3d(-50%,-50%,0) rotate(45deg)}

figure.effect-romeo:hover figcaption::after{opacity:.5;-webkit-transform:translate3d(-50%,-50%,0) rotate(-45deg);transform:translate3d(-50%,-50%,0) rotate(-45deg)}

figure.effect-romeo h2,figure.effect-romeo p{position:absolute;top:45%;left:0;width:100%;-webkit-transition:-webkit-transform .35s;transition:transform .35s}

figure.effect-romeo h2{-webkit-transform:translate3d(0,-50%,0) translate3d(0,-150%,0);transform:translate3d(0,-50%,0) translate3d(0,-150%,0)}

figure.effect-romeo p{-webkit-transform:translate3d(0,-50%,0)
translate3d(0,50%,0);transform:translate3d(0,-60%,0) translate3d(0,60%,0)}}

figure.effect-romeo:hover h2{-webkit-transform:translate3d(0,-50%,0) translate3d(0,-100%,0);transform:translate3d(0,-50%,0) translate3d(0,-100%,0)}

figure.effect-romeo:hover p{-webkit-transform:translate3d(0,-100%,0) translate3d(0,120%,0);transform:translate3d(0,-100%,0) translate3d(0,120%,0)}


Un grand merci à toute personne qui voudra bien m'aider

Canvas

Voir mon site

 
Navigateur utilisé : Firefox

 
Posté le 5 Juin 2018 à 9:09
ref.

23 messages
Inscrit le 24/5/2011
Mon site
Bonjour,

Peut-être des modifications ont-elles été faites depuis, mais je ne vois ni espace entre les lignes, ni dimensions différentes pour les photos de la dernière ligne...

Bonne journée
merci

 
Navigateur utilisé : Chrome

 
Posté le 14 Juin 2018 à 11:26
canvas

483 messages
Inscrit le 17/1/2008
Bonjour,

Effectivement il y a eu quelques modifications et le rendu est beaucoup mieux.
Ceci étant, le problème subsistant est que lorsque je visualise ce tableau sur ma tablette en format portrait, tout est décalé à partir de la 2eme ligne, alors qu'en format paysage, le tableau est parfait!
Comment expliquer cela et comment faire en sorte qu'il s'adapte?

Merci de votre aide

canvas

 
Navigateur utilisé : Firefox

 
Poster une nouvelle réponse
Connectez-vous au forum pour pouvoir répondre     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite
Nous soutenons : Secours Populaire . Enfants du desert . Medecins Sans Frontieres
Copyright © Wifeo.com - Tous droits réservés BOURDET SARL R.C.S.503777286 VERSAILLES