[CSS] Header en px, main en % scrollable

cedricpc · le 6 février 2005

Bonsoir,

Cela fait déjà plus d'une heure que je cherche -sur google, alsacréation... par moi même, j'en parle même pas- comment avoir un header de 110px (la taille de mon logo) une main d'environ 80% de l'espace de la fenêtre restante et un footer en auto de hauteur sans avoir un(e) ... d'ascenseur dans le body et le bas couper ?

Voilà le code que j'ai pour le moment :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<!--
html, body { background: #CCCCCC url("images/bg.jpg") fixed repeat-x top; padding: 0; margin: 0; }
div#cont {
background-color: #0099FF; border-top: #0066FF dotted 1px; border-left: #0066FF dotted 1px;
border-right: #0000FF dotted 1px; border-bottom: #0000FF dotted 1px; padding: 2px; width: 90%;
height: 90%; margin: 5%;
}
div#cont div#head {
background: #000000 url('images/logo.jpg') no-repeat center; border: 1px solid #0066FF;
border-bottom: 2px solid #0000FF; border-right: 2px solid #0000FF; height: 110px;
}
div#cont div#main {
background: #CCCCCC url('images/bg1.jpg') repeat-y center; padding: 2px; margin: 2px 0;
border: 1px solid #0066FF; border-bottom: 2px solid #0000FF; border-right: 2px solid #0000FF;
height: 70%; overflow: auto;
}
div#cont div#foot {
background: #E4E4E4 repeat-y center; padding: 2px; text-align: center; border: 1px solid #0066FF;
border-bottom: 2px solid #0000FF; border-right: 2px solid #0000FF; height: auto;
}
-->
</style>
</head>

<body>
<div id="cont">
<div id="head"></div>
<div id="main">
Blablablabla<br />Blablablabla<br />Blablablabla<br />Blablablabla<br />
Blablablabla<br />Blablablabla<br />Blablablabla<br />Blablablabla<br />
Blablablabla<br />Blablablabla<br />Blablablabla<br />Blablablabla<br />
Blablablabla<br />Blablablabla<br />Blablablabla<br />Blablablabla<br />
Blablablabla<br />Blablablabla<br />Blablablabla<br />Blablablabla<br />
Blablablabla<br />Blablablabla<br />Blablablabla<br />Blablablabla<br />
Blablablabla<br />Blablablabla<br />Blablablabla<br />Blablablabla<br />
Blablablabla<br />Blablablabla<br />Blablablabla<br />Blablablabla<br />
Blablablabla<br />Blablablabla<br />Blablablabla<br />Blablablabla<br />
Blablablabla<br />Blablablabla<br />Blablablabla<br />Blablablabla
</div>
<div id="foot">Blablablibloblu</div>
</div>
</body>
</html>

Merci par avance de votre aide.

Compte_supprime_49771 · le 7 février 2005

Merci par avance de votre aide.

Ouhais, mais là, je crois qu'on atteint les limites de CSS 2

J'ai quelque chose d'à peu près présentable, mais avec une fenêtre peu haute, on a une scrollbar verticale pour la page... et peu importe sa taille, l'espace du bas, n'est pas égal à l'espace du haut... Et comble du bonheur, le code ne marche que sous Firefox, Mozilla, Galeon (moteur Gecko tout ça, quoi), et puis Opera... (Sous IE6 et Konqueror, le bloc de contenu principal laisse éclater sa joie en hauteur)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 <title>Test</title>

 <style type="text/css">

 	body {
   margin: 0px;
   background-color: #5DD;
 	}

 	div#container {
   position: absolute;
   top: 5%;
   width: 90%;
   height: 90%;
   margin: 0px 5%;
   background-color: #DD5;
 	}

 	div#container div#header {
   background-color: #D55;
 	}

 	div#container div#content {
   overflow: auto;
   height: 80%;
   background-color: #5D5;
 	}

 	div#container div#footer {
   background-color: #55D;
 	}

 </style>

</head>

<body>

 <div id="container">

 	<div id="header"> <br /><br /><br /> </div>

 	<div id="content">
    
   <br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br />
    
 	</div>

 	<div id="footer"> <br /><br /> </div>

 </div>

</body>

</html>

(J'ai viré tes bordures et tout les trucs facultatifs dans le cadre de ce test... et puis j'ai remis en page le code, et changé quelques noms, pour être plus clair...)

