28172 sujets

CSS et mise en forme, CSS3

[Résolu] Z-index, flash et Firefox 3

Bonjour,

Je suis nouveau, je travail actuellement sur une annonce html, et j'ai un souci entre flash, z-index et Firefox 3.
J'ai un "cadre rouge" qui doit passer devant mon flash, j'ai testé avec IE, et ça marche bien.
Je vous colle mon code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Santander - Leiter Marketing &amp;
Produktentwicklung m/w</title>

<style type="text/css">
a:link{
font-family: Arial, Helvetica, sans-serif;
color:#000000;
text-decoration:none;
font-weight:normal;
font-size:12px;
line-height:19px;
}
a:hover{
color:#000;
text-decoration:underline;
}
a:visited{
color:#000;
text-decoration:none;}
a:active{
color:#000;
margin:0px 0px;
padding:0px 0px;
}
ul{
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
line-height:17px;
color:#333333;
margin:0px 0px 0px 0px;
padding:0px 28px 0px 142px;
}
li{
/*list-style-image:url('http://jobs.robopost.com/logo/41587/puce_project_1.gif');*/
margin:0px 0px 0px 0px;
padding:0px 0px;
}
p{
margin:0px 0px;
padding:0px 0px;
}
h1{
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FFFFFF;
margin:0px 0px 0px 0px;
padding:10px 10px 0px 20px;
font-size:30px;
line-height:38px;
}
h2{
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
color:#FFFFFF;
margin:0px;
padding:0px 0px 2px 0px;
font-size:21px;
line-height:23px;
}
h3{
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
color:#FFFFFF;
margin:0px 0px 0px 0px;
padding:16px 10px 18px 20px;
font-size:21px;
line-height:23px;
}
h4{
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
color:#F00000;
margin:0px 0px 0px 0px;
padding:10px 10px 0px 0px;
font-size:11px;
line-height:14px;
}
#carre_rouge{
background-color:#E2001A;
background-repeat:repeat-y;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:510px;
position: relative;
top:0px;
left:0px;
z-index:3;
}
.texte_p1{
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
line-height:19px;
font-weight:normal;
text-align: justify;
color:#333333;
margin-left:45px;
padding:20px 14px 20px 20px;
width:414px;
position:relative;
z-index:1;
left:0px;
top:0px;
}
.texte_p2{
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
line-height:19px;
font-weight:normal;
text-align: justify;
color:#333333;
margin:0px 0px;
padding:20px 14px 20px 65px;
width:414px;
position:relative;
top:0px;
z-index:1;
}
.img_left{
background-color:#FFFFFF;
width:175px;
height:1114px;
position:relative;
top:0;
left:0;
z-index:0;
}
#contener{
width:650px;
/*overflow:hidden;*/
border: 1px solid #F00;
position:relative;
margin:0 auto;
}
#content{
width:520px;
/*overflow:hidden;*/
position:absolute;
margin:0;
top:0px;
left:140px;
z-index:1;
}
#contener_logo{
position:relative;
width:366px;
margin:0px;
padding:0px 0px 0px 0px;
top:0;
left:145px;
/*overflow:hidden;*/
}
#logo{
position:relative;
width:366px;
margin:0px;
padding:0px 0px 0px 0px;
top:0;
left:0;
}
#slogan{
position:relative;
width:310px;
margin:0px auto;
padding:0px 0px 0px 0px;
top:0;
left:0;
}
#website{
position:relative;
width:281px;
margin:0px auto;
padding:0px 0px 0px 0px;
vertical-align:right;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="contener">
<div class="img_left">
		<script language="javascript1.1" type="text/javascript">
<!--
var MM_contentVersion = 6;
var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
if ( plugin ) {
var words = navigator.plugins["Shockwave Flash"].description.split(" ");
for (var i = 0; i < words.length; ++i)
{
if (isNaN(parseInt(words[i])))
continue;
var MM_PluginVersion = words[i]; }
var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion;
}
else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0 && (navigator.appVersion.indexOf("Win") != -1)) {
document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n'); //FS hide this from IE4.5 Mac by splitting the tag
document.write('on error resume next \n');
document.write('MM_FlashCanPlay = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion)))\n');
document.write('</SCR' + 'IPT\> \n');
}
if ( MM_FlashCanPlay ) {
document.write('<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ');
document.write(' codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" ');
document.write(' WIDTH="175" HEIGHT="1114"><PARAM NAME=movie value="http://jobs.robopost.com/pkg/Cubus/animation_2.swf" /><param name="menu" value="false" /> <param name="quality" value="high" /><param name="wmode" value="transparent" /> <param name="bgcolor" value="#ffffff" />');
document.write(' <param name="allowScriptAccess" value="sameDomain" /> '); document.write(' <embed src="http://jobs.robopost.com/pkg/Cubus/animation_2.swf" menu="false" quality="high" bgcolor="#ffffff" width="175" height="1114" name="flying_icons" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> ');
document.write(' </OBJECT>');
} else{
document.write('<img src="http://jobs.robopost.com/pkg/Cubus/animation_2.gif" WIDTH="175" HEIGHT="1114" usemap="#script" BORDER="0">');
}
//-->
                  </script>
                  <noscript><img src="http://jobs.robopost.com/pkg/Cubus/animation_2.gif" width="175" height="1114" usemap="#script" border="0" alt="" style="position:absolute;" /></noscript>
	  </div>
