Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Problème animation Javascript espace impossible à effacer

8 réponses
Avatar
Pierrick
Bonjour =E0 tous,

Je m'arrache les cheveux avec une animation que je suis entrain de
d=E9velopper pour mon site web.
L'animation est =E0 la page suivante :
http://pierrick.legrand.free.fr/index_pierrick_ani.php

J'ai 2 probl=E8mes principaux :
- Tout d'abord, j'ai un grand espace blanc entre la fin de l'animation
et mon texte qui suit ! J'ai =E9crit le mot test pour me rendre compte.
J'aimerai que ce mot test soit =E9crit juste en dessous de l'animation.
Je viens d'essayer de changer tous les CSS un par un, et impossible.
Vu que c'est un stagiaire qui a fait le d=E9veloppement, et que je ne
suis pas excellent en JS et CSS, peut-=EAtre y a t-il plusieurs
probl=E8mes cumul=E9s...
- Mon second probl=E8me est le texte qui s'affiche sur l'image. Je
voudrai qu'il s'affiche en blanc et sans transparence, alors que l=E0 il
s'affiche en transparence. En fonction de l'image de fond il est gris,
bleu mais jamais tr=E8s lisible !

Merci beaucoup votre aide =E9clair=E9e.
Bonne journ=E9e =E0 tous.

Pierrick

8 réponses

Avatar
SAM
Le 5/21/10 9:26 AM, Pierrick a écrit :
Bonjour à tous,

Je m'arrache les cheveux avec une animation que je suis entrain de
développer pour mon site web.
L'animation est à la page suivante :
http://pierrick.legrand.free.fr/index_pierrick_ani.php



y a un login à l'entrée

que tu n'as pas donné !

...



J'ai 2 problèmes principaux :
- Tout d'abord, j'ai un grand espace blanc entre la fin de l'animation
et mon texte qui suit ! J'ai écrit le mot test pour me rendre compte.
J'aimerai que ce mot test soit écrit juste en dessous de l'animation.
Je viens d'essayer de changer tous les CSS un par un, et impossible.
Vu que c'est un stagiaire qui a fait le développement, et que je ne
suis pas excellent en JS et CSS, peut-être y a t-il plusieurs
problèmes cumulés...



Firebug dans Firefox pourrait t'aider

ne serait-ce que pour voir ce qui encombre

et n'ensuite modifier la css correspondante qu'il te montre

- Mon second problème est le texte qui s'affiche sur l'image. Je
voudrai qu'il s'affiche en blanc et sans transparence, alors que là il
s'affiche en transparence. En fonction de l'image de fond il est gris,
bleu mais jamais très lisible !



Même combat.


Merci beaucoup votre aide éclairée.
Bonne journée à tous.

Pierrick
Avatar
Pierrick
Bonjour Sam,

Merci pour ton retour.

Quel con je suis !

Normalement là ça doit être bon.

J'ai essayé d'utiliser Firebug, mais impossible de comprendre d'où
venait le problème.
Il faut dire que le CSS a été fait n'importe comment, je crois qu'il y
en a beaucoup trop !

Merci pour votre aide, et désolé pour ce loupé !

On 21 mai, 10:17, SAM
wrote:
Le 5/21/10 9:26 AM, Pierrick a écrit :

> Bonjour à tous,

> Je m'arrache les cheveux avec une animation que je suis entrain de
> développer pour mon site web.
> L'animation est à la page suivante :
>http://pierrick.legrand.free.fr/index_pierrick_ani.php

y a un login à l'entrée

que tu n'as pas donné !

...

> J'ai 2 problèmes principaux :
> - Tout d'abord, j'ai un grand espace blanc entre la fin de l'animation
> et mon texte qui suit ! J'ai écrit le mot test pour me rendre compte.
> J'aimerai que ce mot test soit écrit juste en dessous de l'animation.
> Je viens d'essayer de changer tous les CSS un par un, et impossible.
> Vu que c'est un stagiaire qui a fait le développement, et que je ne
> suis pas excellent en JS et CSS, peut-être y a t-il plusieurs
> problèmes cumulés...

Firebug dans Firefox pourrait t'aider

ne serait-ce que pour voir ce qui encombre

et n'ensuite modifier la css correspondante qu'il te montre

> - Mon second problème est le texte qui s'affiche sur l'image. Je
> voudrai qu'il s'affiche en blanc et sans transparence, alors que là i l
> s'affiche en transparence. En fonction de l'image de fond il est gris,
> bleu mais jamais très lisible !

Même combat.





> Merci beaucoup votre aide éclairée.
> Bonne journée à tous.

> Pierrick
Avatar
SAM
Le 5/21/10 10:34 AM, Pierrick a écrit :
Bonjour Sam,

Merci pour ton retour.

Quel con je suis !

Normalement là ça doit être bon.



