Deux <div> dépendant en hauteur

23 juillet 2006 à 19:39:25

hello !

Je vais essayer d'être précis :
J'ai 2 <div>, un qui est flottant à gauche et un autre à côté (#menus et #corps)

Je voudrais que lorsque la hauteur du corps fasse 700 pixels par exemple, le block #menus fasse la même hauteur et inversement (un peu comme dans un tableau, mais avec des <div>)

Voila, n'hésitez pas à me dire si je ne suis pas explicite !

j52

le_stoppeur

23 juillet 2006 à 20:00:00

Comme dans le design zMotion ?

ninjavascript

23 juillet 2006 à 20:10:06

Citation : le_stoppeur

Comme dans le design zMotion ?

Oui, exactement

Zozozou

23 juillet 2006 à 23:35:51

http://css.alsacreations.com/Tutoriels-et-articles-divers/Des-blocs-de-meme-hauteur-sans-tableaux

J'espère que ça pourra t'aider

ninjavascript

24 juillet 2006 à 20:13:57

Citation : Zozozou

http://css.alsacreations.com/Tutoriels-et-articles-divers/Des-blocs-de-meme-hauteur-sans-tableaux

J'espère que ça pourra t'aider

Merci, c'est exactement ce que je voulais, cependant l'exemple du tuto ne fonctionne pas correctement sous firefox !

Bilbou

24 juillet 2006 à 20:47:09

Chu !

J'ai bien une idée...
Mais je n'ai pas le temps de tester en local !

Donc, voici mon idée...

#conteneur
{
/* Fixe une hauteur */
}

#menu
{
float: left;
height: 100%; /*Je ne travaille pas avec les pourcentages, mais j'imagine que cette ligne permettra d'étendre le menu en hauteur sur toute la hauteur du conteneur */
}

#corps
{
height: 100%;
}

Je ne te promets vraiment rien...

ksol

24 juillet 2006 à 22:15:02

Ou alors, tu utilise 3 divs

un div menu, un div contenu, et div qui contient les deux. Cela ne marchera quand dans le cas ou ton menu est d'une couleur unie ou fait par une image repetée.
le truc consiste a mettre une barre <hr /> en dessus de tes deux <div>, et a appliquer

hr {
clear:both;
visibility:hidden;
}

c'est la technique que j'utilise, et qui marche très bien.

ninjavascript

25 juillet 2006 à 0:34:14

Grâce à vos indications, ce que je souhaite faire commence à prendre forme ...
L'idée du <div> en bas qui "pousse" les autres <div> est excellente !

Seulement, le problème est que dans le #conteneur , je dois spécifier une hauteur en pixels pour que les #menus et #corps soient de la même hauteur.
Lorsque je met height: auto; ou encore height: 100%; dans #conteneur, les 2 <div> ne font pas la même hauteur alors que si je met par exemple height: 5000px; , là le fonctionnement est parfait !

Je ne peux évidemment pas deviner la hauteur que fera mon corps pour chacunes des pages du site, c'est pourquoi je voudrais trouver la solution avec height: auto; ou height: 100%;

Voila, merci pour tous vos conseils
Si vous avez la solution pour mon second pb, faites tourner

Bilbou

25 juillet 2006 à 21:33:47

Chu !

J'ai retrouvé un tuto, ici, mais il sera nécessaire d'appliquer un fond uni ou répété suivant y pour appliquer cette méthode...

Sinon, ça fait une heure que je teste différentes choses pour résoudre ton problème, et sincèrement, je suis désolé, mais je ne trouve pas d'autres solution que celle que je t'ai proposée ci-dessus, qui était de fixer une hauteur au conteneur... :euh:

Je suis vraiment désolé, peut-être que quelqu'un de plus doué que moi saura te répondre !

Si ça t'intéresse, voici le code que j'ai utilisé pour mes bidouilles :

<div id="conteneur" style="width: 600px; height: 1500px; border: 1px solid;"> 

<div id="menu" style="border: 1px solid red ; width:200px; float: left; height: 100%;" >


<p>
Test<br />
Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
</p>
</div>

<div id="corps" style="height: 100%; width: 390px; float: right; border: 1px solid green; bootom: 0px;">
<p>
Coucou !
</p>


</div>

<div style="clear: both; border: 1px solid blue;"> 
</div>

</div>

C'est codé à l'arrache, mais c'est compatible FF, IE et Opera !

C'est le seul code que j'ai réussi à te sortir avec mes capacités atuelles...

Je me disais que peut-être que tu pourrais récupérer la hauteur de ton conteneur en PHP, et l'appliquer ensuite à l'arrache dans ton div conteneur, sur chacune des pages. Cependant, je ne connais pas le PHP, alors, je dis sûrement de grosses bêtises !

Mais qui sait ? :-°

Bonne soirée !

ninjavascript

25 juillet 2006 à 22:03:54

bon !
c'est pas grave

Le tuto ne me convient pas vraiment

Merci à tous pour votre aide, je vais faire sans (ou au pire j'utilise les tableaux :: beurk !)

bye !