[Résolu] Marges incompréhensibles entre des animations flash

Bonjour,

Je suis actuellement en train de faire une site pour mon club de tennis. Bien évidemment, je tente de le faire aux normes et ceci pour les plus de navigateurs possibles.
J'ai désormais fini tout ce qui était contenu et formes et je m'applique désormais à rectifier tous les problèmes de validation W3C et de compatibilités IE

Mon site est visible ici : http://ctdraveil.free.fr

Le premier bug (les autres suivront dans d'autres topics ^^) est le fait que mes trois animations flash de la div "bandeau" possède entre elles des espaces visibles dans Opéra, Firefox, Safari et Flock entre autres... mais pas dans IE7 (qui se retrouve à représenter la chose exactement comme je le veux) !!

(Je précise aussi que j'ai rechercher des problèmes similaires et que je n'ai pas trouvé, ni sur Google (les problèmes venait de IE, a chaque fois) ni sur le forum, ni dans la FAQ)

Voici le code concerné :

<div id="bandeau">
      <script type="text/javascript" src="../scripts/accode1.js"></script>
     <noscript>
      <object type="application/x-shockwave-flash" data="flash/slideshowclub.swf" width="200" height="134">
        <param name="movie" value="flash/slideshowclub" />
        <param name="wmode" value="transparent" />
      </object>
      </noscript>
      <script type="text/javascript" src="../scripts/accode2.js"></script>
      <noscript>
      <object type="application/x-shockwave-flash" data="flash/slideshowjoueurs.swf" width="200" height="134">
        <param name="movie" value="flash/slideshowjoueurs" />
        <param name="wmode" value="transparent" />
      </object>
      </noscript>
      <script type="text/javascript" src="../scripts/accode3.js"></script>
      <noscript>
      <object type="application/x-shockwave-flash" data="flash/slideshowevents.swf" width="200" height="134">
        <param name="movie" value="flash/slideshowevents" />
        <param name="wmode" value="transparent" />
      </object>
      </noscript>
    </div>

Et le css qui va avec :

div#bandeau {
	width: auto;
	height: 134px;
	background-color: #CCCCCC;
	text-align: left;
}

J'ai essayé de mettre des propriétés extremes aux balises "object" (display none, contours, positions, marges, paddings...), rien n'y fait, les animations ne semblent pas être affectées... sauf sur IE7 ! Un display none, ou des bordures semblent être correctement interprétés sur ce navigateur

Sur ce forum, une personne avait résolu le problème en mettant une balise "embed", qui n'est pas toléré dans les normes.

Quelles sont les spécifités de la balise "object" sur IE, qui font que ce navigateur semble interpréter comme je le souhaite ma volonté ? Et comment faire pour qu'il n'y ait plus d'espaces entre mes animations ?

Merci.
Modifié par Neeko (29 Dec 2008 - 17:55)

Bonjour,

Alors dans l'ordre:

1. Se rendre sur la page et faire un Ctrl+A (ou Cmd+A sur mac) pour sélectionner tous les contenus. On remarque qu'il y a des espaces (je veux dire le caractère espace) entre les animations.

2. Lire http://blog.alsacreations.com/2006/10/20/294-impact-sur-le-rendu-de-la-mise-en-forme-du-code-html

3. Prendre les mesures qui s'imposent. Par exemple faire flotter les animations à gauche. Ou supprimer tous les espaces et retours à la ligne entre elles (ou les commenter).
Modifié par Florent V. (28 Dec 2008 - 20:50)

Bonjour Florent V.,

J'ai bien suivi tes conseils, mais le problème reste le même.
Je pense avoir compris le problème : j'ai effectivement pu éprouvé la chose en l'appliquant à des images (balises en ligne, comme dans le lien que tu as mis). J'ai remplacé les animations par des images fixes de même dimensions (200x134) et n'ai laissé dans le document html aucun espace entre les balises : les images étaient collées.

Par contre, avec les balises "object", je n'arrive pas au même résultat. Voici le code que j'ai essayé :

<div id="bandeau">
      <script type="text/javascript" src="../scripts/accode1.js"></script><noscript><object type="application/x-shockwave-flash" data="flash/slideshowclub.swf" width="200" height="134"><param name="movie" value="flash/slideshowclub" /><param name="wmode" value="transparent" /></object></noscript><script type="text/javascript" src="../scripts/accode2.js"></script><noscript><object type="application/x-shockwave-flash" data="flash/slideshowjoueurs.swf" width="200" height="134"><param name="movie" value="flash/slideshowjoueurs" /><param name="wmode" value="transparent" /></object></noscript><script type="text/javascript" src="../scripts/accode3.js"></script><noscript><object type="application/x-shockwave-flash" data="flash/slideshowevents.swf" width="200" height="134"><param name="movie" value="flash/slideshowevents" /><param name="wmode" value="transparent" /></object></noscript><img src="../images/200134.png" alt="image d'illustration" title="logo aparté" width="180" height="134" />
      </div>