super ! :-(

... demande d'authentification :

« Le site http://www.groupeisoeco.com demande un nom d'utilisateur et un
mot de passe. Le site indique : « Accèproté » »

à part que cette fois y a une image qui s'affiche derrière le panneau de
login
... rien de nouveau
... pas d'accès au code

j'ai dû killer mon Firefox


--
sm
Avatar
WebShaker
Le 21/05/2010 09:26, Pierrick a écrit :
Bonjour à tous,

Je m'arrache les cheveux avec une animation que je suis entrain de
développer pour mon site web.
L'animation est à la page suivante :
http://pierrick.legrand.free.fr/index_pierrick_ani.php

J'ai 2 problèmes principaux :
- Tout d'abord, j'ai un grand espace blanc entre la fin de l'animation
et mon texte qui suit ! J'ai écrit le mot test pour me rendre compte.
J'aimerai que ce mot test soit écrit juste en dessous de l'animation.
Je viens d'essayer de changer tous les CSS un par un, et impossible.
Vu que c'est un stagiaire qui a fait le développement, et que je ne
suis pas excellent en JS et CSS, peut-être y a t-il plusieurs
problèmes cumulés...
- Mon second problème est le texte qui s'affiche sur l'image. Je
voudrai qu'il s'affiche en blanc et sans transparence, alors que là il
s'affiche en transparence. En fonction de l'image de fond il est gris,
bleu mais jamais très lisible !

Merci beaucoup votre aide éclairée.
Bonne journée à tous.

Pierrick



Le probleme vient de textbackground.
Il a une hauteur de 71px.
Il est certes positionné a -71px; mais visiblement cela suffit a faire
penser au div supérieur div_animation qu'il fait 71 pixel de plus que prévu.
Je ne connais pas trop la solution... sauf a ne pas laisser partir un
stagiaire avant d'avoir contrôlé ce qu'il a fait ;)

pour la transparence la c'est tout con, le div est transparent et donc
tout ce qu'il contient l'est aussi.

il faut donc sortir le text du div et le repositionner en dessus de ton
div transparent.

vu la tronche de ton truc, t'aurai été plus vite a coder tout ca en
position absolute.

Etienne
Avatar
SAM
Le 5/21/10 10:34 AM, Pierrick a écrit :
Bonjour Sam,

Merci pour ton retour.

Quel con je suis !

Normalement là ça doit être bon.



Ha! ça y est, ça a l'air d'être entrée libre ce matin.

En fait d'"animation" ce n'est qu'une espèce de rollover, non ?
(au survol du menu de gauche ça affiche une image et un texte à droite)

Il n'y a pas de doctype sur la page.
Les liens ont un target (c'est déprécié)
les targets pointent sur "blank" c'est très vilain !

Le rollover m'a l'air laborieusement codé.

Ha !?
en fait le menu change d'item tout seul si on attend assez longtemps.
Il y a donc bien une espèce d'animation ...

Pour la question, et grace à Firebug

Dans les css :
1) trouver #textbackground
2) changer opacity à 1 (ou moins (entre 0.1 et 1))
ou l'annuler, le supprimer, si on ne veut plus de transparence
3) changer
top: -71px;
par
margin-top: -71px;


Pour le point 2, il me semble que c'est un peu dommage

Pour changer la couleur du texte, c'est dans le html,
un truc 'font' (débile et à supprimer partout) à modifier :

<div id="textbackground">
<div id="expliquetext">
<ul>
<li ... >
<a target="_blank" href="http://www....">
<font color="#ffffff">

Si vraiment on veut ce texte en blanc
rajouter dans la css :
#expliquetext ul li a { color: white }
ou, peut être simplement à
#expliquetext
et
#expliquetext .current
changer ou supprimer(mieux) le color
puisque les a sont déjà naturellement stylés en blanc

voilà.
et bien sûr ne pas suivre le conseil de WebShaker de passer en absolute

Il ne faut jamais rien mettre en absolute tant qu'on n'a pas essayé de
résoudre son problème "proprement", et généralement c'est très possible.

en attendant la refonte complète de tout le shmillblick ;-)
--
sm
Avatar
SAM
Le 5/22/10 10:59 AM, SAM a écrit :

en attendant la refonte complète de tout le shmillblick ;-)



Voilà, c'est ici :
<http://cjoint.com/?fxbBS24sGP>

validé par les 3 chiotes
--
sm
Avatar
SAM
Le 5/22/10 10:59 AM, SAM a écrit :

en attendant la refonte complète de tout le shmillblick ;-)



c'est là :
<http://cjoint.com/data/fxbNDXKedG_index_pierrick_sam_ani.htm>

--
sm
Avatar
SAM
Le 5/23/10 1:40 AM, SAM a écrit :
Le 5/22/10 10:59 AM, SAM a écrit :

en attendant la refonte complète de tout le shmillblick ;-)



c'est là :



et la version 2 :
<http://cjoint.com/data/fxmmd1w4hv_index_pierrick_ani_sam_1.htm>
( qui se passe de hacks pour IE )
( ok si css désactivées )

--
sm