[RESOLU] Hauteur de div enfants

Bonjour tout le monde!

J'ai une petite question alors, exemple :

<div class="CadreEnglob">
   <div class="CadreGauche>
      <ul><li>contenu</li></ul>
   </div>
   <div class="CadreDroit>
      <p>Texte très court</p>
   </div> 
</div>

Imaginons que mon CadreEnglob ait un fond de couleur noire.
La liste de mon CadreGauche est longue,elle fait à peu près 600px de haut, avec un fond gris.
Par contre le texte de mon CadreDroit est très court, 100px de haut avec un fond bleu.
Ce qui fait qu'on voit en-dessous de mon CadreDroit la couleur noire de mon CadreEnglob.
Ma question est la suivante :
Comment faire pour que la hauteur de mon CadreDroit dépende de la hauteur de mon CadreGauche ?

Je sais pas si je suis clair (enfin si, je sais qu'en principe non mais dans ce cas précis, j'espère )
Modifié par Trafalgar (19 Jan 2008 - 17:49)

il y a une solution peu academique c'est de donnée une class a tes deux div et dans cette classe tu met une hauteur ^^

Oui, j'y ai pensé, mais le souci, c'est que la hauteur de la liste varie en fonction des actions des internautes. Certains peuvent avoir 15 items dans leur liste et d'autres trois. Il faudrait vraiment que le cadreDroit dépende de la hauteur du cadreEnglob ou de celle du cadreGauche, y a comme une forme de choix là

À lire dans la FAQ:
Comment faire des "colonnes" de même hauteur ?

Génial !

Ca fait un an que je bosse sur ce site, que je me suis ruiné le cerveau sur ces maudits diviseurs et leur CouScouS, pour m'entendre dire lorsque je ne résous pas une difficulté, qu'il vaut mieux utiliser des tableaux, je rêve ! (mais c'est la faute aux méchants navigateurs qui sont trop nuls dixit l'article)

Bravo les standards, si ce n'est pour séparer le bon grain de l'ivraie, je ne vois vraiment aucun autre avantage !
Modifié par Trafalgar (19 Jan 2008 - 14:34)

Bonjour,

Trafalgar, tu m'excuseras mais là tu t'égares, tu divagues...

Les tableaux HTML sont composés d'éléments HTML parfaitement standards (HTML 4.01 - Les tables dans les documents HTML). Par ailleurs, ils sont parfaitement stylables en CSS.

Par ailleurs, si on veut parler standards et design table-less, je t'invite à découvrir display: table-cell en CSS, qui permet de donner à des éléments un rendu de type «cellule de tableau». Tu peux tester ça avec Firefox, Opera, Safari, Konqueror, Camino, etc.

Hélas, l'absence de support de display: table et display: table-cell dans le navigateur Internet Explorer (y compris dans sa version 7) nous oblige à utiliser des moyens détournés pour obtenir un effet visuel de «colonnes de même hauteur», ou bien à nous rabattre sur des tableaux de mise en forme (qui ne sont pas particulièrement problématiques s'ils sont correctement utilisés, et même parfois plus robustes et/ou plus accessibles que des solutions cherchant à tout prix à les éviter).

L'item de la FAQ que t'indique Benjamin propose plusieurs solutions sans tableau de mise en forme. Tu y trouveras peut-être ton bonheur. Je suppose que tu as lu les articles indiqués de fond en comble, avant de pousser une gueulante?

Franchement, je ne vois pas ici la moindre raison de s'émouvoir.
Modifié par Florent V. (19 Jan 2008 - 15:57)

Oui c'était juste un petit exercice de style.

Il me semblait que le HTML est un langage sémantique, et que les tableaux servaient à mettre en forme des données tabulaires.
Mais si maintenant, vous me dîtes qu'on peut s'en servir pour de la mise en forme de texte, pourquoi pas, ça évolue, c'est bien.

Trafalgar a écrit :
Il me semblait que le HTML est un langage sémantique, et que les tableaux servaient à mettre en forme des données tabulaires.

Dans l'absolu, oui.
Dans la pratique, face à un objectif concret (réaliser une mise en page donnée), on recense les solutions techniques disponibles. Pour une mise en page de type «colonnes de même hauteur», on a en gros trois solutions:
1. utiliser CSS et display: table-cell;
2. utilser un tableau de mise en forme;
3. ne pas faire, techniquement, des colonnes de même hauteur, mais en donner l'impression visuelle via une technique CSS telles que les colonnes factices.

La première solution n'est pas utilisable en production, ou du moins demandera de mettre en place un mécanisme alternatif pour Internet Explorer 6 et 7 (correctifs CSS appelés via un commentaire conditionnel, par exemple). Donc, pour rester simple, disons que c'est intéressant mais pas encore utilisable.

La deuxième solution est utilisable, a déjà fait ses preuves, etc. On pourra lui trouver plusieurs problèmes, mais qui sont à vrai dire vite résolus:
- sémantique: ben, des div ou des cellules de tableau ça ne change pas grand chose à la sémantique du document... (attention à la notion de sémantique en HTML, qui est à utiliser avec parcimonie);
- accessibilité: tant que les cellules du tableau se linéarisent correctement (c'est à dire que la lecture cellule par cellule de gauche à droite puis ligne par ligne est cohérente) et qu'on n'a pas utilisé d'éléments caractéristiques des tableaux de données tels que caption, summary, th[/B], [b]thead, tfoot ou scope... tout va bien;
- maintenance: modifier radicalement la mise en page demandera de modifier le code HTML produit pour supprimer le ou les tableaux si besoin... si le site est dynamique, ça ne devrait pas trop poser de problèmes.

La troisième solution est intéressante, et on pourra la privilégier si on le souhaite. Dans certains cas, les contraintes de design peuvent faire qu'elle ne sera pas utilisable correctement, et on se rabattra sur la deuxième solution (tableau de mise en forme). Mais en général on couvre beaucoup de cas avec ces solutions de trompe-l'oeil telles que les colonnes factices.

Donc, on examine les différentes solutions, on garde à l'esprit l'objectif et les contraintes, et on fait son choix.

Le «faire ceci, c'est bien; faire cela, c'est mal», on peut effectivement l'oublier. On en a entendu beaucoup de «les tableaux, c'est le mal» lors des années de promotion intensive des standards du Web et notamment de CSS (qui aujourd'hui ne fait plus débat, sauf peut-être en France où on est un peu en retard sur les anglo-saxons...). C'était un raccourci un peu rapide, car s'il est incontestable qu'une utilisation poussée de CSS fait gagner beaucoup de souplesse par rapport aux tableaux sur-imbriqués et armadas de GIF transparents, il n'en reste pas moins que certains tableaux de mise en forme bien utilisés peuvent être parfois indispensables.

Un peu de lecture pour compléter:
http://blog.alsacreations.com/2007/03/06/335-coup-de-gueule-3-malefiques-tableaux

Ceci dit, tu as sans doute raison de relever une certaine évolution dans le discours. J'espère qu'il s'agit d'une rationalisation. [/b]

Merci pour cette réponse !