Problème Espace sous animation Javascript et transparence texte

Bonjour à tous,

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

PS : Désolé je viens de m'apercevoir que j'avais oublié d'enlever le login d'accès. vous ne pouviez pas accéder à la page. Je viens de corriger. Toutes mes excuses.
Modifié par Pierrick81 (21 May 2010 - 10:38)

salut,

alors pour le problème d'espace entre ton animation et le texte "test" (ton espace blanc) dans ton CSS tu a oublier de mettre un '.' devant div_animation du coup le CSS que tu lui à mis n'est pas appliquer

ton CSS:

div_animation {
   WIDTH: 900px;
   HEIGHT: 266px;
 /*  POSITION: static;*/
 /*  margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: 0px;*/
/*   background-color: #fff;*/

}

CSS corriger :

.div_animation {
   WIDTH: 900px;
   HEIGHT: 266px;
 /*  POSITION: static;*/
 /*  margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: 0px;*/
/*   background-color: #fff;*/

}

Voila je pense que ça va résoudre ton souci je regarde pour le problème de couleur pour le texte.

Alors pour le problème de texte transparent dans ton CSS tu à mis :

#textbackground {
   position : relative;
   left:212px;
   top: -71px;
   width:666px;
   height:71px;
   padding-left: 20px;
   opacity:0.5;
   -moz-opacity:0.5;
   filter:alpha(opacity=50);
   visibility: visible;
   background-color: #000000;
   overflow: hidden;
   z-index: 2;
   color: #FFFFFF;
}

il faut que tu supprime les lignes suivant :

opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);

ce qui donnera :

#textbackground {
   position : relative;
   left:212px;
   top: -71px;
   width:666px;
   height:71px;
   padding-left: 20px;
   visibility: visible;
   background-color: #000000;
   overflow: hidden;
   z-index: 2;
   color: #FFFFFF;
}

Voila !
Modifié par Viva25 (21 May 2010 - 14:50)

Merci Viva,

Pour le grand blanc en dessous de l'anim ça marche. Merci. (voilà comment passer des heures pour un détail à la c** !)

Par contre pour la transparence, ce n'est pas bon, car en fait Textbackground gère le rectangle gris sur lequel le texte est inscrit.
Il doit être transparent pour laisser l'image visible en dessous.

Par contre c'est le texte lui même qui est transparent alors que lui ne devrait pas l'être.

Si tu vois autre chose ça serait super ! (ou qq1 d'autre...)
Merci

Pourquoi sinon ne pas mettre une image png avec une opacité à la place ?

Avant :

#textbackground { 
   position : relative; 
   left:212px; 
   top: -71px; 
   width:666px; 
   height:71px; 
   padding-left: 20px; 
   opacity:0.5; 
   -moz-opacity:0.5; 
   filter:alpha(opacity=50); 
   visibility: visible; 
   background-color: #000000; 
   overflow: hidden; 
   z-index: 2; 
   color: #FFFFFF; 
} 

Après :

#textbackground { 
   position : relative; 
   left:212px; 
   top: -71px; 
   width:666px; 
   height:71px; 
   padding-left: 20px; 
   visibility: visible; 
   background-image:url(tonimage.png); 
   overflow: hidden; 
   z-index: 2; 
   color: #FFFFFF; 
} 

Merci Viva.

Tu crois que c'est la seule solution ?
Je trouve dommage d'utiliser une image. Le principe d'utiliser les CSS est justement d'éviter au max les images pour réduire le chargement.
Par contre je pense que ça doit résoudre le problème.

Je vais essayer comme ça.

Si quelqu'un a une autre idée sans faire une image.

En fait je m'aperçois que je n'arrive pas à changer la couleur de ce texte via les CSS. Je n'ai aucune CSS qui fonctionne ! Le problème doit venir de là ! Je suis obligé d'utiliser une balise FONT color dans mon code HTML !

Merci pour votre aide en tout cas

Pierrick

Pour le moment je pense que ça va résoudre ton problème je vais faire mon enquête et je te tien au courant.