Les divs, leur positionnement en css et l'overflow

Ca fait maintenant 2 jours que je m'arrache les cheveux pour faire ma première page html utilisant une mise en page avec des div et du css.

En faite, je ne sais même pas si ce que j'essaye de faire et possible ou pas.

J'aurais bien besoin d'un coup de main.

Voici le résultat que j'aimerais avoir :

C'est-à-dire 1 bannière, 1 menu à gauche, 1 menu à droite, 1 pied de page toujours sur les côtés du navigateur et une zone centrale qui occupe le reste de la fenêtre avec un ascensseur si besoin.

J'ai réussi à positionner la bannière, les menus et le pied de page grâce à la position absolue. J'ai également réussi à définir la zone centrale en lui mettant des marges pour ne pas écrire sur ou sous les autres éléments.

Mais j'ai un soucis avec l'ascensseur de la zone principale.
Si j'écris plus de texte que la hauteur de la fenêtre me le permet, le texte continu par delà le pied de page.
Voir la page internet ici

Merci de m'aider car là je suis désespéré.
Modifié par BugsByte (28 Oct 2006 - 16:26)

Hello et bienvenue ici,

Comme tu dois t'en douter que la grande majorité des sujets ici (voire tous) traitent de problèmes et ont "besoin d'aide".

Ton sujet va donc malheureusement vite se perdre dans la masse, tout simplement parce que tu ne donnes pas assez de précision dans ton titre

Petit rappel des règles :

a écrit :
Veuillez donner un titre de sujet évocateur lorsque vous en rédigez un nouveau, et non pas simplement 'Question', 'HELP', 'Problème!' ou 'URGENT!!!!'. Retenez ceci : à question bien posée, réponse vite trouvée.

Modifié par Raphael (28 Oct 2006 - 16:04)

Je viens de modifier le sujet.

Merci

BugsByte a écrit :
Mais j'ai un soucis avec l'ascensseur de la zone principale.

Moui, en fait tu as un problème avec la zone principale elle-même, pas forcément avec son ascenseur.

Comment ce bloc est-il dimensionné ?

Comme c'est un élément de type bloc, il prend 100% de la largeur de son parent (body, il me semble). Les marges supérieure et latérales permettent de le « réduire » en largeur et de le positionner en hauteur. Bon. Mais comment la hauteur du bloc est-elle déterminée ? Comme aucune hauteur ou hauteur minimale n'est précisée, la hauteur du bloc dépendra de la hauteur du contenu.

Peu de contenu : le bloc ne va pas jusqu'en bas.
Pile la bonne quantité de contenu (pour une taille de texte précise, une police de caractères précise et une résolution précise... pfiou, ça fait beaucoup de paramètres) : le bloc s'arrête juste en dessous du pied de page.
Un contenu plus long : le bloc continu à s'étendre, et « sort » de la page, ce qui est le comportement normal d'un élément positionné en absolu.

Ben voilà, pas de bug ; tout marche bien, pas de souci.


Plus sérieusement, le rendu voulu est assez difficile à obtenir. Outre le fait qu'il n'est pas forcément très ergonomique (les barres de défilement à l'intérieur de la page sont moins efficaces, ergonomiquement parlant, pour toutes sortes de raison, que la barre de défilement générale de la page), il est surtout difficile à obtenir avec Internet Explorer 6 (et peut-être le 7 également, à vérifier), à cause du support partiel du positionnement absolu.

Dans l'idéal, on ferait ainsi :

#centre {
	position: absolute;
	left: 250px;
	right: 150px;
	top: 100px;
	bottom: 30px;
}

Et le tour est joué.

Il faut voir comment c'est supporté sur les différents navigateurs. On peut déjà faire une croix sur IE 6 et inférieurs, à voir pour IE7. À priori, ça devrait être bon pour Firefox, Opera, Safari et Konqueror... du moins pour les versions récentes.

Si le positionnement absolu est bien supporté dans IE7, on peut envisager une dégradation gracieuse pour IE6 et inférieurs, via l'utilisation des commentaires conditionnels.


Sinon, il existe des moyens sans passer par le positionnement absolu, mais à ma connaissance il s'agit surtout de bricolages moyennement intéressants... pour ma part, c'est le genre de cas où je trouve plus pertinent de ne pas utiliser un bloc avec barre de défilement interne, mais d'utiliser la barre de défilement globale.

Merci mpop,

J'avais en effet testé un truc du genre mais j'avais omis la ligne "position: absolute;" dans mon style pour le centre.

Avec cette modif, c'est exactement ce que je cherchais à faire.
Les tests avec Firefox sont concluant mais hélàs pas avec IE.

Je vais donc être obligé de revenir à une solution où les barres de défilement seront à l'extérieures.

Merci en tout cas de ton aide.
Elle m'a été très précieuse pour comprendre le fonctionnement des css.