Problème animation Javascript espace impossible à effacer

Le
Pierrick
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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #22148631
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
Pierrick
Le #22148701
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
SAM
Le #22150651
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
WebShaker
Le #22152151
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
SAM
Le #22152831
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>
<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
SAM
Le #22156051
Le 5/22/10 10:59 AM, SAM a écrit :

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



Voilà, c'est ici :

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

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



c'est là :

--
sm
SAM
Le #22156971
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 :
( qui se passe de hacks pour IE )
( ok si css désactivées )

--
sm
Publicité
Poster une réponse
Anonyme