Aligner avec top et bottom à la fois

Bonjour à tous,
J'explique mon problème.

J'ai une page qui est en position:absolute, avec trois div à l'intérieur.

Le premier DIV :

<div id="tete" style="width:1000px; position:absolute; top:0px; height:20px;">
</div>

Le deuxième DIV :

<div id="pied" style="width:1000px; position:absolute; top:20px; bottom:25px;">  
</div>

Le troisième DIV :

<div id="pied" style="width:1000px; position:absolute; bottom:0px; height:25px;">  
</div>

Mon premier et mon troisième div sont placé comme il faut et avec la taille qu'il faut.
Mais les problèmes arrivent avec mon deuxième DIV :
Sous Firefox, il prend bien toute la place entre le premier DIV et le troisième DIV.
Sous Internet Explorer 6, il est bien aligné en haut, mais il ne prend pas toute la hauteur pour rejoindre le troisième DIV.
Apercu du problème :
http://img148.imageshack.us/img148/5899/sanstitresiw7.jpg

J'ai lu sur le net qu'internet Explorer n'ignorait le bottom, s'il y avait un top, ce qui est le cas dans mon deuxième DIV.

Donc ma question est la suivante :
Existe-t-il une parade pour éviter ce problème sous Internet Explorer ?

Salut,
comme ça, à première vue, deux petites choses.
D'abord pour positionner tes div dedans ta page n'a pas besoin d'être elle-même en absolute, relative suffit, mais bon, ça c'est un détail.
Le truc c'est que, si tu nous livres ton code exact, tu n'attribues pas de hauteur au div central, du coup, aucune raison qu'il s'étende majestueusement jusqu'au suivant, là, ce serait FF qui prend des libertés, ce qui m'épate, en général, il est plutôt rigoureux sur le sujet...

have swing

virtualgadjo a écrit :

Le truc c'est que, si tu nous livres ton code exact, tu n'attribues pas de hauteur au div central, du coup, aucune raison qu'il s'étende majestueusement jusqu'au suivant, là, ce serait FF qui prend des libertés, ce qui m'épate, en général, il est plutôt rigoureux sur le sujet...

Je n'ai pas besoin de définir la hauteur de mon div, vu que je lui dis que le haut de mon div 2 est à 20px (top:20px) et le bas de mon div 2 est à 25px (bottom:25px)

Bonjour,
Ta technique me parait bien étrange. Partant du principe que les boites se positionnent en absolute sur le modèle le l'abscisse et de l'ordonnée je ne vois pas comment ta div2 peut avoir 2 pts de référence. On doit choisir entre top et bottom ; left et right. Ca reste binaire comme positionnement. Mais peut-être une subtilité CSS m'échappe.
Modifié par zzzazzz (22 Mar 2007 - 10:34)

Salut,

Le plus simple c'est de mettre le même background à ton conteneur qu'à ton bloc au centre, sinon tu peux aussi jouer avec height: 100% et modification de l'ordre d'affichage dans ton code.

<div id="conteneur" style="width:500px; position:relative; margin: auto; height:500px;border: 1px solid black;">

<div id="centre" style="width:500px; position:absolute; top:0px; bottom:25px;background: blue;height: 100%">  
<div id="tete" style="width:500px; position:absolute; top:0px; height:20px; background: red;">

</div>
</div>
<div id="pied" style="width:500px; position:absolute; bottom:0px; height:25px;background: yellow;">  

</div>

</div>

zzzazzz a écrit :
On doit choisir entre top et bottom ; left et right.

En théorie, non.

zzzazzz a écrit :
Mais peut-être une subtilité CSS m'échappe.

En effet. Le positionnement absolu permet très bien ce genre de choses. Après, c'est le support dans les navigateurs qui pose problème. En l'occurrence, on n'utilise presque jamais cette possibilité car elle n'est pas supportée par IE (peut-être par IE7, mais je ne crois pas).

De plus, ce type de mise en page est problématique dans le cas où le contenu de div#centre dépasserait la hauteur de ce bloc. Les barres de défilement internes (overflow: auto) étant une solution très imparfaite, peu ergonomique, posant des problèmes d'accessibilité, etc.

Florent V. a écrit :

Les barres de défilement internes (overflow: auto) étant une solution très imparfaite, peu ergonomique, posant des problèmes d'accessibilité, etc.

Pourquoi es-ce imparfait ?
Quel genre de problèmes d'accessibilités ?

columbo_ a écrit :
Pourquoi es-ce imparfait ?

Ergonomie : la molette de la souris n'est plus active (ou bien il faut cliquer dans la div en question pour pouvoir utiliser la molette), ce qui déstabilise l'utilisateur. Le défilement au clavier (utilisé par certains pour lire des pages un peu longue sans garder tout le temps la main sur la souris...) n'est pas toujours possible. Les liens internes (ancres) ne sont pas toujours utilisables.

Globalement, les navigateurs, avec certes des variations plus ou moins importantes, ont plus de mal à utiliser le scroll d'un bloc donné que le scroll «naturel» du navigateur.

Il vaut mieux, autant que possible, garder la barre de défilement du navigateur comme mode de navigation dans la page.

columbo_ a écrit :
Quel genre de problèmes d'accessibilités ?

Avec IE6, il me semble que les barres de défilement internes des div et autres conteneurs de type bloc ne sont pas utilisables au clavier. Il faut obligatoirement utiliser la souris.
(En fait, après test, il s'avère qu'IE6 ne donne pas le focus à un bloc en overflow: auto lors de la navigation au clavier. Si le bloc contient au moins un lien, on pourra donner le focus au lien et ainsi utiliser le clavier pour utiliser la barre de défilement. Si pas de lien ou autre élément susceptible de prendre le focus, pas de défilement possible.


Bref, je conseille d'éviter autant que possible une utilisation des barres de défilement internes, surtout de manière massive ou pour constituer le principal mode de navigation dans la page.


Pour avoir des éléments fixes sur une page, il y a le positionnement fixe.

Florent V. a écrit :
la molette de la souris n'est plus active (ou bien il faut cliquer dans la div en question pour pouvoir utiliser la molette)

Ah tiens, pas sur mac!