28172 sujets

CSS et mise en forme, CSS3

Diapo qui passe sur menu

Bonjour,

je fais appel à vous pour un petit problème sur mon site. J'ai réalisé un menu fixe sur le haut de ma page, et j'aimerais que tout le reste du contenu défile derrière ce menu. Ca marche parfaitement sous firefox, mais avec un autre navigateur, que cela soit Safari, Opéra, Explorer..., le contenu passe par dessus mon menu, et ce n'est pas bon.

J'ai beau avoir cherché une solution, rien n'est très clair, même si j'ai cru repérer que les éléments flash d'une page peuvent poser problème dans mon cas précisément. Car l'élément de mon contenu qui passe par dessus mon menu est un diapo flash ! Le pied de page par exemple, ou la div "actualites" passent bien eux derrière comme prévu, même sous autre chose que Firefox.

Comment dompter le diapo alors ? Merci.
(ne vous occupez pas du texte ou des cellules des images du tableaux que j'ai volontairement effacés ou renommés pour la mise en ligne de mon code)


<script language="JavaScript" type="text/javascript">
var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
function ControlVersion()
{
	var version;
	var axo;
	var e;
	// NOTE : new ActiveXObject(strFoo) throws an exception if strFoo isn't in the registry
	try {
		// version will be set for 7.X or greater players
		axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
		version = axo.GetVariable("$version");
	} catch (e) {
	}
	if (!version)
	{
		try {
			// version will be set for 6.X players only
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
			
			// installed player is some revision of 6.0
			// GetVariable("$version") crashes for versions 6.0.22 through 6.0.29,
			// so we have to be careful. 
			
			// default to the first public version
			version = "WIN 6,0,21,0";
			// throws if AllowScripAccess does not exist (introduced in 6.0r47)		
			axo.AllowScriptAccess = "always";
			// safe to call for 6.0r47 or greater
			version = axo.GetVariable("$version");
		} catch (e) {
		}
	}
	if (!version)
	{
		try {
			// version will be set for 4.X or 5.X player
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
			version = axo.GetVariable("$version");
		} catch (e) {
		}
	}
	if (!version)
	{
		try {
			// version will be set for 3.X player
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
			version = "WIN 3,0,18,0";
		} catch (e) {
		}
	}
	if (!version)
	{
		try {
			// version will be set for 2.X player
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
			version = "WIN 2,0,0,11";
		} catch (e) {
			version = -1;
		}
	}
	
	return version;
}
// JavaScript helper required to detect Flash Player PlugIn version information
function GetSwfVer(){
	// NS/Opera version >= 3 check for Flash plugin in plugin array
	var flashVer = -1;
	
	if (navigator.plugins != null && navigator.plugins.length > 0) {
		if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
			var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
			var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
			var descArray = flashDescription.split(" ");
			var tempArrayMajor = descArray[2].split(".");			
			var versionMajor = tempArrayMajor[0];
			var versionMinor = tempArrayMajor[1];
			var versionRevision = descArray[3];
			if (versionRevision == "") {
				versionRevision = descArray[4];
			}
			if (versionRevision[0] == "d") {
				versionRevision = versionRevision.substring(1);
			} else if (versionRevision[0] == "r") {
				versionRevision = versionRevision.substring(1);
				if (versionRevision.indexOf("d") > 0) {
					versionRevision = versionRevision.substring(0, versionRevision.indexOf("d"));
				}
			}
			var flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
		}
	}
	// MSN/WebTV 2.6 supports Flash 4
	else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
	// WebTV 2.5 supports Flash 3
	else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
	// older WebTV supports Flash 2
	else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
	else if ( isIE && isWin && !isOpera ) {
		flashVer = ControlVersion();
	}	
	return flashVer;
}
// When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
{
	versionStr = GetSwfVer();
	if (versionStr == -1 ) {
		return false;
	} else if (versionStr != 0) {
		if(isIE && isWin && !isOpera) {
			// Given "WIN 2,0,0,11"
			tempArray         = versionStr.split(" "); 	// ["WIN", "2,0,0,11"]
			tempString        = tempArray[1];			// "2,0,0,11"
			versionArray      = tempString.split(",");	// ['2', '0', '0', '11']
		} else {
			versionArray      = versionStr.split(".");
		}
		var versionMajor      = versionArray[0];
		var versionMinor      = versionArray[1];
		var versionRevision   = versionArray[2];
        	// is the major.revision >= requested major.revision AND the minor version >= requested minor
		if (versionMajor > parseFloat(reqMajorVer)) {
			return true;
		} else if (versionMajor == parseFloat(reqMajorVer)) {
			if (versionMinor > parseFloat(reqMinorVer))
				return true;
			else if (versionMinor == parseFloat(reqMinorVer)) {
				if (versionRevision >= parseFloat(reqRevision))
					return true;
			}
		}
		return false;
	}
}
function AC_AddExtension(src, ext)
{
  if (src.indexOf('?') != -1)
    return src.replace(/\?/, ext+'?'); 
  else
    return src + ext;
}
function AC_Generateobj(objAttrs, params, embedAttrs) 
{ 
  var str = '';
  if (isIE && isWin && !isOpera)
  {
    str += '<object ';
    for (var i in objAttrs)
    {
      str += i + '="' + objAttrs[i] + '" ';
    }
    str += '>';
    for (var i in params)
    {
      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
    }
    str += '</object>';
  }
  else
  {
    str += '<embed ';
    for (var i in embedAttrs)
    {
      str += i + '="' + embedAttrs[i] + '" ';
    }
    str += '> </embed>';
  }
  document.write(str);
}
function AC_FL_RunContent(){
  var ret = 
    AC_GetArgs
    (  arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
     , "application/x-shockwave-flash"
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
function AC_SW_RunContent(){
  var ret = 
    AC_GetArgs
    (  arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
     , null
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
  var ret = new Object();
  ret.embedAttrs = new Object();
  ret.params = new Object();
  ret.objAttrs = new Object();
  for (var i=0; i < args.length; i=i+2){
    var currArg = args[i].toLowerCase();    
    switch (currArg){	
      case "classid":
        break;
      case "pluginspage":
        ret.embedAttrs[args[i]] = args[i+1];
        break;
      case "src":
      case "movie":	
        args[i+1] = AC_AddExtension(args[i+1], ext);
        ret.embedAttrs["src"] = args[i+1];
        ret.params[srcParamName] = args[i+1];
        break;
      case "onafterupdate":
      case "onbeforeupdate":
      case "onblur":
      case "oncellchange":
      case "onclick":
      case "ondblclick":
      case "ondrag":
      case "ondragend":
      case "ondragenter":
      case "ondragleave":
      case "ondragover":
      case "ondrop":
      case "onfinish":
      case "onfocus":
      case "onhelp":
      case "onmousedown":
      case "onmouseup":
      case "onmouseover":
      case "onmousemove":
      case "onmouseout":
      case "onkeypress":
      case "onkeydown":
      case "onkeyup":
      case "onload":
      case "onlosecapture":
      case "onpropertychange":
      case "onreadystatechange":
      case "onrowsdelete":
      case "onrowenter":
      case "onrowexit":
      case "onrowsinserted":
      case "onstart":
      case "onscroll":
      case "onbeforeeditfocus":
      case "onactivate":
      case "onbeforedeactivate":
      case "ondeactivate":
      case "type":
      case "codebase":
      case "id":
        ret.objAttrs[args[i]] = args[i+1];
        break;
      case "width":
      case "height":
      case "align":
      case "vspace": 
      case "hspace":
      case "class":
      case "title":
      case "accesskey":
      case "name":
      case "tabindex":
        ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
        break;
      default:
        ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
    }
  }
  ret.objAttrs["classid"] = classid;
  if (mimeType) ret.embedAttrs["type"] = mimeType;
  return ret;
}
// -->
</script>
</head>
<body>
<div id="conteneur">
	<table cellspacing="10px">
    	<tr>
        	<td><img id="img_bann" src="img_bann.png" alt="menu" /></td>
        	<td>Des images...</td>
        </tr>
    </table>
<div id="bio"><p>Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides.

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.<p></div>
<div id="vide"></div>
<div id="diapo"><div id="center"><script language="JavaScript" type="text/javascript">
	AC_FL_RunContent(
		'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
		'width', '100%',
		'height', '100%',
		'src', 'piecemaker',
		'quality', 'high',
		'pluginspage', 'http://www.adobe.com/go/getflashplayer_de',
		'align', 'middle',
		'play', 'true',
		'loop', 'true',
		'scale', 'noscale',
		'wmode', 'window',
		'devicefont', 'false',
		'id', 'piecemaker',
		'bgcolor', '#ffffff',
		'name', 'piecemaker',
		'menu', 'true',
		'allowFullScreen', 'false',
		'allowScriptAccess','sameDomain',
		'movie', 'piecemaker',
		'salign', ''
		); //end AC code
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="100%" height="100%" id="piecemaker" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="piecemaker.swf" /><param name="quality" value="high" /><param name="scale" value="noscale" /><param name="bgcolor" value="#ffffff" />	<embed src="piecemaker.swf" quality="high" scale="noscale" bgcolor="#ffffff" width="100%" height="100%" name="piecemaker" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_de" />
	</object>
</noscript></div></div>
<div id="actualites">
<table class="table_actu" cellspacing="10" cellpadding="5">
	<tr>
    	<td colspan="2"><span class="titre">--- TITRE ---</span></td>
    </tr>
    <tr>
    	<td>01-07-2012</td>
        <td>- Mise en ligne du site version 3 -</td>
    </tr>
    <tr>
    	<td>07-10-2011</td>
        <td>- Mise en ligne du site version 2 -</td>
    </tr>
    <tr>
    	<td>12-04-2011</td>
        <td>- Mise en ligne du site version 1 -</td>
    </tr>
</table>
</div>
<div id="pied">Copyright © 2011</div>
</div>
</body>



body {
		margin: 0;
		padding: 0;
		background:url(test.jpg) repeat fixed center top #000000;
		}
	
	table {
		background: url(entete.jpg) fixed top center;
		border-bottom:solid 1px black;
		left:50%;
		margin-left:-620px;
		position:fixed;
		border-bottom-color: #FFFFFF;
		z-index:2;
		}
	
	td {
		border:none;
		}
	
	#img_menu {
		width:100px;
		}
	
	#img_bann {
		text-align:center;
		}
		
	#conteneur {
		width:1200px;
		height:1500px;
		border:none;
		margin:auto;
		background:none;
		}
	
	#diapo {
		width:1200px;
		height:545px;
		border:none;
		border-bottom:solid 1px black;
		margin:auto;
		background:none;
		overflow:hidden;
		padding-right:2px;
		}

		
	#diapo {
		width:1200px;
		height:545px;
		border:none;
		border-bottom:solid 1px black;
		margin:auto;
		background:none;
		overflow:hidden;
		padding-right:2px;
		}
		
	#vide {
		width:1200px;
		height:390px;
		border:none;
		margin:auto;
		background:none;
		}
		
	#center {
		width:1200px;
		height:545px;
		border:solid 1px black;
		margin-top:50px;
		background:none;
		vertical-align:middle;
		}
		
	#actualites {
		width:1200px;
		height:200px;
		border:solid 1px black;
		margin:auto;
		margin-top:50px;
		background: url(texture_accueil.png);
		position:absolute;
		z-index:1;
		}
		
	#bio {
		width:1200px;
		height:270px;
		border:none;
		margin:auto;
		margin-top:150px;
		background:none;
		position:fixed;
		color: #FFFFFF;
		}
		
	p {
		padding:2px;
		text-align:justify;
		font-size:20px;
		font-family: "Tekton Pro" ,Verdana, Arial, Helvetica, sans-serif;
		}
		
	.texte {
		text-align:justify;
		 }
		
	.table_actu {
		width:1100px;
		height:195px;
		border:none;
		margin:auto;
		text-align:center;
		background:none;
		position:static;
		color:black;
		}
	
	.table_actu tr td {
		border:solid 2px black;
		font-size:20px;
		background:#FFFFFF;
		}
		
	.titre {
		font-weight:bold;
		}
		
	#pied {
		text-align:center;
		margin:auto;
		width:1200px;
		border:solid 1px black;
		background:#FFFFFF;
		margin-top:275px;
		position:absolute;
		z-index:1;
		}
[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Salut,

Peut être je me trompe mais en stage je me rappel d'un problème similaire. Essaye peut être d'ajouter :

<param name="wmode" value="opaque">


dans ta balise object.

Si c'est ça la solution j't'envoie une pensée Geoffrey Smiley langue
Sujet clos
Aller à