28173 sujets

CSS et mise en forme, CSS3

Background-position:center; et firefox

Pages :
Bonjour,
Voilà mon problème: quand je fais un "background-position:center;", Firefox PC (pas de problème sur la version mac) me cale mon image de fond en haut...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>AXYLO</title>

<meta name="description" content="Bix Design" />
<meta name="keywords" content="bix,design,axylo,bijou,alphabet" />


<script type="text/javascript" src="flashobject.js"></script>
		
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #000000;
	background-image:url(fond.gif);
	background-position:center;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
}
a:link {
	color: #333333;
}
a:visited {
	color: #666666;
}
a:hover {
	color: #666666;
}
a:active {
	color: #666666;
}

#flashcontent{
	position:absolute;
	left: 50%;
	margin-left: -375px;
	/* Hack CC pour IE MAC \*/
	top: 50%;
	margin-top: -232px;
	 /* fin hack CSS pour IE MAC */
}


-->
</style><div id="flashcontent">
      <p>bix design<br/>
        Merci de bien vouloir mettre &agrave; jour votre flash player afin de pouvoir consulter ce site dans de bonnes conditions.<br />
        <a href="http://www.macromedia.com/go/getflashplayer" target="_blank">http://www.macromedia.com/go/getflashplayer</a></p>
      </div>
</div>

<script type="text/javascript">
   var fo = new FlashObject("axylo.swf", "axylo", "750px", "465px", "8", "#000000",true);
   fo.write("flashcontent");
</script>


Je ne suis pas une star en html css...
Modifié par jeremix (13 Oct 2006 - 10:07)
Ok, merci, voilà l'adresse: http://www.axylo.com
Le fond est dégradé en gif (noir/bleu/noir) qui doit être centré. Pas de problème sur IE, pas bon sur Firefox... (1.5.0.7)
Modifié par jeremix (13 Oct 2006 - 10:24)
Re : Smiley smile 
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #000000;
	background:url(fond.gif);

}

testé ff + ie

Edit : pour gagner quelques octets :
body {
	margin: 0px;
	background:url(fond.gif) #000;

}

Modifié par Ralfman68 (13 Oct 2006 - 10:36)
Merci beaucoup pour tes réponses ultra rapides.
Mais j'ai du mal m'exprimer: en fait le dégradé doit se centrer verticalement pour que le bleu, quelque soit la taille de la fenêtre navigateur, soit au centre de la page. Sur IE si je redimensionne la fenêtre le dégradé vient se replacer automatiquement, sur Firefox tout foire...
bizarre, chez moi ça marche ...
le bleu est toujours au milieu. regarde
edit :même en redimenssionnant , le background reste centré
Modifié par Ralfman68 (28 Nov 2007 - 22:33)
la même que la tienne 1.5 Smiley smile
quelqu'un d'autre pour confirmer ?

edit: argh oui en effet en redimensionnant verticalement il ya un probleme
Modifié par Ralfman68 (13 Oct 2006 - 10:46)
Je dois t'avouer que je travaille essentiellement sur Mac, j'ai un PC mais je n'y connais absolument rien. Est-ce que tu as des extentions spéciales sur ton Firefox, ou quelque chose dans le genre ?
Modifié par jeremix (13 Oct 2006 - 15:11)
j'ai la webdeveloper extension pour firefox qui est très pratique pour editer les css en live.
Edit : en regardant ton code ; tu n'as pas refermé la balise head et tu as un </div> en trop.
En plus, il ny' a pas de <body></body>... pas bien Smiley langue
Modifié par Ralfman68 (13 Oct 2006 - 10:53)
le code est mieux comme ça, mais j'ajouterai le swf avec la balise object plutot qu'en js 
<object type='application/x-shockwave-flash' data='http://www.axylo.com/axylo.swf' width='750' height='465' class='animflash' >
        <param name='movie' value='http://www.axylo.com/axylo.swf' />
        <param name='wmode' value='transparent' />
        <p>Animation axylo</p>
	</object>"
Merci pour tous tes conseil. En fait je le mets en js pour plusieurs raisons, notamment pour gérer une installation automatique du plugin flash via le module FlashObject (http://blog.deconcept.com/swfobject/).
je viens de voir ton "edit", donc tu as le problème aussi...
j'aurai préféré que se soit mon FF qui déconne.
Quelqun à t'il une idée ?
Salut,
c'est à dire ? pas de problème sur Safari ni Opéra ?
Chez moi ça marche partout (IE Mac, IE PC, FF Mac, Safari, Opéra etc...) sauf FF PC...
jeremix, as-tu jeté un oeil a l'exemple que j'ai mis en ligne ? au lieu d'appliquer l'image de fond au body, je l'ai appliqué au div contenant le flash.

C'est à peu près le resultat que tu cherchais je crois (si tu fais abstraction d'un léger décallage => le fond est "en retard" par rapport au flash lorsqu'on redimensionne le navigateur)
En fait sur ton exemple le flash ne se centre pas (en vertical) lorsque l'on redimensionne la fenêtre. Moi ce que je cherche à faire c'est:
- le swf est centré en vertical et horizontal dans la fenêtre navigateur > ça c'est ok
- le fond en gif est centré en vertical dans la fenêtre navigateur pour que le centre du dégradé soit toujours aligné au centre de mon swf, le tout étant donc centré dans la fenêtre navigateur quelque soit sa taille> ça c'est ok sauf sur FF
je crois que j'ai trouvé la solution: ils suffit d'ajouter background-attachment: fixed;
pouvez vous me confirmer que ça fonctionne bien sous FF: http://www.axylo.com
Modifié par jeremix (13 Oct 2006 - 15:38)
Pages :
Sujet clos
Aller à