28172 sujets

CSS et mise en forme, CSS3

[Résolu]Placement d'une animation flash

Bonjour à tous,

J'ai un soucis avec une animation flash, un menu, que j'ai fait.
Le menu marche très bien, le soucis est son placement sur ma page internet.
Mon site est constitué de 2 parties, une partie forum et une partie site.
Sur le forum j'ai adapté le <div> dans lequel est contenu mon menu et il s'affiche comme je le souhaite, mais sur la partie site, il s'affiche avec un décalage vers le haut.

Pourtant ces 2 parties utilises le même code ( pour l'agencement global de l'affichage ) et la mm feuille de style.


Voici la partie "site" qui pose problème:

<!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 content="text/html; charset=utf-8" http-equiv="content-type" />
    <meta name="Identifier-URL" content="http://localhost/heritage" />
    <meta name="site"           content="http://localhost/heritage" />
    <meta name="copyright" content="Guilde Héritage" />
    <meta name="author"    content="Arnaud Di-Santo" />
    <meta name="generator" content="PSPad" />
    <meta name="Keywords"  content="wow, world of warcraft, garona, guilde, guild, héritage, heritage" />

    <meta name="title"     content="Guilde World Of Warcraft : Héritage" />
    <meta name="subject"     content="" />
    <meta name="Description" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Guilde World Of Warcraft : Héritage</title>
    <link rel="shortcut icon" href="./public/images/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="http://legendesoubliees.nuxit.net/smf/Themes/heritage_theme/style.css?fin11" />
    <link href="./restricted/css/alpha.css" rel="stylesheet"
    type="text/css" />

    <link href="restricted/css/teamspeakdisplay.css" rel="stylesheet"
    type="text/css" />
    <script language="javascript" src="http://legendesoubliees.nuxit.net/smf/Themes/heritage_theme/twPasseFlash.js" type="text/javascript"></script>

     </head>
  <body>
  <div id="content_body">

<div id="header">
  <div class="space">&nbsp;</div><!-- fin space -->
  <div id="perso_2">&nbsp;</div>
  <!-- fin perso_2-->
  <div id="login">
  Salut, arno.<br />
  <div id="menu">

  <script type="text/javascript" language="javascript">
		twPasseFlash('Trucsweb','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','800','116','middle','http://legendesoubliees.nuxit.net/smf/Themes/heritage_theme/menu.swf','high','false','#000','transparent');
	</script>
  </div><!-- fin menu-->
  </div><!-- fin login-->
</div><!-- fin header-->
<div id="content">
<div id="gauche">Les news
</div><!-- fin gauche -->
<div id="droite">
Test</div><!-- fin droite -->
<div id="clear">&nbsp;</div><!-- fin clear -->
    </div><!-- fin content -->
    <div id="copyright">
    Copyright
    </div><!--fin copyright -->
  </div><!-- fin content_body -->

  </body>
</html>


et voici la partie "forum" qui elle marche

