Problème background-image et position:absolute

Bonjour à tous, j'ai problème que je ne comprends pas pour le nouveau design de mon site.

En gros, j'ai une image de fond d'un div qui ne s'affiche pas car un div à l'intérieur de ce dernier est en position: absolute.

Comme un pti exemple vaut mieux qu'un long discours, j'ai réduis le problème a un exemple tout bête

voici ce que j'obtiens lorsque je laisse la ligne position: absolute de mon div#body :
http://www.vincentdieltiens.be/testcss.html
l'image de fond de #background n'est pas affichée, alors qu'elle devrait apparaitre dans le haut de la page...

et voici ce que j'obtiens quand je commente la ligne position: absolute de mon div#body :
http://www.vincentdieltiens.be/testcss2.html
L'image de #background est correctement affichée, mais évidement mon div #body n'est plus du tout centré verticalement

D'avance, merci pour votre aide
Modifié par and1hotsauce (09 Dec 2008 - 23:50)

Bonjour,

Je crois que tu n'as pas compris comment fonctionne le positionnement absolu et quelles sont ses caractéristiques. Une petite révision s'impose.

and1hotsauce a écrit :
l'image de fond de #background n'est pas affichée, alors qu'elle devrait apparaitre dans le haut de la page...

Oh, l'image de fond s'affiche bien. Sur toute la hauteur de #background, soit environ zéro pixels, avec une précision à zéro pixels près. (Pour information, Firebug donne les dimensions des blocs dans l'onglet qui va bien. À garder sous le coude.)

and1hotsauce a écrit :
L'image de #background est correctement affichée, mais évidement mon div #body n'est plus du tout centré verticalement

Ah ben non. La faute à cette marge négative dont on voit bien que c'est pas une bonne chose, ça cache des contenus qu'on ne peut plus consulter, bouh. Pour centrer un site verticalement, on n'utilise pas le positionnement absolu (surtout si on ne sait pas l'utiliser , mais même si... ). On utiliser du display:table-cell, et si besoin (compatibilité IE 6-7) un tableau de mise en page. Eh oui.

À retenir:
- centrage vertical avec le positionnement absolu = pas bien;
- centrage vertical avec display: table-cell = bien (mais pas compatible IE 6-7);
- centrage vertical avec un tableau de mise en page = moindre mal.

À toi de choisir 2 ou 3, mais pas 1.

Et un peu de lecture pour la route:
http://openweb.eu.org/articles/initiation_absolue
http://web.covertprestige.info/test/39-centrage-bloc-vertical-horizontal.html

Bonne continuation.