Vertiges dans les div...

Voici un nouveau casse-tête qui m'empeche de dormir depuis au mois 2 semaine :

J'ai essayé de simplifier le pb au maximum pour pouvoir vous l'exposer :

- xhtml 1 strict, etc

Voici le html :

<div class="conteneur">
       <div class="menu"></div>
       <div class="contenu"></div>
</div>

Le but est de faire en sorte que "contenu" remplisse la totalité du "reste" de
"conteur" sachant que "menu" possède une hauteur en px, du genre :

.conteneur
{
      width:100px;
      height:100px;
}

.menu
{
     height:20px;
}

.contenu
{
    height:100%;/* Du RESTE @!*@@ */
    @height:expression(parentNode.offsetHeight-20+'px'); /*Sous ie c'est pratique*/
}

Je sais que ca peut paraitre vraiment tout bête, voir basique, mais je n'ai pas réussi a le faire sous firefox ( le contenu déborde systématiquement de la taille du menu, arghh) !!!

N.B : je suis "obligé" d'avoir un div conteneur (en fait c'est parceque ce code est destiné a faire un tag jsp)

Merci pleease de contribuer a la qualité de mon sommeil
Modifié par CrazyDieter (08 Jun 2007 - 22:58)

.contenu {
    height:100%;/* Du RESTE @!*@@ */
}

« Du reste » n'existe pas dans ta page, ni dans le modèle visuel CSS. Donc, forcément, ça ne va pas marcher automatiquement.

div.contenu prend 100% de la hauteur de son parent, soit 100px de haut.

Il n'y a pas vraiment de moyen souple de faire ce que tu souhaites en CSS. Il y a par contre :
- la possibilité d'utiliser le positionnement absolu en spécifiant des coordonnées en top et en bottom ;
- la possibilité de faire un rendu en trompe l'oeil (c'est à dire que le plus souvent on n'a pas vraiment besoin que le bloc fasse toute la hauteur moins un peu... il suffit d'en donner l'impression).

La première solution peut être problématique dans certains cas, et n'est pas compatible IE6. On utilisera donc probablement la seconde.

Pour savoir comment la mettre en place... ben ça va dépendre de ce qu'on veut faire exactement. L'exemple que tu donnes est je suppose simplifié. Sans avoir un aperçu du design graphique, du type de contenu, etc., ça va être dur d'en dire plus.

Merci pour ta réponse (rapide !).

Les indications que tu donnes sont intéressantes, mais ne pourront malheureusement pas s'appliquer a mon cas particulier
.

Pour résoudre mon problème particulier, je crois que je vais devoir faire un immonde bricolage en javascript (encore 1), pour recalculer la hauteur (comme mon expression ie).

En tout cas on ne m'enleverra pas de l'idée que la norme CSS est vraiment complètement ripou (en + d'être mal implementée). C'est l'horreur totale.

Pourquoi ils ont pas repris la bonne idée des frames :

<frameset height="100px" cols="20,*">

Modifié par CrazyDieter (09 Jun 2007 - 00:11)

CrazyDieter a écrit :

En tout cas on ne m'enleverra pas de l'idée que la norme CSS est vraiment complètement ripou (en + d'être mal implementée). C'est l'horreur totale.

Pourquoi ils ont pas repris la bonne idée des frames :

Puis-je me permettre une suggestion ?
- Lire en détail http://www.w3.org/TR/CSS21/visudet.html#the-height-property
- Déterminer comment cette contrainte nouvelle pourrait s'intégrer aux différents algorithmes de calcul de height pour les différents cas de figures à résoudre (élément remplacé/non remplacé, positionné/en flux/flottant, de display block/inline/inline-block, selon la valeur calculée d'overflow et la présence de descendants eux-mêmes de display block/inline, flottant, positionnés ou en flux, etc.)
- Faire une proposition de modification de CSS2.1 sur la liste de discussion appropriée du groupe de travail du W3C.
- Faire aboutir cette proposition

<edit>Naturellement, cette proposition, pour pouvoir aboutir, ne devra pas remettre en cause les algorithmes existants, qui répondent à des problématiques beaucoup plus fréquentes que celle-ci, et qui ont le grand mérite d'être implémentés</>

Sinon, javascript, cela peut être robuste, simple et efficace pour des manipulations de ce type étroitement liées aux conditions de rendu propre au client.

Maintenant, sur le fond, il y a cette très vieille controverse sur la possibilité d'expressions calculées en CSS. Daniel Glazman a écrit et proposé plusieurs choses très intéressantes dans ce domaine. Mais il s'agit davantage de CSS3: il faut aussi savoir être patient

<edit>En creusant encore un peu plus, il a toujours cette question du media screen qui n'est pas un media paginé, mais que l'on aborde parfois comme s'il en était un. Surtout quand il s'agit davantage de créer un interface applicatif que de publier un document. Il est peut-être dommage que projection soit aussi peu connu, et d'usage aussi spécifique...</>
Modifié par Laurent Denis (09 Jun 2007 - 06:36)

une suggestion comme ça c'est de la rigolade.

le css a des defauts c'est clair. les tableaux le demontre facilement en montrant qu'il savent faire des choses impossible au css actuellement. demander a quelqu'un de tous seul ( et a priori simple concepteur de site ) de réécrire ( alors que j'en suis sur tous ça doit reposer sur du C et autre languages bas niveau) et redécider tous ce qui c'est décidé c'est impossible et irréaliste. le w3c ne s'est imposé que car de grandes entreprises (même microsoft je crois) le soutiennent. on a pas la main la-dessus.

