28221 sujets

CSS et mise en forme, CSS3

Ajustement automatique à la taille de l'écran

Bonjour à tous,

le texte contenu dans un DIV peut s'ajuster automatiquement sa largeur à la taille de la fenêtre disponible comme dans cet exemple :

http://digitalpixel.free.fr/test/css/largeur-fluide.htm

C'est également le cas pour un fichier flash que l'on ouvre directement
comme dans cet exemple :

http://digitalpixel.free.fr/test/css/1024x768.swf

J'aimerais conserver cette propriété quand le fichier flash est inséré dans un DIV
comme ici par exemple :

http://digitalpixel.free.fr/test/css/flash-pano-absolu.htm

mais là, quand on reduit la zone d'affichage, les barres de scroll apparaissent et la zone contenant le fond vert correspondant à l'animation
flash ne se redimensionne plus Smiley decu


Est-ce possible ?
Comment faire ?

@+

Gummybear Smiley cligne
Salut,

Dans l'exemple que tu cites avec le fichier Flash, le fichier en question est la seule chose contenue, il n'y a pas de page web, il s'agit donc purement de la gestion du swf par le navigateur.

Quand au cas avec une anim flash dans un div, il me semble (de mémoire) que tu as dans la balise de l'anim des paramètres largeur et hauteur. Essaie de les remplacer par des valeurs en pourcentage (inline,puis via css).
...j'ai essayé en mettant 100% à la place des dimensions
width et high, mais l'animation flash de s'affiche plus Smiley decu 


<div id="movie">
  	 
	 <a href="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&amp;Lang=French&amp;P5_Language=French"><object type="application/x-shockwave-flash" data="1024x768.swf" &_
width="1024" height="768">
<param name="movie" value="1024x768.swf" />
<param name="bgcolor" value="#CCCCCC">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="allowscriptaccess" value="samedomain">
<img src="noflash.gif" width="550" height="350" alt="" />
</object></a>
	 
  	</div>


par ailleurs mon conteneur "movie" est déjà à width 100%


#conteneur {
float: left;
width: 100%;
background-color:#CCCCFF;
}


alors comment faire ?
Moi j'utilise ce type de code valable sous firefox et ie6 Smiley cligne 


 <object style="margin : auto;" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="400">
      <param name="movie" value="flash/organigramme.swf">
      <param name="quality" value="best">
      <param name="width" value="100%">
      <!--[if !IE]> <-->
      <object data="flash/organigramme.swf"  width="100%" height="400" type="application/x-shockwave-flash">
        <param name="quality" value="best">
        <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
        <!--> <![endif]-->


Je t'ai mis directement mon source
...avec ton code cela donne ca :

http://digitalpixel.free.fr/test/css/largeur-fluide-flash-ts-bloc-doomer.htm

sous IE 5.5 j'ai l'anim flash qui est ok, mais j'ai perdu mon bloc de droite ?!

sour Firefox 1.0 je ne visualise pas l'anim flash mais le bloc est présent à gauche ?!

...avec mon code cela donne ça :

http://digitalpixel.free.fr/test/css/largeur-fluide-flash-ts-bloc.htm
tout est ok avec IE 5.5

mais pas avec Firefox 1.0 ou le résultat est identique au tient...

Qu'est ce qui coince avec Firefox ?

édit par Igor, j'ai rétabli les liens
Modifié le 07 Jan 2005 - 16:11
...oups, pour le dérapage à gauche il maiquait px dans la dimension CSS,
mais le non fonctionnement dans Firefox reste inchangé Smiley decu

Comment résoudre ce problème ?
Alors en fait, ce qu'il faut faire dans ces cas là, c'est regarder la spé CSS sur les pourcentages. Donc, un élement qui a pour width et height des pourcentages, ces dimensions vont être calculées à partir de l'élément parent. Dans ton cas, ce sera la div#centre. Hors, dans ton CSS, div#centre n'a ni width ni height de spécifié, donc les dimensions de ton <object> seront indéterminées.

Donc ce qu'il faut faire, c'est spécifier un width et un height valides pour ta div#centre. Rajoute ça dans ton CSS dans la partie #centre :
width: 100%;
height: 100%;

En vérifiant, ça ne fonctionne toujours pas Smiley bawling . En fait, notre #centre doit aussi calculer ses dimensions en fonction de son élément parent, à savoir dans notre cas, l'élément <body>. Elément <body>, qui lui aussi, doit calculer ses trucs, en fonction de son parent, <html>. Donc il faut rajouter ça dans ton CSS :
html, body {
  width: 100%;
  height: 100%;
}

Ainsi, l'élément <html> utilisera la taille de la fenêtre pour les dimensions (il a pas de parent pour calculer ses pourcentages, donc il prendra la fenêtre). <body> fera en fonction de <html>, donc body aura aussi la taille de la fenêtre. Même chose pour div#centre, et enfin même chose pour ton <object>.

Ouf ! Smiley biggrin
Modifié le 08 Jan 2005 - 12:08
merci Florent et Raphael,
l'animation flash s'affiche maintenant en plein ecran dans IE 5.5 et Firefox 1.0
même quand on redimensionne la fenetre d'affichage. Smiley biggrin

http://digitalpixel.free.fr/test/css/raphael01.htm

Maintenant je souhaite rajouter un bloc en "avant-plant" comme un calque supplémentaire, au-dessus de l'animation flash ( en le positionnant à 20 px du bord droit de l'affichage )

J'ai fais plusieurs essais en positionnant le bloc
avant, après, dedans, en relative,
mais sans résultat correct :

http://digitalpixel.free.fr/test/css/raphael02.htm

http://digitalpixel.free.fr/test/css/raphael03.htm

http://digitalpixel.free.fr/test/css/raphael04.htm

Quelle est la bonne formule ? Smiley rolleyes
...oui Florent, par-dessus et à 20 px du bord droit.
J'ai essayé de combiner les codes et ça donne cela :

http://digitalpixel.free.fr/test/css/raphael01bloc.htm

et le bloc reste invisible ( je pense positionné en arrière plan ? )

Smiley bawling

...Raphael, concernant ton billet sur les pourcentage,
est-ce que cela veut dire que je dois utiliser 99%
au lieu de 100 % pour les dimensions ?
Est-ce qu'il faut éviter de définir à la fois la largeur
et la hauteur à 100 % ?
Que veux tu exactement, je suis un peu perdu dans la conversation. Peux tu redonner un lien avec ta page test ?

Merci
...la premiere objectif était d'afficher une animation flash se redimensionnant à la taille de l'affichage, dans un bloc :
http://digitalpixel.free.fr/test/css/raphael01.htm
ça c'est ok
mais
la deuxième chose est d'afficher en avant plant un bloc de 300x200 positionné
à 20 px du bord droit de la zone d'affichage.
...j'ai pourtant assayé d'appliquer ce qui est indiqué à
http://www.alsacreations.com/articles/div/
à l'exemple du bloc contenu dans un autre
mais cela ne fonctionne pas,
le bloc reste invisible...

http://digitalpixel.free.fr/test/css/raphael02.htm

http://digitalpixel.free.fr/test/css/raphael03.htm

http://digitalpixel.free.fr/test/css/raphael04.htm

il est probablement placé derrière l'animation flash ?

je ne sais plus quoi faire Smiley eek
Sujet clos
Aller à