<!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" />
	<meta name="description" content="Héritage - Accueil" />
	<meta name="robots" content="noindex, nofollow" />
	<meta name="keywords" content="PHP, MySQL, bulletin, board, free, open, source, smf, simple, machines, forum" />
  <script language="javascript" src="http://legendesoubliees.nuxit.net/smf/Themes/heritage_theme/twPasseFlash.js" type="text/javascript"></script>
  <script language="JavaScript" type="text/javascript" src="http://legendesoubliees.nuxit.net/smf/Themes/default/script.js?fin11"></script>
	<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
		var smf_theme_url = "http://legendesoubliees.nuxit.net/smf/Themes/heritage_theme";
		var smf_images_url = "http://legendesoubliees.nuxit.net/smf/Themes/heritage_theme/images";
		var smf_scripturl = "http://legendesoubliees.nuxit.net/smf/index.php";
		var smf_iso_case_folding = false;
		var smf_charset = "ISO-8859-1";
	// ]]></script>

	<title>Héritage - Accueil</title>
  <link rel="shortcut icon" href="http://legendesoubliees.nuxit.net//public/images/favicon.ico" />
	<link rel="stylesheet" type="text/css" href="http://legendesoubliees.nuxit.net/smf/Themes/heritage_theme/style.css?fin11" />
	<link rel="stylesheet" type="text/css" href="http://legendesoubliees.nuxit.net/smf/Themes/default/print.css?fin11" media="print" />
	<link rel="stylesheet" type="text/css" href="http://legendesoubliees.nuxit.net/restricted/css/alpha.css?fin11" />
	<link rel="help" href="http://legendesoubliees.nuxit.net/smf/index.php?action=help" target="_blank" />
	<link rel="search" href="http://legendesoubliees.nuxit.net/smf/index.php?action=search" />
	<link rel="contents" href="http://legendesoubliees.nuxit.net/smf/index.php" />

	<link rel="alternate" type="application/rss+xml" title="Héritage - RSS" href="http://legendesoubliees.nuxit.net/smf/index.php?type=rss;action=.xml" />
	<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
		var smf_avatarMaxWidth = 140;
		var smf_avatarMaxHeight = 250;
	window.addEventListener("load", smf_avatarResize, false);
	// ]]></script>

	<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
		var current_header = false;

		function shrinkHeader(mode)
		{
			smf_setThemeOption("collapse_header", mode ? 1 : 0, null, "eec9c79460f81808da413c3f47b46d75");
			document.getElementById("upshrink").src = smf_images_url + (mode ? "/upshrink2.gif" : "/upshrink.gif");

			document.getElementById("upshrinkHeader").style.display = mode ? "none" : "";
			document.getElementById("upshrinkHeader2").style.display = mode ? "none" : "";

			current_header = mode;
		}
	// ]]></script>
		<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
			var current_header_ic = false;

			function shrinkHeaderIC(mode)
			{
				smf_setThemeOption("collapse_header_ic", mode ? 1 : 0, null, "eec9c79460f81808da413c3f47b46d75");
				document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

				document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";

				current_header_ic = mode;
			}
		// ]]></script>
</head>
<body>

<div id="content_body">

	<div id="header">
  <div class="space">&nbsp;</div><!-- fin space -->
  <div id="perso_7">&nbsp;</div>
  <!-- fin perso_7-->
  <div id="login">Bonjour arno<br />

  <div id="menu">
  <script type="text/javascript" language="javascript">
		twPasseFlash('Trucsweb','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','800','116','middle','http://legendesoubliees.nuxit.net/smf/Themes/heritage_theme/menu.swf','high','false','#000','transparent');
	</script>
  </div><!-- fin menu-->
  </div><!-- fin login-->
  </div><!-- fin header-->
  <div id="content2" class="horizontal">

LE FORUM 

  </div><!-- fin content -->
	<div id="footer">
		<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
			function smfFooterHighlight(element, value)
			{
				element.src = smf_images_url + "/" + (value ? "h_" : "") + element.id + ".gif";
			}
		// ]]></script>
		<table cellspacing="0" cellpadding="3" border="0" align="center" width="100%">

			<tr>
				<td width="28%" valign="middle" align="right">
					<a href="http://www.mysql.com/" target="_blank"><img id="powered-mysql" src="http://legendesoubliees.nuxit.net/smf/Themes/heritage_theme/images/powered-mysql.gif" alt="Propuls&eacute; par MySQL" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
					<a href="http://www.php.net/" target="_blank"><img id="powered-php" src="http://legendesoubliees.nuxit.net/smf/Themes/heritage_theme/images/powered-php.gif" alt="Propuls&eacute; par PHP" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
				</td>
				<td valign="middle" align="center" style="white-space: nowrap;">
					
		<span class="smalltext" style="display: inline; visibility: visible; font-family: Verdana, Arial, sans-serif;"><a href="http://www.simplemachines.org/" title="Simple Machines Forum" target="_blank">Powered by SMF 1.1.5</a> | 
