Hauteurs d'éléments adaptables "dynamiquement"

Bonjour à tous,

Voila je cherche à créer 4 blocs de contenu distincts venant se placer les uns a coté des autres sur une même ligne.
Ces blocs sont créés dynamiquement dans une boucle (java), et leur nombre n'est pas défini.
Les blocs bleu doivent s'adapter entre-eux. La taille de l'image (au dessus du bloc) est connu, mais le contenu texte venant prendre place dans les blocs bleu est variable.
Le résultat souhaité sur l'image suivante, avec en highlight orange la séquence qui est bouclée. (avec une exception sur le style adapté à la 4e séquence de la ligne pour la gestion du margin-right)



Je cherche une solution me permettant d'adapter la hauteur des blocs sur le plus grand des 4. (comme les cellules d'un tableau... ).
Les solutions proposées dans les divers tutoriels ne me semblent pas adaptées au problème présent. (Des-blocs-de-meme-hauteur-sans-tableaux)

J'envisage d'utiliser la méthode

document.getElementById(elementId).offsetHeight

pour déterminer la hauteur de chaque élément puis de les comparer pour les ajuster à la plus grande, mais cela me semble un peu lourd comme méthode et avant de me lancer je sollicite vos expertises et attends vos conseils.

Quelqu'un a t il deja été confronté au problème ?... (surement que oui!)
Quelle solution avez-vous adoptée ? ( retour aux tableaux ?)

Merci.
Fred.
Modifié par FreDC (25 Jan 2007 - 17:32)

au choix :

- fixer en css une hauteur suffisamment grande
- tableau
- javascript

pour la 3e solution, NiftyCube par exemple a une fonction toute faite pour ça.

Attention à ne pas perdre de temps pour rien. Un petit tableau à quatre cellules, ça ne peut pas faire de mal.

ok merci MrPatate

Tu confirmes donc le choix d'une solution javascript...
Je vais explorer Nifty (... je connaissais pas cette dernière mouture... qui a l'air pas mal )

oui Florent V., j'ai bien sûr envisagé cette possibilité, mais je suis partisan de perdre un peu plus de temps à la conception pour permettre une meilleure réactivité lors des futures évolutions, alors je cherche un peu

Je vais voir ce que ca donne en JS et surtout d'un point de vue performance...

Il y a un autre solution, qui est de mettre une hauteur fixe relativement grande pour que dans la pluspart des cas ça marche et de mettre overflow:auto. Si jamais le contenu dépasse la hauteur fixe, une scrollbar apparait. L'avantage de cette solution est que si jamais ton texte est vraiment grand tu ne te retrouve pas avec tous les blocs à moitiés vides pour un seul bloc grand.
Modifié par matmat (25 Jan 2007 - 18:55)

matmat a écrit :
Il y a un autre solution, qui est de mettre une hauteur fixe relativement grande pour que dans la pluspart des cas ça marche et de mettre overflow:auto. Si jamais le contenu dépasse la hauteur fixe, une scrollbar apparait. L'avantage de cette solution est que si jamais ton texte est vraiment grand tu ne te retrouve pas avec tous les blocs à moitiés vides pour un seul bloc grand.

Pour le coup, ça serait ergonomiquement pas terrible (bien que accessible, on est d'accord), avec cette ou ces barres de défilement internes...

Pour en finir sur la solution tableau : elle me semble tout à fait adaptée (et n'est pas synonyme de non accessibilité !), son seul inconvénient étant que cela introduit dans le code HTML ce qui devrait rester une option de mise en page gérée exclusivement par CSS. Cependant, si on est dans le cas de l'utilisation d'un système de template ce genre de chose n'est pas particulièrement problématique : modifier le gabarit de page n'est pas plus compliqué que de modifier la feuille de style. Dans ce cas, l'utilisation d'un tableau ne posera pas de problème de maintenance et ne bloquera pas des évolutions futures.

Bien sûr, si le code de chaque page est figé (pages statiques), ou bien si le code qui génère le tableau est perdu au milieu d'un script PHP illisible... là ça devient problématique.

Dans l'absolu, la solution idéale serait l'utilisation de display: table et display: table-cell... mais rien pour Internet Explorer (même la version 7).

a écrit :
Pour le coup, ça serait ergonomiquement pas terrible (bien que accessible, on est d'accord), avec cette ou ces barres de défilement internes...

Je suis pas sur, ça dépent de l'effet recherché. Si tu as des differences énormes entre les boites je pense que c'est justement érgonomique parceque tu as un apercu global au lieu d'avoir tes boites qui sont tout en bas, j'avais fait un exemple:
http://www.smart-com.com.mx/spip.php?page=table&id_article=45
Mais bon c'est une question de point de vue.

Florent V. a écrit :
(bien que accessible, on est d'accord)

Sgmbl...

Oubliez un peu votre fichue souris, s'il-vous-plaît

a écrit :
Oubliez un peu votre fichue souris, s'il-vous-plaît

Il me semble qu'au clavier aussi tu peux descendre dans les blocs.

Laurent Denis a écrit :
Oubliez un peu votre fichue souris, s'il-vous-plaît

On essaye, on essaye.

matmat a écrit :
Il me semble qu'au clavier aussi tu peux descendre dans les blocs.

Avec Firefox (2), oui.
Avec Internet Explorer (6)... il semblerait que non.

Sinon, autre problème avec ta solution matmat : si j'agrandis un peu la taille du texte, tous les blocs se retrouvent avec une barre de défilement, et ça devient quand même assez lourd ! Si en plus c'est inaccessible au clavier avec certains navigateurs, argh !