28172 sujets

CSS et mise en forme, CSS3

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 Smiley smile

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]-->
Un petit lien histoire d'illustrer le tout? Tout n'est pas trés clair pour moi.

Cependant (sans avoir regardé la totalité de ton code) ton problème ressemble à ce que l'on encontre lorsque on centre sur X et Y une div avec des marges négatives.

La solution est alors de centrer sa div dans un tabeau (si si) même si les tableaux de mise en forme restes déconseillés, bien utilisés ils ne posent pas de problèmes.

cf un post de Raphael

cdt