Problème de mise en page HTML (débutant) [Résolu]

Signaler
Messages postés
4
Date d'inscription
lundi 7 juillet 2008
Statut
Membre
Dernière intervention
8 juillet 2008
-
Messages postés
4
Date d'inscription
lundi 7 juillet 2008
Statut
Membre
Dernière intervention
8 juillet 2008
-
Bonjour,


J'ai un problème de mise en page dans un site web assez simple:


3 divisions (div)


- le premier contenant les deux autres

- le deuxième à gauche contient un menu pour naviguer

- le troisième sur la partie droite (à l'intérieur du premier div)
contient un tableau dynamique (gridview) dont je ne connais pas la
taille (variable selon le nombre de lignes).


Je souhaiterais que les deux divisions "div_menu" et "div_tableau"
aient la même hauteur. On m'a orienté en me disant de rajouter une 3e
div (le premier que j'ai énuméré) et de mettre Height à 100% dans les
deux autres.


Le problème est que la hauteur de ma division "div_menu" n'augmente pas
avec les deux autres divisions, apparemment Height:100% ne fonctionne
que lorsque la hauteur Height du composant parent est défini...


Comment faire dans le cas où la hauteur Height à définir n'est pas connue dans un cas dynamique ?

4 réponses

Messages postés
417
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
21 juillet 2010
1
Bonsoir,


(c'est vrai que ce n'est pas le bon endroit, mais bon...)
Un expert en css me contredira peut-être, mais c'est une des choses qui paraissent évidentes, et ne le sont pas du tout en css.
Le plus simple, j'en ai peur, est de revenir à la bonne vieille table avec tr et td. Sinon, tu peux regarder ici : http://forum.alsacreations.com/faq/faq-17-Comment-faire-des-quotcolonnesquot-de-meme-hauteur-.html
Ou alors, tu passes par les tables... : tu peux garder tes trois css avec le height:100%, donner au premier la propriété "display:table;" et aux deux autres la propriété "display:table-cell;".
Ensuite, il te faudra changer tes div, dans l'ordre, en table pour le premier et pour les deux autres en td. Tu dois aussi ajouter un <tr> après <table>.
(pour le menu, tu peux ajouter vertical-align:top à ton css pour éviter que le texte ait un centrage vertical.


Cordialement

GGtry
Messages postés
4
Date d'inscription
lundi 7 juillet 2008
Statut
Membre
Dernière intervention
8 juillet 2008

Hmm je pense que je me suis gourré d'emplacement pour ce message, mais je n'ai pas trouvé de rubrique 'html'.
J'avais choisi asp.net / sql server parce que mon site (complet) utilise ces langages (avec C# coté serveur). Mais la question ne porte que sur un notion html je pense.
Messages postés
4
Date d'inscription
lundi 7 juillet 2008
Statut
Membre
Dernière intervention
8 juillet 2008

Bonjour, ta solution et une autre avec les div fonctionnent
- soit je mets ton tableau en mettant une colonne coloriée
- soit je mets une div coloriée contenant 2 autres div (la premiere juste pour décaler la 2e avec la même couleur que le fond
et la 2e en blanc pour faire comme si il n'y avait rien.

Les deux solutions fonctionnent, la 2e me semble moins instinctive, je laisse mon maître de stage décider de la méthode ^^

Merci beaucoup
Messages postés
4
Date d'inscription
lundi 7 juillet 2008
Statut
Membre
Dernière intervention
8 juillet 2008

Finalement je vais utiliser ta méthode de tableau, parce que avec les div ça marche lorsque c'est la partie droite qui est étirée, mais pas lorsque c'est la gauche... ;)