<div id="content">
<div class="texte_p1">
<p>Als hundertprozentige Tochter der spanischen Santander Bank
ist die
Santander Consumer Bank Teil eines der gr&ouml;&szlig;ten
Kreditinstitute weltweit. Wir
sind Marktf&uuml;hrer in der herstellerunabh&auml;ngigen
Kfz-Finanzierung und in der
Konsumg&uuml;terfinanzierung. &Uuml;ber 5,3 Millionen
Privatkunden und ca. 35.000
Handelspartner vertrauen auf unser Know-how und unseren Service.
</p>
</div>
<div id="carre_rouge">
<table border="0" cellpadding="0" cellspacing="0" width="500">
<tbody>
<tr>
<td style="width: 300px; z-index:1;">
<h1>Leiter Marketing &amp;<br />
Produktentwicklung
</h1>
</td>
<td style="width: 210px;" valign="bottom">
<h2>m/w</h2>
</td>
</tr>
<tr>
<td colspan="2">
<h3>Kfz-Vertrieb</h3>
</td>
</tr>
</tbody>
</table>
</div>
<div class="texte_p2">
In unserer Hauptverwaltung in M&ouml;nchengladbach m&ouml;chten
wir eine anspruchsvolle Position besetzen. Wesentliche Anforderungen an
die geeigneten Bewerber/-innen sind ein Hochschulabschluss &#8211; alternativ
Berufsausbildung plus entsprechende Zusatzqualifikation &#8211; sowie
fundierte Erfahrungen im Bereich H&auml;ndlermarketing und
Produktentwicklung. Kenntnisse
des Automarktes und Vertriebs-Know-how sind ebenso wichtig wie sehr
gutes Englisch. F&uuml;hrungspraxis, Verhandlungs- und
Pr&auml;senta- tionssicherheit sind kennzeichnend f&uuml;r Ihre
Pers&ouml;nlichkeit.
<br />
<br />
Sie &uuml;bernehmen folgenden Verantwortungsbereich:
Durchf&uuml;hrung aller Marketingma&szlig;nahmen im
Kfz-Vertrieb; Budgetierung; Konzeption, Realisierung und
Einf&uuml;hrung neuer Produkte; Steuerung der Aktivit&auml;ten
im Vertriebskanal
Online-Finanzierungen; Planung und Kontrolle des Aftersales-Marketing.
Sie koordinieren die abteilungsbezogene Presse- arbeit und
gew&auml;hrleisten in allen relevanten Bereichen die Umsetzung der
gesch&auml;ftspolitischen Ziele der Bank.
<br />
<br />
Haben wir Ihr Interesse geweckt f&uuml;r diese fachlich
herausfordernde Position? Dann bewerben Sie sich bitte mit
vollst&auml;ndigen Unterlagen &#8211; mit Angaben zum Einkommenswunsch
und Starttermin &#8211; vorzugsweise unter <a href="http://karriere.santander.de" target="_blank">http://karriere.santander.de</a><br />
<br />
Santander Consumer Bank AG<br />
Christian Wetzel<br />
Bereich Personal<br />
Santander-Platz 1<br />
41061 M&ouml;nchengladbach
<br />
</div>
<div id="contener_logo" align="center">
<div id="logo"> <img src="http://jobs.robopost.com/logo/41903/logo_santander.gif" alt="Santander" title="Santander - Werte aus ideen" height="184" width="366" /> </div>
<div id="slogan">
<h4>SANTANDER WELTWEIT IN &Uuml;BER 40 L&Auml;NDERN</h4>
</div>
<div id="website" align="center"><a href="http://www.santander.de" style="color: rgb(255, 0, 0); font-size: 11px; font-weight: bold;">www.santander.de</a></div>
</div>
</div>
</div>
</body>
</html>


J'ai beau cherché, modifié les z-index, Firefox 3 ne veut rien savoir.
Vous remarquerez qu'il y a un script en javascript qui détecte si la personne à flash player d'installer sur son poste. In gif de backup prendra le relais dans le cas de son absence, mais de nos jours, c'est rare.
Pouvez-vous me donner un coup de main?
Merci d'avance.

David[/i][/i]
Modifié par davin_asga (30 Jul 2009 - 14:24)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
Personne n'a une idée?
C'est pourtant pas courant que ça marche juste sur IE alors que Firefox est censé respecter les standards?
Merci d'avance
Bonjour,
merci pour votre aide mais j'ai fini par trouver, il faut dans la balise
<embed src="http://jobs.robopost.com/pkg/Cubus/animation_1.swf" menu="false" quality="high" bgcolor="#ffffff" width="211" height="997" wmode="transparent" name="xxx" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
rajouter 
wmode="transparent"
.
A bientôt
Modifié par davin_asga (30 Jul 2009 - 14:24)
Sujet clos
Aller à