Footer et header dans un div [Résolu]

Bonjour à tous,

Voici mon problème : Je cherche a avoir un div qui possède un header (de type barre de fenetre windows) et un footer (de type barre de status windows) et bien sur d'avoir un element au milieu qui soit scrollable dans les deux sens afin de s'adapter au contenu que j'affiche dedans... mais je lutte :

Voici le code que je mets:

<div style="white-space: nowrap; height: 106px; width: 294px;">
  <div class="cWindowTitle" style="overflow: hidden; height: 21px; width: 100%;">
     TITRE
  </div>
  <div style="white-space: nowrap; overflow: scroll;">
    CONTENT
  </div>
  <div class="cWindowStatus" style="overflow: hidden; white-space: nowrap; height: 19px; width: 100%;">
    STATUS
  </div>
</div>

Et c'est assez enervant car le scroll en y ne fonctionne pas sous Firefox si mon contenu depasse la taille ... En gros il force le div centrala la taille du contenu en Y ...

Help je pige rien

Merci d'avance
Modifié par kikx (12 Nov 2007 - 19:59)

Salut,

en fait ton "div central" n'a pas de taille spécifiée dans ses propriétés CSS, donc elle va forcément s'adapter au contenu (comportement normal d'une div). Il faut donc lui spécifier un "height", meme si la taille de son élément conteneur est spécifiée, car lui en revanche n'a pas de propriétés "overflow" spécifiée, et donc se redimensionne en fonction du contenu.

En bref, faut spécifier la taille en hauteur de la div centrale qui doit du coup faire 106-21-19=66px si mes calculs sont bons pour ce que tu veux...

hum ... Je comprend bien mais ca m'embête ... En gros le div principal est redimensionnable par un javascript (exactement comme une fenetre windows) et donc quand je redimensionne le div principal, je devrai nécessairement recalculer le div interne du milieu et cela me fait *****

J'avais essayer des astuce de type height:100% mais le problème c'est que la taille de div du milieu est de 106px (dans l'exemple précédent)

En fait ce que je veux c'est que
- le header soit en haut du div principal
- le footer le plus en bas du div principal
- le div du milieu prenne la place au maximum au milieu


Mais bien sur je ne veux pas recalculer tout le temps la taille du div central

Des idées ?
Modifié par kikx (09 Nov 2007 - 15:21)

Bon j'avance un petit peu ...


J'ai essayer de faire le code suivant :

<div style="position:absolute;top:100px;left:100px; width:300px; height:400px;">
   <div style="position:absolute;top:0px;width:100%;height:20px;background:blue">
      bla
   </div>
   <div style="position:absolute;width:100%;top:20px;bottom:20px;overflow:scroll;background:red">
	sdsdsd<br>
....
	sdsdsd<br>
   </div>
   <div style="position:absolute;bottom:0px;width:100%;height:20px;background:green">
      another stuff
   </div>
</div>

Il est a noter que pour le div du centre j'ai a la fois un top:20px et un bottom:20px... Je ne sais pas trop si on a le droit de faire ca ... quoi qu'il en soit FF interprete correctement ce que je veux faire :


Mais pas IE :


(le cadre rouge déborde completement et n'est pas bloqué pour le div du bas)
Vous avez des idées pour corriger ce bug ?

kikx a écrit :
Il est a noter que pour le div du centre j'ai a la fois un top:20px et un bottom:20px... Je ne sais pas trop si on a le droit de faire ca

On a tout à fait le droit.

kikx a écrit :
quoi qu'il en soit FF interprete correctement ce que je veux faire (...) Mais pas IE (...)

Préciser à la fois top et bottom pour dimensionner un élément positionné en absolu est un mécanisme valide et élégant... mais pas implémenté dans IE6. Il me semble par contre qu'IE 7 s'en sort correctement.

Ce n'est donc pas un bug (ça marche mais mal ou bizarrement ou ça a des effets de bord inattendus), mais une absence d'implémentation (ça n'a pas été mis en place).

Florent V. a écrit :

Préciser à la fois top et bottom pour dimensionner un élément positionné en absolu est un mécanisme valide et élégant...

Trop bien Je ne savais pas que je faisais des choses élégantes ... mais soit

Florent V. a écrit :
mais pas implémenté dans IE6. Il me semble par contre qu'IE 7 s'en sort correctement.

Pour ce qui est de IE7, ca me semble étrange car c'est exactement la version d'IE qui m'a servi a faire la capture d'ecran d'IE donc ... Si tu as une idée de pourquoi ...

Merci

kikx a écrit :
En fait ce que je veux c'est que
- le header soit en haut du div principal
- le footer le plus en bas du div principal
- le div du milieu prenne la place au maximum au milieu

En dehors de l'utilisation de Javascript pour calculer (de manière moyennement fiable) la hauteur du bloc central, il y a deux solutions:

1. La solution la plus puissante consiste à utiliser le positionnement absolu et de préciser à la fois une valeur de top et de bottom pour le bloc central. On a vu que cette solution n'est supportée que par les navigateurs modernes (donc pas par IE6). On peut envisager d'adapter la mise en page pour IE6 et inférieurs (via un commentaire conditionnel qui va bien), en donnant une hauteur par défaut de 70% (ou autre estimation raisonable) au bloc central, par exemple.

2. Sinon, la seule solution à ma connaissance est de travailler avec des hauteurs en pourcentages, par exemple un en-tête de 10%, un corps de page de 80%, et un pied de page de 10%.

Si aucune des deux options n'est satisfaisante, on pourra envisager de... changer de design. Ou plutôt de l'adapter, par exemple en prévoyant une extensibilité en hauteur et le fait que l'en-tête et le pied de page ne seront pas toujours présents à l'écran et que le bloc central n'aura pas de hauteur fixe ni de barre de défilement interne.

On peut d'ailleurs souligner le fait que du point de vue de l'ergonomie, inclure la majorité du contenu d'une page dans un bloc avec barre de défilement interne est une erreur. On pourrait aussi parler des problèmes d'accessibilité que ça peut occasionner.

On aura donc plutôt intérêt à:
- se faire à l'idée qu'un site, c'est dans la plupart des cas un machin qui s'étend en hauteur sans recourir à des artifices particuliers (le plus fort étant que les utilisateurs trouvent ça très bien comme ça );
- à la rigueur, on peut pour des questions de rendu graphique travailler avec un bloc principal en min-height: 100%, c'est à dire avec une «page sur toute la hauteur», pourquoi pas en plaçant un pied de page le pus bas possible (en bas de page ou en bas de viewport, en fonction de celui qui arrive en dernier).

Sur ce dernier point, un exemple/tutoriel:
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html

Enfin, on laissera de côté les demi-solutions à base de position: fixed, pas vraiment intéressantes ici.

kikx a écrit :
Pour ce qui est de IE7, ca me semble étrange car c'est exactement la version d'IE qui m'a servi a faire la capture d'ecran d'IE

La page de test suivante passe très bien sous IE 7.

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	div {
		position: absolute;
		top: 100px;
		bottom: 100px;
		width: 100px;
		background: red;
		overflow: auto;
	}
	</style>
</head>

<body>

<div>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
	<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
	<p>Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim.</p>
</div>

</body>
</html>

Florent V. a écrit :

On peut d'ailleurs souligner le fait que du point de vue de l'ergonomie, inclure la majorité du contenu d'une page dans un bloc avec barre de défilement interne est une erreur. On pourrait aussi parler des problèmes d'accessibilité que ça peut occasionner.

Pour mieux comprendre ce que je veux faire, voici une petite capture d'écran. Ceci explique le fait que je cherche a mettre du contenu dans un div scrollable

Pas bien compris ce que représente ta capture d'écran, là.
Tu as trois fenêtre, ou bien tu décores trois blocs comme des fenêtres au sein d'une page web?

Dans le deuxième cas, quel est le rapport entre la hauteur de ces trois blocs et la hauteur du viewport (zone de visualisation du navigateur)?

C'est effectivement 3 blocs decorés comme des fenetres : des fenetres HTML(div) ... afin de simuler un veritable OS avec des fenetres et tout et tout !!!

La partie en gris foncé est la fameuse partie du milieu dont je parlais precedemnt...

kikx a écrit :
C'est effectivement 3 blocs decorés comme des fenetres : des fenetres HTML(div) ... afin de simuler un veritable OS avec des fenetres et tout et tout !!!

La partie en gris foncé est la fameuse partie du milieu dont je parlais precedemnt...

Euh... ben alors, où est le besoin d'utiliser le positionnement absolu ou autre machin compliqué?
Comment est calculée la hauteur de chaque bloc «fenêtre»?
Est-ce que les titres et barre d'état (en-tête et pied des blocs «fenêtre») ont une hauteur fixe ou variable?

PS: c'est mieux de donner un maximum d'éléments sur ce que l'on veut faire dès le départ, ça évite de perdre du temps...
Modifié par Florent V. (10 Nov 2007 - 16:02)

J'ai besoin de faire un positionnement absolue car mes fenetres sont "draggables".

La hauteur du bloc principal est fixé en dynamique en fonction du resize de l'utilsateur

Les pieds de pages sont fixes comme indiqué dans mes "posts"

Le bloc du centre est fixé par la principe du "je prends toute la place qui reste" comme indiqué dans mes posts

Je pensais avoir bien décrit ce que je voulais

Avec toute les indications que vous m'avez donné, je devrai m'en sortir maintenant ... enfin j'espere

Une idée: vu que la hauteur du bloc principal est déterminée via Javascript, il ne devrait pas être bien compliqué d'utiliser la même valeur moins les hauteurs de l'en-tête et du pied (que l'on peut figer arbitrairement pour simplifier) pour attribuer une hauteur au bloc central.

Tu as raison dans le principe général... Néanmoins ma fonction de resize doit rester generique quelque soit la skin appliqué et donc les hauteurs des blocs.

J'irai meme plus loin, ma fonction ne doit meme pas savoir que mon bloc a resizer est une fenetre. Elle ne prend en argument que l'id et hop elle resize ...

Je me complique la vie afin de me la simplifier après