guppy.71site.fr - Forum - En vrac ! - Effet rollover sur mobile

clos par JeanDenis le 15/03/2017 @ 05:25

Sujet n° 19

le 15/12/2016 @ 17:33
par anne_b64

Bonjour
J'ai fait un essai d'effet rollover dans la boîte libre du haut sur ce site: ICI
Sur le site, j'obtiens l’effet attendu. Sur mon mobile, les image ne s'affichent qu'au tiers environ.
Qu'ai-je fait de travers?

Merci par avance.
Anne

Réponse n° 1
--------
le 15/12/2016 @ 19:18
par JeanDenis

Administrateur
33 messages

Bonsoir Anne,

Je ne vois pas cet effet sur la page indiquée (ni dans son code source, ni dans styleplus...), tu l'as supprimé ?

Amicalement,

Réponse n° 2
--------
le 15/12/2016 @ 19:55
par anne_b64

Bonsoir

Heu ..... non, la boîte y est! C'est quoi ce mystère?
image ici
Anne

Rectifié par anne_b64 le 15/12/2016 @ 19:58

Réponse n° 3
--------
le 15/12/2016 @ 20:58
par anne_b64

Bonsoir

Ce qui se passe:
- si je mets le source dans une nouvelle ou un article, l'affichage sur mobile est ok
- si je mets le source dans une boîte libre, l'affichage sur mobile pose problème.

Anne

Réponse n° 4
--------
le 15/12/2016 @ 22:40
par JeanDenis

Administrateur
34 messages

Re,

Oups... Je croyais que c'était dans la boite du haut... ça y est, j'ai vu...
Je regarderai plus attentivement demain... et je ferai des tests, mais c'est effectivement bizarre...

Bonne fin de soirée...
Amicalement,

Réponse n° 5
--------
le 16/12/2016 @ 07:53
par JeanDenis

Administrateur
35 messages

Bonjour Anne,

Je viens de tester en local et en ligne et je ne reproduis pas ton souci

Regarde là :
https://tests.71site.fr/ESSAI-GY50105/articles.php?lng=fr&pg=515&mnuid=363&tconfig=0
id : visiteur
mdp : motdepasse

Je laisse un accès quelques jours (le site test est en version 5.01.06).

Il y a un article et une boite libre latérale qui contiennent le même code avec deux rollovers. En affichage ordinateur et smartphone, ça passe. Évidemment le survol, avec le smartphone, il faut cliquer, mais j'ai toutes les images.

Dans ton code, tu les as mis dans un tableau, moi dans le mien, les images sont enserrées dans des div comme ci-dessous, ceci explique peut-être cela...

Code : php

<div style="margin-left:20px;">
<div id="rollover2"><img alt="agenda.png" id="second-img" src="img/Imagettes/agenda.png" /> <img alt="agenda2.png" id="first-img" src="img/Imagettes/agenda2.png" title="agenda" /></div>
</div>
<div style="margin-top:10px; clear:both;"></div>
<div style="margin-left:20px;">
<div id="rollover2"><img alt="convoc.png" id="second-img" src="img/Imagettes/convoc.png" /> <img alt="convoc2.png" id="first-img" src="img/Imagettes/convoc2.png" title="convocations" /></div>
</div>
<div style="margin-top:10px; clear:both;"></div>

Amicalement,

Réponse n° 6
--------
le 16/12/2016 @ 10:57
par anne_b64

Bonjour
Merci pour ces infos, j'ai tout refait en utilisant ton code, et voici le résultat obtenu sur mon iphone, avec plusieurs navigateurs c'est idem: capture

Est-ce un souci avec apple?

Anne

Réponse n° 7
--------
le 16/12/2016 @ 11:18
par JeanDenis

Administrateur
36 messages

Re,

Alors ça, c'est fort de café ! Ton site m'affiche des demi-images avec mon smartphone (android) et la simulation de Chrome, alors que mes tests fonctionnent...