<a href="http://www.simplemachines.org/about/copyright.php" title="Free Forum Software" target="_blank">SMF &copy; 2006-2008, Simple Machines LLC</a>

		</span><br />

<span class="smalltext">Heritage theme by Maugetar. Based on <a href="http://custom.simplemachines.org/themes/index.php?lemma=731" target="_blank">SC2 theme by Vaun</a>.</span>

				</td>
				<td width="28%" valign="middle" align="left">
					<a href="http://validator.w3.org/check/referer" target="_blank"><img id="valid-xhtml10" src="http://legendesoubliees.nuxit.net/smf/Themes/heritage_theme/images/valid-xhtml10.gif" alt="XHTML 1.0 Transitionnel valide&nbsp;!" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
					<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img id="valid-css" src="http://legendesoubliees.nuxit.net/smf/Themes/heritage_theme/images/valid-css.gif" alt="CSS valide&nbsp;!" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
				</td>

			</tr>
		</table>
		<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
			window.addEventListener("load", smf_codeFix, false);
			function smf_codeFix()
			{
				var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

				for (var i = 0; i < codeFix.length; i++)
				{
					if (codeFix[i].className == "code" && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0))
						codeFix[i].style.overflow = "scroll";
				}
			}
		// ]]></script>
	 <span class="copyright"><a href="http://www.worldofwarcraft.com/" target="_blank">World of Warcraft</a> and <a href="http://www.blizzard.com/" target="_blank">Blizzard Entertainment&reg;</a> are all trademarks or registered trademarks of Blizzard Entertainment in the United States and/or other countries. <br /> These terms and all related materials, logos, and images are copyright &copy; Blizzard Entertainment.  <br />This site is in no way associated with or endorsed by Blizzard Entertainment&reg;.</span>

</div><!-- fin footer -->
</div><!-- fin content_body -->
</body></html>



Et pour finir voici ma feuille de style css



html {
  background: #000000;
  text-align: center;
  vertical-align: middle;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-size: 100%;
  height: 100%;
}
body {
  background: #300000 url('http://legendesoubliees.nuxit.net/public/images/background.png');
  background-repeat : no-repeat;
  background-position : top center;
  font: normal 80%/1em "Arial", Verdana, Courier New, sans-serif;
  margin: 0px;
  padding: 0px;
  border: 0px;
  min-height: 100%;
  text-align: center;
}
img {
  border: none;
}

