Bonjour à tous mon objectif est de placer un SWF dans un DIV et au dessus et au dessous de ce div 2 autre DIV soit un header et un footer.
Je souhaite que mon SWF reste parfaitement centrée en X et Y ce que mon code réalise déjà.
Cependant lorsque que je place une barre au dessus du DIV quand je réduis la fenêtre la scroll bar remonte uniquement jusqu'au bord de la div qui contient le SWF et non jusqu'à la barre du haut !
PB1 : LA scroll bar ne prend pas en compte la DIV navigation
PB2 : Comment étendre la hauteur de la DIV pour qu'elle occupe l'espace libre en fonction de la résolution ?
Merci de votre aide à tous et bonne soirée
Voici mon Html :
Et voici le CSS
Je souhaite que mon SWF reste parfaitement centrée en X et Y ce que mon code réalise déjà.
Cependant lorsque que je place une barre au dessus du DIV quand je réduis la fenêtre la scroll bar remonte uniquement jusqu'au bord de la div qui contient le SWF et non jusqu'à la barre du haut !
PB1 : LA scroll bar ne prend pas en compte la DIV navigation
PB2 : Comment étendre la hauteur de la DIV pour qu'elle occupe l'espace libre en fonction de la résolution ?
Merci de votre aide à tous et bonne soirée
Voici mon Html :
<div id="navigation_pri">
<ul>
<li class="cur"><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/journal">Journal</a></li>
<li><a href="/equipment">Equipment</a></li>
<li><a href="/sponsors">Sponsors</a></li>
<li><a href="/contact">Contact</a></li>
<li id="nav_sponsor"><a href="/sponsors"><img src="/assets/images/site/sponsors/landrover_header.png" alt="Land Rover logo" width="67" height="35" /> Supported by Land Rover</a></li>
</ul>
</div> <!-- // #navigation_pri -->
<div id="container">
<div id="inner">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="600" id="mfc">
<param name="movie" value="index_fr.swf" />
<param name="wmode" value="opaque" />
<param name="allowfullscreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="index_fr.swf" width="1000" height="600">
<param name="wmode" value="opaque" />
<param name="allowfullscreen" value="true" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
Et voici le CSS
/* -- Page styling, unrelated to centering ----- */
body {
margin: 0; /* to avoid margins */
text-align: center; /* to correct the centering IE bug*/
background-color:#C0BBB8;
}
/* 8.NAVIGATION
---------------------------------------------------------------------- */
div#navigation_pri { position:absolute; top:0; left:0; width:100%; background:rgba(0,0,0,0.5); font-family:"ff-din-web-1","ff-din-web-2",Helvetica,serif; color:#fff; }
div#navigation_pri ul { list-style:none; margin:0 auto; width:940px; font-size:1.15em; line-height:1em; text-transform:uppercase; position:relative; }
div#navigation_pri ul li { float:left; margin:0; }
div#navigation_pri ul li a { text-decoration:none; color:#fff; display:block; padding:20px 15px; }
div#navigation_pri ul li a:hover,
div#navigation_pri ul li a:focus { text-decoration:underline; }
div#navigation_pri ul li.cur a { color:#ffffcc; background:rgba(0,0,0,0.3); }
div#navigation_pri ul li:first-child a { padding-left:0; }
.home div#navigation_pri ul li:first-child a { padding-left:15px; }
div#navigation_pri ul li#nav_sponsor { position:absolute; right:0; top:14px; font-size:0.69em; line-height:1.4em; width:165px; text-align:right; }
div#navigation_pri ul li#nav_sponsor a { font-weight:normal; padding:0; display:inline; }
div#navigation_pri ul li#nav_sponsor a img { float:right; padding:0 0 0 15px; position:relative; top:-4px; }
#flashcontent {
margin-left: auto;
margin-right: auto;
width: 1000px; /* you must change this number to the width of your flash movie in pixels */
text-align: left; /* to realign your text */
}
/* -- Code for vertical centering ----- */
* {
margin: 0;
padding: 0;
}
/* macs won't see this! \*/
html, body {
height:100%;
width:100%;
}
/* END mac */
#outer {
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#container {
display:table-cell;
vertical-align:middle;
}
#inner {
text-align: center;
margin-left:auto;
margin-right:auto;
}
</style>
<!--[if IE ]>
<style type="text/css">
#container {
height: 1px; /* required for IE to properly center vertically */
position:relative;
top:50%
}
#inner {
position:relative;
top:-50%;
}
</style>
<![endif]-->