a écrit :
<edit>Naturellement, cette proposition, pour pouvoir aboutir, ne devra pas remettre en cause les algorithmes existants, qui répondent à des problématiques beaucoup plus fréquentes que celle-ci, et qui ont le grand mérite d'être implémentés</>

et pourquoi naturellement. si par miracle ou par génie voir les deux, on trouvait mieux

et puis vraiment la problématique de la mise en page de son site. Si ce n'est pas une problématique frequente.....

enfin bref pour les hauteurs 100% c'est souvent pas possible même en suivant certaines astuces qui ne repondent qu'au cas des div de premiere profondeur. et restent plus qu'a se rabattre sur des artifices visuels comme les colonnes factices. a condition que l'apparence graphique le permette.

edit: bon maintenant qu'en a utiliser les frames à la place...les frames ont beaucoup de défaut.
Modifié par CPascal (09 Jun 2007 - 18:38)

CPascal a écrit :
les tableaux le demontre facilement en montrant qu'il savent faire des choses impossible au css actuellement

Ah ? Qu'est-ce qui, en mise en page, est possible avec un tableau mais impossible avec display: table|table-cell ?

CPascal a écrit :
et pourquoi naturellement. si par miracle ou par génie voir les deux, on trouvait mieux

Pour des questions de couts, et par souci de rétrocompatibilité.
Modifié par Florent V. (09 Jun 2007 - 19:05)

Florent V. a écrit :
Ah ? Qu'est-ce qui, en mise en page, est possible avec un tableau mais impossible avec display: table|table-cell ?

Est-ce qu'il est possible de centrer verticalement un site : genre un div "conteneur", centré horizontalement avec margin: auto, est-ce qu'il y a moyen de le centrer verticalement sans tables ? J'ai aucune idée de si c'est possible ou pas, mais c'est le seul truc que je sais faire avec des tables mais pas en CSS pur.

BlueScreenJunky a écrit :
Est-ce qu'il est possible de centrer verticalement un site : genre un div "conteneur", centré horizontalement avec margin: auto, est-ce qu'il y a moyen de le centrer verticalement sans tables ?

Oui, avec display: table et display: table-cell.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test centrage vertical sans tableau</title>
<style type="text/css">
html {height: 100%;}
body {
	margin: 0; padding: 0;
	display: table;
	height: 100%;
	width: 100%;
}
div#cell {
	display: table-cell;
	vertical-align: middle;
}
div#global {
	height: 200px;
	width: 500px;
	margin: 50px auto;
	background: red;
}
</style>
</head>

<body>
<div id="cell"><div id="global">...</div></div>
</body>
</html>

Ça marche parfaitement... avec tout autre navigateur qu'IE.

Le centrage vertical est donc tout à fait possible en CSS et sans passer par un tableau, et les CSS ne sont pas limités de ce point là. Ce qui est limité, et demandera le recours à un tableau dans le code HTML, ce sont les implémentations des navigateurs (notamment IE).