28172 sujets

CSS et mise en forme, CSS3

Problème pour centrer correctement

Bonjour j'essaye de centrer mes animation Flash avec du CSS sauf que sur certaines résolutions le scroll ne remonte pas assez ! 



body {
	color: #000000;
	background: #000000;
}



#horizon {
color : white;
text-align : center;
position : absolute;
top : 10%;
left : 0;
width : 100%;
height : 100%;
}
#container {
font-family : Verdana, Geneva, Arial, sans-serif;
background-image : url(Lateral.gif);
background-repeat : repeat-x;
position : absolute;
top : -50px;
width : 100%;
height : 100%;
visibility : visible;
}
#foot {
background-color : #c17021;
position : absolute;
width : 100%;
height : 100%;
visibility : visible;
}
#flashcontent {
font-family : Verdana, Geneva, Arial, sans-serif;
margin-left : -500px;
position : absolute;
left : 50%;
width : 1000px;
visibility : visible;
}


L4animation intégrée fait 1000 X 600 px pour information.

Merci de votre aide et bon weekend à tous Smiley smile
Administrateur
Hello,

Tu parles de centrage horizontal ou vertical ?

Je présume qu'il s'agit de centrage vertical. Dans ce cas, même si cela fonctionne "à peu près", je te déconseille vivement l'usage de bidouilles à l'aide de positions absolues qui n'apportent quasiment que des soucis car l'on ne maîtrise pas le reste de la page.

Il existe une solution extrêmement simple : jouer avec la déclaration vertical-align : middle sur les éléments de rendu "table-cell".

Certains éléments possèdent ce rendu par défaut : les cellules de tableau. Pour les autres éléments, il "suffit" de leur appliquer un display: table-cell. Cela fonctionne parfaitement, sauf qu'Internet Explorer ne reconnaît cette valeur qu'à partir d'IE8.

A toi de voir, mais actuellement tu te compliques la vie.
Je te conseille de refaire ton css, mettre le corps de ta page avec margin:0 auto et après tu peux tout centrer.. mais il faut voir..

il est ou ton site ?
Administrateur
alesson a écrit :
Je te conseille de refaire ton css, mettre le corps de ta page avec margin:0 auto et après tu peux tout centrer.. mais il faut voir..

Ce que tu dis fonctionne pour le centrage horizontal, mais est-ce bien ce que veux obtenir stevefigueras ? Smiley cligne
Alors mon souci persiste néanmoins

Voici mon code css modifié et nettoyé 


body {
	margin: 0
	color: #000000;
	background: #000000;
}



#horizon {
color : white;
text-align : center;
width : 100%;
height : 100%;
}

#container {
background-image : url(Lateral.gif);
background-repeat : repeat-x;
vertical-align:middle
width : 100%;
height : 100%;
visibility : visible;
}

#flashcontent {
vertical-align:middle
visibility : visible;
}


Et au cas ou voici le Html 
<div id="horizon">
<div id="container">
<div id="flashcontent">   
  <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="600"><param name="movie" value="index.swf" />

<object type="application/x-shockwave-flash" data="index.swf" width="1000" height="600"><!--<![endif]-->
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="swfobject/noflash.jpg" alt="Obtenez Adobe Flash player" /></a></p>
<!--[if !IE]>--></object> <!--<![endif]--></object></div>

</div>
</div>


Mais toujours pas le résultat escompté c'est à dire un aligement vertical (le horizontal c'ets ok dans cet exemple)

Merci de votre aide et bonne fin de weekend à tous !
Administrateur
Hello,

stevefigueras a écrit :
Mais toujours pas le résultat escompté c'est à dire un aligement vertical (le horizontal c'ets ok dans cet exemple)

Oui forcément :
1- tu n'as pas fermé ta déclaration vertical-align:middle par un séparateur ";"
2- vertical-align:middle ne fonctionne que sur des éléments de rendu "table" ou "table-cell", ce qui n'est pas le cas de #container (revoir ma première intervention pour ce point Smiley cligne )
Sujet clos
Aller à