Corps extensible en hauteur, entre header et footer

Bonjour à tous!

Je suis en train de faire un graphisme pour un site web, j'ai donc utilisé le CSS pour positionner tout le bazar. Et comme vous l'aurez deviné, j'ai rencontré un problème que je n'arrive pas à résoudre .

Mon graphisme se compose en fait d'un header et d'un footer, entre lesquels se trouvent le menu et le corps. Ces deux blocs sont censés être extensibles en hauteur, afin que le graphisme occupe toute la hauteur de la page, quelle que soit la résolution du visiteur.

J'obtiens un résultat convaincant avec Firefox (en utilisant le positionnement absolu), mais naturellement, ça ne va pas du tout avec Internet Explorer. J'ai essayé divers autres méthodes (flottants, padding), sans succès.

Mais un bon code vaut mieux qu'on long discours:

body
{
width: 850px;
margin: auto;
height: 100%;
background-color: silver;
}

#header
{
width: 850px;
height: 119px;
background-image: url("images/graphisme/header.jpg");
}

#header_bas
{
width: 850px;
height: 36px;
background-image: url("images/graphisme/header_low.jpg");
background-repeat: no-repeat;
background-position: right;
}


#menu
{
float: left;
width: 138px;
position: absolute;
top: 155px;
bottom: 0;
background-image: url("images/graphisme/menu.jpg");
}

#corps
{
padding: 10px;
margin-left: 138px;
width: 692px;
position: absolute;
top: 155px;
bottom: 31px;
background-image: url("images/graphisme/corps.jpg");
background-repeat: no-repeat;
overflow: auto;
}

#footer
{
width: 850px;
height: 31px;
background-image: url("images/graphisme/footer.jpg");
position: absolute;
bottom: 0;
}

Un aperçu du résultat par ici.

Merci d'avance à tous ceux qui pouront m'apporter leur aide!

Ah tiens, une mise en page anti-ergonomique avec barre de défilement interne, ça faisait longtemps. (Où donc est le smiley qui veut dire «j'suis blasé...» ?)

Plus sérieusement, ce que tu veux réaliser est :
- difficile techniquement à cause des limitations d'Internet Explorer (l'utilisation que tu fais du positionnement absolu pour dimensionner des blocs est tout à fait valide, mais pas implémentée par IE) ;
- dommageable aussi bien du point de vue de l'ergonomie que de l'accessibilité du site.

Pour ces deux raisons, je te conseilles fortement de revoir ton design. Même si tu arrivais à réaliser ce que tu souhaites, ça serait toujours :
- catastrophique en 800x600 (encore facilement 10% des utilisateurs) ;
- pas génial en 1024x768 (le bandeau mange une bonne partie de l'espace disponible, donc autant de place en moins pour le contenu) ;
- pas terrible niveau ergonomie (en navigation à la souris, la molette n'est pas active sur tout le document mais uniquement sur le bloc qui a la barre de défilement interne) ;
- pas terrible niveau accessibilité (en navigation au clavier, impossible de faire défiler le contenu avec certains navigateurs).

Bref, vraiment quelque chose à proscrire.

Salut

http://css.alsacreations.com/modeles/modele11.htm

Tu as utilisé ça ?

Vince71 a écrit :
http://css.alsacreations.com/modeles/modele11.htm

Va falloir qu'on vire ces machins affreux, un de ces quatre.

Bon, suivant ton avis Florent, je pense que je vais essayer autre chose.
Je pourrais faire en sorte que le menu et le corps s'étendent en fonction du contenu, et on pourrait faire défiler toute la page, header et menu compris.
L'inconvénient: la disparition du menu lorsqu'on scroll justement, et toute la colonne sous le menu sera vide.

Pensez-vous que ce soit une bonne idée?

Un menu horizontal serait peut-être plus judicieux dans ce cas d'ailleurs, mais vu la quantité de lien, ça risque de ne pas être faisable.

> Vince71 : Je n 'ai pas utilisé ce modèle, j'avais décidé comment devrait s'afficher ma page avant de commencer (logique remarquez) puis je me suis débrouillé avec les propriétés CSS que je connaissais pour obtenir ce que j'attendais.

Salut,

Quentin71 a écrit :
Bon, suivant ton avis Florent, je pense que je vais essayer autre chose.
Je pourrais faire en sorte que le menu et le corps s'étendent en fonction du contenu, et on pourrait faire défiler toute la page, header et menu compris.
L'inconvénient: la disparition du menu lorsqu'on scroll justement, et toute la colonne sous le menu sera vide.

Pensez-vous que ce soit une bonne idée?

Nos claviers d'ordinateurs sont intelligemment dotés de touches "origine (home)", "fin (end)", "page précédente (page up)" et "page suivante (page down)". Pourquoi ne pas faire confiance à ces outils très fiables pour avoir accès très simplement aux zones de pages souhaitées, qu'il s'agisse du contenu ou de la navigation ?
Pourquoi réduire la surface utile par de la navigation qui ne sert qu'entre la lecture de différents contenu, surtout en résolution faibles ? Il ne faut pas oublier qu'un site internet présente un contenu, et que la navigation n'est là qu'en raison d'une nécessité du média ! La navigation doit donc très logiquement s'effacer face au contenu.