Je vais essayer de regarder ce qui peut ne pas aller avec IE6 et Konqueror (tant que ça marche pas avec Konqueror, y'a un peu d'espoir que ce soit pas 'yet another bug' d'IE ), mais pour ta propre santé mentale (et la mienne, dans l'immédiat), je pense que tu ferai mieux de repasser à un vieux design avec des tableaux :/ (au moins pour régler les container, et tes 3 blocs dans le div#container... Avec les tableaux, ton div#footer sera bloqué par le bas de ton div#container, et ton div#content sera théoriquement redimensionné en conséquence, pour ne pas laisser les éléments déborder du tableau... Enfin c'est comme ça que je vois les choses... Si tu y arrives pas, je testerai...)

Je me suis pas encore renseigné sur CSS3, mais j'espère qu'il y aura de nouvelles fonctionnalités pour régler ce genre de problème... (Les pourcentages en CSS indiquent finallement une dimension fixe, et définitive... si on met deux blocs côte à côte avec chacun 60% en width, ils dépasseront verticalement du bloc qui les contient, de 20% de la largeur de ce bloc, au lieu de s'adapter, pour ne prendre chacun que 50% du bloc qui les contient... (<- le comportement des tableaux quoi))

Enfin bon, le jour où on pourra utiliser CSS3 n'est pas venu... J'espère que Microsoft aura coulé depuis! (<- le cri de ralliement des 'Webmasters who care about Standards" )

Cyao.

[Edit:

Bon, visiblement, Konqueror et IE6 aiment pas qu'on règle la height du div#content en pourcentages... (il en tient tout simplement pas compte, et fait comme si on avait pas touché à la height)

J'arrête là, ça me fatigue Tu peux aussi tenter un script en JavaScript (mais genre 10% de clients chez qui c'est désactivé), pour régler dynamiquement la height du div#content, en fonction de la height du div#container, moins celle des div#header et div#footer... Mais faut récupérer la hauteur finale de tes blocs, et tu va aussi avoir des problèmes de compatibilité 'entre IE et les autres'... Mais bon, ça se gère un peu plus facilement avec JavaScript, qu'avec CSS, même si c'est lourd à développer...

]

zigomat · le 8 février 2005

Question : pourquoi ne pas placer la DIV footer automatiquement grace au positionnement relatif : du genre (taille de la page- 20%) ?

Compte_supprime_49771 · le 8 février 2005

Question : pourquoi ne pas placer la DIV footer automatiquement grace au positionnement relatif : du genre (taille de la page- 20%) ?

Je vois pas trop où tu veux intégrer ça En CSS, on peut pas faire de calcul sur les dimensions, et si on fait ça en JavaScript, autant faire ça proprement, en réglant simplement la hauteur de la div#content en fonction de la hauteur du div#container et de div#header et div#footer... (comme dit dans mon premier message) ^_^

Avec ton système, même si ça pouvait marcher en CSS, ça réglerait pas le problème de la div#content qui n'est pas limitée, qui déborde complètement du div#container... Si j'ai bien compris, il veut genre un équivalent d'un iframe, pour centrer le contenu de la page, sur les 4 côtés, mais il veut aussi que la div#header et div#footer restent à une hauteur fixe (qu'on les voit toujours, peu importe comment on fait défiler la div#content...)

cedricpc · le 8 février 2005

Bon bah j'ai que deux solutions quoi... Sois utiliser une iframe (je hais les frame) sois laisser l'ascenseur dans le body :(

A moins qu'il y aie moyen d'avoir un beandeau en bas et pouvoir scroller le reste ? Parce que que je veux cette scrollbar, c'est surtout pour voir en perm © Cedricpc - Tout droits réservés... Blablabla.

Compte_supprime_49771 · le 8 février 2005

Bon bah j'ai que deux solutions quoi... Sois utiliser une iframe (je hais les frame) sois laisser l'ascenseur dans le body :(

Essaie avec des tableaux, ça devrait pouvoir être possible... (c'est toujours mieux qu'un iframe )

A moins qu'il y aie moyen d'avoir un beandeau en bas et pouvoir scroller le reste ? Parce que que je veux cette scrollbar, c'est surtout pour voir en perm © Cedricpc - Tout droits réservés... Blablabla.

div#footer {
position: fixed;
bottom: 0px;
width: 95%;
}

Enfin avec un truc comme ça, si ton div#footer est trop large, il passe par dessus la scrollbar, ce qui est pas génial :/

cedricpc · le 9 février 2005

Euh les tableaux, ca marche pas, je peux pas mettre une scrollbar dans une cellule qui fait x% de haut...................

Merci.

Oui c'est sur :transpi: mais j'ai peut-être un code... Je vais voir.

cedricpc · le 10 février 2005

Changement de tactique finallement et definitive. :)

Menu fixe.

-------------------------

Header avec logo.

Main.

Le tout scrollable par un autre container.

-------------------------

Footer fixe.

Je pense que c'est un bon compromis qui se raproche à peu près de ce que je veux sans me casser la tête.

Edit : Mrd, il va encore suxer avec le container comme il fera x% et hauteur et largeur...

Connexion

[CSS] Header en px, main en % scrollable

Messages recommandés

cedricpc

Lien vers le commentaire

Partager sur d’autres sites

Compte_supprime_49771

Lien vers le commentaire

Partager sur d’autres sites

zigomat

Lien vers le commentaire

Partager sur d’autres sites

Compte_supprime_49771

Lien vers le commentaire

Partager sur d’autres sites

cedricpc

Lien vers le commentaire

Partager sur d’autres sites

Compte_supprime_49771

Lien vers le commentaire

Partager sur d’autres sites

cedricpc

Lien vers le commentaire

Partager sur d’autres sites

cedricpc

Lien vers le commentaire

Partager sur d’autres sites

Archivé

Naviguer

Activité