28220 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un flash centré sur une page...et je voudrais mettre une image de remplacement dans le cas où ce flash ne s'afficherait pas.
Voici mon code CSS:

body, html { 
 background-color:white;
 
} 
object {
  position: absolute; 
  top: 50%; left: 50%;
  margin-left: -210px;
  margin-top: -80px;
}

Et voici mon code Html:

<!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="fr">
  <head>
    <title>Falsh Centré</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="macss.css" media="screen" title="Macss (screen)" />
	</head>

  <body>
<object type="application/x-shockwave-flash" data="images/monflash.swf" width="420" height="160">
  <param name="movie" value="images/monflash.swf">
  <param name="wmode" value="transparent" />
  <img src="images/monimage.png" width="420" height="160" alt="image" title="Mon Image"/>
</object>
 </body>
</html> 


Mon souci c'est que l'image apparaît en haut a gauche (sous IE5) Smiley ohwell .
j'ai bien essayé de mettre un background-image a object mais...elle apparait puis disparait (sous IE5) Smiley decu ...

Suis preneur de tout conseil avisé... Smiley ravi

Ziad O'Hanlon
Modifié par ziad270 (22 Apr 2005 - 15:01)
ton css centre l'objet et non l'image...

Met un id sur ton image et applique le style de ton objet.

En regle general j'utilise pour ce cas de figure un tableau (oui je sais...) d'une case avec un style 100% / 100% comme ca tout contenu de remplacecement est centré.
Merci à vous deux pour la rapidité de vos réponses

Xethorn, le display:block ne résoud pas le problème.
Kalilu, je débute en Xhtml/css...
Quand tu me dis de mettre une id à mon image je dois la placer dans un
<div id="monid"><img scr="monimage.png"></div>


et lorsque tu me dis d'appliquer le style de mon objet en gros je rajoute un

oject,monid{
monstyle : style;
}

C'est bien ca?
Je suis confus pour le niveau de ma réponse...

Ziad O'Hanlon
Modifié par ziad270 (22 Apr 2005 - 14:05)
Non, ça n'est pas du flash Smiley cligne
#id {
color:#000;
}


Et tu rajoutes un attribut id dans ta balise object :
<object id="id">(...)</object>

Modifié par Xethorn (22 Apr 2005 - 14:20)
Pas mieux . Le problème est le même (sous IE5 seul que j'ai sous la main sans flash sur la machine) Smiley bawling

Mon Code CSS:
body, html { 
 background-color:white;
 
} 
object{
  position: absolute; 
  top: 50%; left: 50%;
  margin-left: -210px;
  margin-top: -80px;
}
#imag {
  position: absolute; 
  top: 50%; left: 50%;
  margin-left: -210px;
  margin-top: -80px;
}


Mon Code xhmtl:

Entêtes Propres...puis:

    <link rel="stylesheet" type="text/css" href="macss.css" media="screen" title="MaCSS  (Screen)" />
	</head>

  <body>
<object id="imag" type="application/x-shockwave-flash" data="images/monflash.swf" width="420" height="160">
  <param name="movie" value="images/monflash.swf">
  <param name="wmode" value="transparent" />
  <img src="images/monimage.png" width="420" height="160" alt="image" title="Mon Image"/>
</object>
 </body>
</html> 


J'hésite entre suivre ton conseil sur le tableau (oui tu sais... Smiley cligne )... en 100%/100% et oublier les utilisateurs de IE5...je pense qu'il est sans doute plus raisonnable de s'orienté vers le tableau...mais bon...après avoir passé des heures Smiley sweatdrop à lire et se laisser convaincre par openweb.eu.org et alsacreations.com... ca fait quand même plutôt mal Smiley ohwell ...
A moins qu'un background centré sur le body (c'est pour une page d'accueil avec choix de langue)...
Merci pour ta réponse Xethorn.

Ziad O'Hanlon
Ca fonctionne avec background Centré sur le body Smiley biggrin :
body, html { 
 background-color:white;
 background-image:url(images/monimage.png);
 background-position:center center;
 background-repeat: no-repeat;
 
} 


Mais j'ai quand même un léger sentiment de frustration... Smiley confus

Ziad O'Hanlon
Bien IE, c'est soit fonctionne soit coule, c'est bien connu. Donc tu as compris ce qu'était la frustration universelle des geeks Smiley smile