<Div> et posionnements

dj_ouf · Langue vivante Nombre de messages: 518 Date d'inscription: 10/01/2005

Salouti!

Bon ca fait un ptit moment que je me suis à jour aux standards xhtml/css2 (adios les table,td,tr pour les mises en page et vive les div^^), mais voila j'ai un soucis au niveau de l'alignement vertical des boites div..

En horizontal ya pas de soucis, j'utilise l'astuce "margin-left + margin-right: auto" pour centrer (+ 'text-align: center' pour IE), mais verticalement y'a pas de propriété pour ca.

J'ai vu qu'on pouvait simuler la fenetre du navigateur à une cellule de tableau pour pouvoir utiliser 'vertical-align: middle;" mais ca me plait pas du tout.

Vous connaissez pas un moyen pratique pour faire ça?

Cyril

Code:

<DOCTYPE>
<html>
<head>
<meta>
<title><Div> et posionnements</title>
<style>
#contenu { position:absolute; width:700px; left:50; top:50; height:500px; text-align: left;}
#bas { position:absolute; width:500px; left:150; height:30px; bottom:0px;}
#milieu {position:absolute; left: 50%; top: 50%; width: 500px; height: 100px;
margin-left: -250px; /* moitié de la largeur */
margin-top: -50px; /* moitié de la hauteur */
}
</style>
</head>

<body>
<div>
<div>haut</div>
<div>
<div>milieu</div>
<div>bas</div>
<p>contenu</p>
<p>contenu</p>
<p>contenu</p>
<p>contenu</p>
<p>contenu</p>
</div>
</div>
</body>
</html>

Salut DJ_OUF, essai avec le code ci-dessus, cela devrait fonctionner.

_________________
Cyril alias l'ancien

***Les paroles s'envolent, l'encre laisse une trace***

dj_ouf · Langue vivante Nombre de messages: 518 Date d'inscription: 10/01/2005

yop

Ahh sympa ton code je l'ai testé!

j'avais vu cette astuce d'utiliser des marges négative sur un site de css, mais j'été pas convaincu, mais finalement ce doit être la meilleure solution actuelle...

thx, je vais l'adapter à mon code

dj_ouf · Langue vivante Nombre de messages: 518 Date d'inscription: 10/01/2005

Je suis quand même étonné que choub || mikael n'est pas donné leurs avis... histoire d'élargir le point de vue, mais il n'ont pe tout simplement pas encore lu le post

MichaeL · Langue vivante Nombre de messages: 673 Date d'inscription: 17/11/2004

La réponse de Cyril etait pas mal, c'est pour ça que j'ai rien rajouté Smile

Effectivement le meilleur moyen de centrer verticalement c'est d'utiliser les marges négatives. C'est le seul moyen "naturel", et encore il ne l'est pas totalement puisque tu doit mettre en marge des valeurs calculées... Sinon, autre technique qui serait la mienne, tu fait un moteur javascript qui est capable de calculer les dimension des conteneurs et leur contenus afin de calculer les marges et de leur donner la bonne valeur pour centrer verticalement. Pour plus d'information, visite l'excellent site (qui a sûrement du s'inspirer de precieuses infos de notre forum)

http://forum.alsacreations.com/

Bien à vous, et puisse le Seigneur vous faire faire du code élégant.

_________________
MichaeL
mangez des pommes