Mise en page complexe

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Mise en page complexe

Pato el canardo

Bonjour à tous
Je suis en train de développer un truc pour un intranet (IE6/7) et je me retrouve face à un petit problème. J'aimerais obtenir une mise en page de cette sorte:

+--------------------------------------------------------+ << haut d'affichage
| |
| taille fixe pour le logo |
| |
+--------------------------------------------------------+
| |
| taille variable pour le corps |
| |
| |
| |
| |
| |
+--------------------------------------------------------+
| |
| taille fixe pour le footer |
| |
+--------------------------------------------------------+ << bas d'affichage

avec donc le logo tout en haut et le footer tout en bas. Le but étant que le corps s'adapte à l'espace contenu entre les deux... Et qu'il soit possible de scroller si nécessaire.
J'ai bien obtenu le bon résultat sous FF, mais impossible sous IE. En effet, sous IE6, lorsqu'on fixe le positionnement en "top", il ignore le "bottom"... Du coup, le corps ne s'étire pas correctement...

Des idées ?

EDIT: voilà ce que j'ai déjà:

Code :

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test de mise en page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
*, html, body { margin: 0; padding: 0}
html, body {height: 100%;}
#top {
background-color: red;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
height: 100px;
}
#middle {
background-color: blue;
position: absolute;
width: 100%;
z-index: 1;
top: 100px;
bottom: 25px;
overflow: auto;
}
#bottom {
background-color: yellow;
position: absolute;
bottom: 0;
width: 100%;
z-index: 2;
height: 25px;
}
</style>
</head>
<body>
<div id="top">header</div>
<div id="middle">
<div id="content">
test first<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test last<br />
</div>
</div>
<div id="bottom">footer</div>
</body>
</html>

Message édité par Pato el canardo le 04-07-2007 à 09:17:22

Publicité

cgo2

Dum spiro spero

Et pourquoi tu veux absolument utiliser le positionnement absolu ?

---------------
When it's from Finland it's good. - Mon blog

Pato el canardo

je ne veux pas absolument l'utiliser, seulement, je n'ai pas trouvé d'autre moyen d'obtenir ce genre de mise en page autrement

cgo2

Dum spiro spero

Bon, que je comprenne bien...

Mettre un header en taille fixe, du contenu, et un footer en taille fixe ça ne demande rien d'autre que de fixer la hauteur (height) du header et du footer, soit 2 lignes de CSS. Rien de "complexe" là dedans à première vue.

Y a-t-il autre chose que tu veux faire et dont tu n'aurais pas parlé et/ou que je n'aurais pas saisi ?

---------------
When it's from Finland it's good. - Mon blog

Pato el canardo

le problème vient du corps de la page. Il doit s'étendre entre le header et le footer, quelle que soit la hauteur de la page (donc la résolution). Et il doit lorsque que le contenu du corps ne tient pas entièrement à l'écran, il doit être possible de scroller uniquement le corps de la page (donc en gardant le header et le footer fixes).

ça marche comme indiqué sur FF, mais pas sous IE6

EDIT: Le but étant de ne pas avoir de scroll de la page générale mais juste du corps, afin de courvir tout l'écran en permanence

Message édité par Pato el canardo le 04-07-2007 à 11:50:58

cgo2

Dum spiro spero

D'accord, c'est bien ce que je pensais, en fait tu veux avoir un footer qui reste en permanance en bas de la fenêtre du navigateur ? Si c'est ça, c'est impossible (avec IE en tous cas).

---------------
When it's from Finland it's good. - Mon blog

FORUM HardWare.fr

Programmation

HTML/CSS

Mise en page complexe

Sujets relatifs
[ACCESS] PB requete Mise a jour	interdire mise en cache css
comment changer juste un élement d'une page sans tout recharger	inserer une image automatiquement sur une page web
afficher balise html sur page html ?	[Ajax] Traitement de l'ajax dans une page fille
Conflit entre deux js dans une page HTML (inclure plusieurs js)	Lien page réduite
Mettre un site en page de démarrage	Requête complexe : probable jointure externe
Plus de sujets relatifs à : Mise en page complexe

Page générée en 0.064 secondes