[résolu] Problèmes de mise en page avec un player Flash

Bonjour à tous,
J'ai rencontré un gros problème lors de l'insertion d'un player Flash sur ma page. Le rendu est complètement différent selon les navigateurs (je veux dire le rendu de la mise en page évidemment) : Chrome affiche le résultat normal. Mais pas Firefox, et encore moins IE 8.

Voici une image comparative pour visualiser mon souci :


Et l'url de mon site pour ceux qui auraient un moment à me consacrer :
http://tutomaster.free.fr

Et enfin le code CSS utilisé pour "object" :

object{
display:block;
padding-left:10px;
margin-bottom:20px;
background-color:orange;
}

Je suppose qu'il s'agit d'un problème de marge. Mais je ne sais pas où intervenir : dans le html ou le CSS ? Et sur quel élément, le lecteur lui-même ou les paragraphes de description figurant dessous ?

A noter que j'ai volontairement placé un background orange et je m'aperçois qu'il ne prend pas toute la hauteur du player sous Firefox. Comment expliquer ça ? Ce constat explique que les paragraphes de description remontent sous le player (uniquement pour Firefox).

Ces problèmes sont-ils connus et quelqu'un aurait-il des solutions à me proposer ?

Merci d'avance.

jpv56

Le problème est résolu lorsque je remets les dimensions initiales du player. A savoir 500px de large sur 360px de haut.

Cependant je souhaite agrandir ce player car mon objectif est de passer des tutoriels lisibles sans que l'utilisateur soit contraint de passer en mode plein écran.

Je pensais que les dimensions d'un lecteur Flash étaient librement modifiables. Suis-je dans l'erreur ?

Ma question est donc :
Puis-je redimensionner ce player (par exemple 650px sur 500px) tout en conservant une mise en page identique quel que soit le navigateur ?

Merci d'avance.

jpv56

bonjour,

Pour ff et object , tu applique un height="360" quand il fait en réalité 500px de hauteur , ff n'a pas tord finalement .

Pour la marge dans IE en rendu IE7 , enleve le padding-top:75px; a #corps et applique un clear:left; (ton menu horizontal est flottant).

En gros ,
applique les bonnes dimension dans les attributs height et width d'object (et embed) .

degage #corps du .menu flottant avec un clear.

applique une marge externe a object plutôt q'un padding .

GC

ça vaudrait un tuto ça

Bonjour gc-nomade,
Merci pour ton intervention.
Je vais appliquer tes conseils et tester tout ça.
Oui ça vaudrait un tuto (un peu d'ironie lol ?) mais je compte m'adresser à un public débutant... par ailleurs je ne prétends pas très calé en informatique

Je te tiens au courant et merci encore !

oki , oui , c'est un petit sourire detente . bonnes Pâques .

J'ai suivi tes indications.
J'ai notamment appliqué un clear:left au #corps.

Tout fonctionne correctement (quel que soit le navigateur) lorsque je remets le player aux dimensions d'origine. C'est à dire 500px de large sur 360px de haut.

Mais dès que je souhaite l'agrandir (650 x 420 par exemple) je rencontre toujours les mêmes problèmes :
> sur Chrome pas de souci (affichage parfait)
> sur IE le player est rogné (les extrémités disparaissent)
> sur Firefox le descriptif du dessous remonte sous le player

Je dois encore avoir un problème de code quelque part.
As-tu une idée à me soumettre ?

Merci.

reste encore les attributs dans le html a corriger :

<!-- la video-->
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" [b]width="500" height="360" [/b]id="tech" align="middle">
                <param name="allowFullScreen" value="true"/>
		<param name="allowScriptAccess" value="sameDomain" />
		<param name="wmode" value="transparent" /><!-- pour positionner un élément html (ici sous-menus) AU DESSUS du flash-->
		<param name="movie" value="bottomThumbnail.swf?xml_path=modele-17.xml" />
		<param name="quality" value="high" />
		<embed src="bottomThumbnail.swf?xml_path=modele-17.xml" quality="high" [b]width="500" height="360" [/b]name="tech" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

	</object>

Avait tu touché ou tester ceux la ?

GC

gc-nomade a écrit :
reste encore les attributs dans le html a corriger :

<!-- la video-->
	<object ... [b]width="500" height="360" [/b]...>
                ...
		<embed ...[b]width="500" height="360" [/b]... />

	</object>

(reduction du code )

MERCI gc-nomade !
J'avais effectivement oublié de modifier une ligne (largeur et hauteur) dans les attributs html
Mettons ça sur le coup de la fatigue (...).

Quoi qu'il en soit je te suis très reconnaissant car je commençais à tourner en bourrique, pour pas grand chose finalement.

Sans doute à bientôt sur le forum, car chaque nouvelle étape m'apporte son lot de complications.

Bonne journée à toi.

jpv56
Modifié par jpv56 (06 Apr 2010 - 09:53)