Et le résultat et toujours pareil, il existe toujours 4px entre chaque animations. J'ai essayé de mettre un "float left" sur les "object", et ca n'a pas changé d'un iota (alors que ça l'avait fait pour les images).

Qu-est-ce que la balise "object" a de différent avec la balise img ? Ou est-ce qu'il y a quelque chose que je n'ai pas compris ?

Salut,

Je n'ai pas le temps de tester mais je me demande si ça ne viendrait pas des NOSCRIPT.

Tu pourrais essayer de faire quelque chose comme :

<script type="text/javascript" src="../scripts/accode1.js"></script><script type="text/javascript" src="../scripts/accode2.js"></script><script type="text/javascript" src="../scripts/accode3.js"></script>
<noscript>
      <object type="application/x-shockwave-flash" data="flash/slideshowclub.swf" width="200" height="134">
        <param name="movie" value="flash/slideshowclub" />
        <param name="wmode" value="transparent" />
      </object>
      <object type="application/x-shockwave-flash" data="flash/slideshowjoueurs.swf" width="200" height="134">
        <param name="movie" value="flash/slideshowjoueurs" />
        <param name="wmode" value="transparent" />
      </object>
      <object type="application/x-shockwave-flash" data="flash/slideshowevents.swf" width="200" height="134">
        <param name="movie" value="flash/slideshowevents" />
        <param name="wmode" value="transparent" />
      </object>
</noscript>

Modifié par Heyoan (29 Dec 2008 - 06:48)

Les NOSCRIPT et peut-être même les SCRIPT (quoi que ces derniers soient généralement en display:none) jouent peut-être un rôle dans ce problème. Au passage, cette structure me semble excessivement compliquée. Les scripts servent à afficher les animations Flash, de même que les object dans les éléments NOSCRIPT?

Pour information, sur la page que tu avais indiqué j'avais testé du float:left sur les EMBED (vu que c'était ces éléments qui affichaient les animations dans ce cas précis), et ça annulait bien les espaces entre les animations.
Modifié par Florent V. (29 Dec 2008 - 11:44)

Bon, le problème est résolu.

Premièrement, j'ai écrit le code à la manière d'Heyoan, mais ca ne marchait pas. Ensuite, j'ai enlevé les balises noscript et script, avec pour effet d'avoir un affichage nul.

Alors, je suis resté sur la nouvelle syntaxe, et puis j'ai cherché a savoir comment ca se passait avec l'intégration des animations flash par Dreamweaver. Avec son code, on a des balises embed. Si je laissais le code html de Dreamweaver tel quel, j'avais les animations espacées des 4 pixels.

Donc, j'ai fait comme l'avait recommandé Florent V., j'ai mis les balises embed, en float:left. Ca marchait... avec le code Dreamweaver.
Je me suis dit ensuite que la seule manière d'avoir le bon résultat était d'avoir le code invalide de DW.

Et puis j'ai cherché un peu sur le net des solutions, tout en laissant le css d'embed dans ma feuille de style. D'habitude quand je fais un test, j'efface les nouveautés dans la feuille si elles ne sont pas concluantes. La, j'ai oublié de l'effacer, alors tenant de trouver des solutions valides, j'efface le code de DW, remet celui que j'avais auparavant et pour trouver des pistes, fais une preview de ma page modèle, et je m'apercois que les animations sont collées .

Un peu surpris, je fait plein de ctrl+z, pour voir, ce que j'ai modifié dans mon html afin de connaitre la réponse au problème, mais non, toujours collées. Et puis je regarde ma feuille de style et je fois le float:left, de la balise embed. Je l'efface, fais une preview et les anims sont décollées. Je le remet, je fais une preview, les anims sont collées .

Voila, merci Florent V., l'application du float:left sur la balise embed était la solution. Je met mon problème comme résolu, mais j'aurais quand même quelques autres petites questions :

Tu as dit que ma structure était compliquée, pour quelle/s raison/s ?
Les scripts étaient effectivement la pour afficher les anims, et contenait des infos différentes, vu que les trois anims l'étaient.
Et puis le noscript est obligatoire, sinon conseillé, si on a des animations, non ?
Et enfin, comment se fait-il que la balise embed ait une influence, alors même qu'elle n'est pas écrite dans le code ?
Modifié par Neeko (29 Dec 2008 - 17:56)

Neeko a écrit :
Tu as dit que ma structure était compliquée, pour quelle/s raison/s ?

Eh bien tu avais:
3 EMBED + 3 SCRIPT + 3 NOSCRIPT avec OBJECT.

Il suffirait d'avoir:
3 DIV avec OBJECT + une fonction JS en externe qui permet de générer le code HTML d'une animation Flash en remplaçant le contenu d'un div + 3 lignes de JS pour instancier la fonction.

Je pense notamment aux fonctions de type SWFObject pour la fonction JavaScript externe.

Bien sûr tout cela n'a d'intérêt que si tu as besoin d'utiliser une fonction JavaScript pour tes animations Flash. Un rapport avec l'embrouille Eolas? Dans tous les cas, la solution la plus simple est:
3 OBJECT. Point.