Peux-tu copier-coller ton code source de la boite libre dans un fichier txt (avec notepad ++ par exemple et me l'envoyer par le contact du site. Pour les images je copie les deux dernières et je regarde...

Amicalement,

Réponse n° 8
--------
le 16/12/2016 @ 12:41
par anne_b64

Bonjour
C'est posté!.

Anne

Réponse n° 9
--------
le 16/12/2016 @ 14:42
par anne_b64

Bonjour
Et pour compléter mes propos, sur cet autre site: ici
En bas de site, la boîte Nos partenaires présente le même souci.

J'ai testé ces différentes boîtes sur l'ensemble de mes sites, et c'est idem.

Anne

Réponse n° 10
--------
le 16/12/2016 @ 15:44
par JeanDenis

Administrateur
37 messages

Re,

J'ai été un peu long... C'était à s'arracher les cheveux...

Ton code (même si ce n'est pas celui que j'aurai mis... -je mets le style au début du code et ensuite le corps... mais peu importe...) n'a rien à voir...

C'est dans ton (tes) fichiers mobstyle qu'il faut intervenir,
sur ton site https://bridge-oloron.fr/
on lit ligne 172 et suivantes
.tblbox,.tblboxover, .box, .box a {
font-size: 1em;
padding:.2em .2em 1em;
}

remplace la valeur en rouge par 0

Je ne pense pas que cela ait d'incidence par ailleurs sur l'affichage smartphone (en tout cas, sur mes skins, je n'ai pas ces valeurs...)

Teste et tiens-moi au courant...

Amicalement,

Réponse n° 11
--------
le 16/12/2016 @ 17:46
par anne_b64

Bonsoir

Testé, approuvé, ça fonctionne.

J'ai fait cette modif sur 2 sites où le problème était présent (2 skins Papinou), et c'est réglé.
Par contre, sur le site avec la skn5_guppy2015, je ne trouve pas ces lignes.

J'ai ceci:

Code : css

#BottomBoxes .titrebox, #BottomBoxes .titre {
 margin:1em 0;
 padding:1em .5em;
 border:none;
}
#BottomBoxes .tblbox, #BottomBoxes .tbl {
 margin:.5em 0;
 padding:.5em;
 border:none;
 border-radius:0;    
}

Est-ce là-dedans qu'il faut changer quelque chose?

Merci pour ton aide.
Anne

Réponse n° 12
--------
le 16/12/2016 @ 17:53
par anne_b64

Re!
Encore une petite question.
Je regarde ton site sur smartphone, les pages sont bien fixes.

Sur les miens, elles sont "mobiles" latéralement, avec le doigt, je peux les bouger à gauche et à droite, laissant ainsi apparaître le fond du site. Comment fait-on pour obtenir un site qui ne ballotte pas sur smartphone?

Je ne sais pas si mes explications sont très claires ....

Merci par avance.
Anne

Réponse n° 13
--------
le 16/12/2016 @ 18:10
par JeanDenis

Administrateur
38 messages

Re,

Pour ta première question, mets l'adresse du site avec la skn5_guppy2015 que je puisse voir (en tout cas ce ne sont pas ces lignes)

En affinant, dans tes deux skins précédentes, c'est comme ceci qu'il faudrait modifier (c'est la partie lien - a - qu'il faut corriger, le reste peut être maintenu)

.tblbox,.tblboxover, .box {
font-size: 1em;
padding:.2em .2em 1em;
}
.box a {
font-size: 1em;
padding:.2em 0 1em;
}

Pour ta deuxième question... hélas, je cherche encore (sans application excessive toutefois...

). Si tu regardes 71site.fr sur smartphone il "glisse" aussi latéralement de quelques pixels...

Je m'en suis fait une raison -plus ou moins-

... Un jour... peut-être...

Amicalement,

Réponse n° 14
--------
le 16/12/2016 @ 18:35
par anne_b64

Re!

Première question: c'est ce site.

Je fais les modifs pour les 2 skins corrigées..
Merci.
Anne

Réponse n° 15
--------
le 16/12/2016 @ 18:42
par JeanDenis

Administrateur
39 messages

Re,

Ces lignes y sont à partir de la ligne 152 du fichier mobstyle :
.tblbox,.tblboxover, .box, .box a {
font-size: 1em;
padding:.5em .5em 1em;
}

Tu modifies comme cela, ça devrait aller... :
.tblbox,.tblboxover, .box {
font-size: 1em;
padding:.5em .5em 1em;
}
.box a {
font-size: 1em;
padding:.5em 0 1em;
}

Amicalement,