p {
	margin: 0px;
	padding: 0px;
}
#content_body {
  position: relative;
  width: 850px;
  min-height: 100%;
  text-align: left;
  margin: 0 auto;
  padding: 0px;
  border : 0px;
  color: #cccccc;
  background : transparent url('http://legendesoubliees.nuxit.net/public/images/content.png') repeat-y;
}
#header {
  position: relative;
  width: 850px;
  height: 414px;
  margin: 0px;
  padding: 0px;
  border : 0px;
  background : transparent url('http://legendesoubliees.nuxit.net/public/images/header.png') no-repeat;
}
#login {
  position: relative;
  width: 150px;
  height: 95px;
  margin-top: -113px;
  padding-left: 140px;
  line-height: 1.3em;
  text-align: right;
  border: 0px;
  font: normal 80%/1em "Verdana", Verdana, Courier New, sans-serif;
}
#menu {
  position: relative;
  padding-top: 188px;
  margin-left: -117px;
  border: 0px;
}
#content {
  position: relative;
  width: 795px;
  margin-top: -10px;
  margin-left: 25px;
  margin-right: 10px;
  border: 0px;
  background-image: url('http://localhost/heritage/public/images/sep.gif');
	background-repeat: repeat-y;
}
#content2 {
  position: relative;
  width: 795px;
  margin-top: 0px;
  margin-left: 25px;
  margin-right: 10px;
  border: 0px;
}
#perso_1 {
  position: relative;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/druid.png') no-repeat;
  background-position : top center;
  padding-left: 80px;
  width: 103px;
  height: 116px;
}
#perso_2 {
  position: relative;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/priest.png') no-repeat;
  background-position : top center;
  padding-left: 80px;
  width: 103px;
  height: 116px;
}
#perso_3 {
  position: relative;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/war.png') no-repeat;
  background-position : top center;
  padding-left: 80px;
  width: 103px;
  height: 116px;
}
#perso_4 {
  position: relative;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/mage.png') no-repeat;
  background-position : top center;
  padding-left: 80px;
  width: 103px;
  height: 116px;
}
#perso_5 {
  position: relative;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/shaman.png') no-repeat;
  background-position : top center;
  padding-left: 80px;
  width: 103px;
  height: 116px;
}
#perso_6 {
  position: relative;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/paladin.png') no-repeat;
  background-position : top center;
  padding-left: 80px;
  width: 103px;
  height: 116px;
}
#perso_7 {
  position: relative;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/rogue.png') no-repeat;
  background-position : top center;
  padding-left: 80px;
  width: 103px;
  height: 116px;
}
#perso_8 {
  position: relative;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/hunt.png') no-repeat;
  background-position : top center;
  padding-left: 80px;
  width: 103px;
  height: 116px;
}
#perso_9 {
  position: relative;
  background: transparent url('http://legendesoubliees.nuxit.net/public/images/warlock.png') no-repeat;
  background-position : top center;
  padding-left: 80px;
  width: 103px;
  height: 116px;
}
#droite {
	float: left;
	height: 100%;
	width: 240px;
	margin-left: 10px;
	line-height: 1.3em;
}
#gauche {
	float: left;
	height: 100%;
	width: 535px;
	line-height: 1.1em;
}



Voici aussi le code javascript pour afficher l'animation flash
// JavaScript Document

function twPasseFlash(sNom,sCB,nW,nH,sA,sUrl,sQ,sM,sC,sW) {
// Auteur : Django (Oznog) Blais
// Date : 12 Mai 2006
// Script gratuit des Trucsweb.com
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+sCB+'" width="'+nW+'" height="'+nH+'" align="'+sA+'">\n');
document.write('<param name="allowScriptAccess" value="sameDomain" \>\n');
document.write('<param name="movie" value="'+sUrl+'" \>\n');
document.write('<param name="quality" value="'+sQ+'" \>\n');
document.write('<param name="menu" value="'+sM+'" \>\n');
document.write('<param name="bgcolor" value="'+sC+'" \>\n');
document.write('<param name="wmode" value="'+sW+'" \>\n');
document.write('<embed src="'+sUrl+'" quality="'+sQ+'" menu="'+sM+'" bgcolor="'+sC+'" wmode="'+sW+'" width="'+nW+'" height="'+nH+'" name="'+sNom+'" align="'+sA+'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" \>\n');
document.write('</object>\n');
}



Quelqu'un a t il une idée d'ou peut venir se décalage entre ces 2 pages ?[/i][/i][/i][/i][/i]
Modifié par utsuho (23 Jul 2008 - 00:25)
Salut,

j'ai regardé vite fait la structure de ton site et le premier truc qui m'a interpelé c'est que ton div menu est imbriqué dans ton div login : j'ai commencé avec firebug par virer la position relative du div#login afin que ton menu se place par rapport au top left de ton header et, bien sur, j'ai mis ton menu en position:absolute a 17px de la gauche et a 300px du top et cela semble beaucoup mieux . Perso je mettrais ton #login dans ton #perso_7 après l'avoir agrandi, cela t'éviterais les valeurs négatives de ton margin, je n'ai jamais trouvé ca super mais a toi de voir . J'espère que ça t'aidera ....
Sujet clos
Aller à