[CSS] avoir deux Div de la meme hauteur

avoir deux Div de la meme hauteur [CSS] - HTML/CSS - Programmation

Marsh Posté le 13-01-2004 à 23:52:29    

bon on ne se moque pas mais je me mets peu a peu au CSS et j'ai encore du mal a ne pas raisonner en tableaux  :o  
 
donc je voudrais faire un design bateau, avec menu a gauche, contenu a droite (genre ça : http://www.alsacreations.com/artic [...] 4zones.htm )
mais j'arrives pas à faire en sorte que mon menu à gauche ait la meme hauteur que la zone principale à droite sans pour autant leur définir un hauteur fixe.
 

Code :
  1. .menu {
  2. float: left;
  3. width: 150px;
  4. height: 100%;
  5. background-color: #AF2F2E;
  6. }
  7. .contenu {
  8. height: 100%;
  9. }


 
bon évidement ça c'est pas bon ;)

Reply

Marsh Posté le 13-01-2004 à 23:52:29   

Reply

Marsh Posté le 14-01-2004 à 00:12:51    

hum d'apres tout ce que j'ai pu lire, en fait il n'y as pas de solution miracle pour ce cas :( .. peut etre dans une évolution du CSS..

Reply

Marsh Posté le 14-01-2004 à 00:26:06    

Reply

Marsh Posté le 14-01-2004 à 00:55:04    

hum c'est pas mal comme astuce, mais faut avoir prévu un motif adéquate :p
enfin finalement je fais autrement, mais c'est con qd meme que sur ce point le css soit pas au point (enfin c'est moins pire que le html a ces débuts!)

Reply

Marsh Posté le 15-01-2004 à 11:09:45    

j'avais le meme probleme, finialement j'ai choisi d'utiliser un tableau, en attendant une evolution des css.

Reply

Marsh Posté le 15-01-2004 à 11:20:38    

CyberCouf a écrit :

hum c'est pas mal comme astuce, mais faut avoir prévu un motif adéquate :p
enfin finalement je fais autrement, mais c'est con qd meme que sur ce point le css soit pas au point (enfin c'est moins pire que le html a ces débuts!)


En fait, le CSS est au point (avec les table-cell) mais c'est IE qui ne l'est pas :/

Reply

Marsh Posté le 15-01-2004 à 11:29:44    

gizmo a écrit :


En fait, le CSS est au point (avec les table-cell) mais c'est IE qui ne l'est pas :/


D'un autre côté, s'il faut simuler un comportement tabloïde à un div... autant utiliser un vrai tableau !  :)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 15-01-2004 à 11:34:41    

bah non, ce n'est pas parce que l'affichage est identique que le sens l'est.

Reply

Marsh Posté le 15-01-2004 à 11:41:59    

Le sens est ce que tu lui indiques, non?  
Lorsque tu appliques un display inline à un <div>, tu lui indiques de se comporter comme une balise en ligne, non ?
Dans ce cas, il devient sémantiquement impropre de lui faire contenir une balise bloc, non ? (même si au départ tu utilises la balise <div> )
Selon moi, c'est identique pour le table-cell.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 15-01-2004 à 11:52:03    

non, le sens est défini uniquement pas les balises, pas par les attributs CSS.

Reply

Marsh Posté le 15-01-2004 à 11:52:03   

Reply

Marsh Posté le 07-01-2009 à 15:00:03    

Up, je rencontre ce probléme avec css, je souhaiterais savoir comment mettre de div au même height.
Ils sont côté a côte, l'un contiendra des liens, l'autre sera fourni par un include.
Taille fixe prohibé.


---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
Reply

Marsh Posté le 07-01-2009 à 15:01:24    

Ca dépend du fond de ces divs, y'a souvent moyen de tricher différemment. Balance une image du design pour voir

Reply

Marsh Posté le 07-01-2009 à 15:06:23    

Je suis pas expert, voici la structure html :

Code :
  1. <html>
  2. <head>
  3. <title>Haras de l'abaye</title>
  4. <style type="text/css" media="all">
  5. @import url("css/stylesheet.css" );
  6. </style>
  7. </head>
  8. <body>
  9. <div id="main">
  10. <div id="front">
  11.  <img src="http://site.voila.fr/elevagedelabbaye/images/banniere.jpg">
  12. </div>
  13. <div id="body">
  14.  <div id="colleft">
  15.   <div id="menuleft"></div>
  16.  </div>
  17.  <div id="colright">
  18.   <div id="menu"> ICI MENU  </div>
  19.   <div id="data"> kjhgkjhgp<br>dswsd<br>sdfgsdfg</div>
  20.   <div id="message">   </div>
  21.   <div id="foot">Anthony Hemon & Axilim - 2009</div>
  22. </div></div>


 
Voici le css actuel :

Code :
  1. @charset "utf-8";
  3. html, body {
  4. margin: 0;
  5. height: auto;
  6. background-color:#E6E2AF;
  7. }
  9. div#main {
  10. height:auto;
  11. width:100%;
  12. padding:0px;
  13. }
  15. div#front {
  16. width:100%;
  17. height:auto;
  18. background-color:#AEEE00;
  19. background-image:url();
  20. background-repeat:no-repeat;
  21. background-position:center;
  22. text-align:center;
  23. }
  26. div#body{
  27. height: auto;
  28. width:auto;
  29. }
  31. div#colleft{
  32. height:auto;
  33. width:150px;
  34. float:left;
  35. }
  37. div#menuleft{
  38. height:auto;
  39. width:100%;
  40. background-color:#01B0F0;
  41. position:relative;
  42. }
  44. div#menuleftfull{
  45. height:100%;
  46. width:100%;
  47. background-color:#7FC6BC;
  48. }
  50. div#colright{
  51. height:100%;
  52. width:auto;
  53. margin-left:auto;
  54. float:center;
  55. }
  57. div#menu{
  58. height:auto;
  59. background-color:#000000;
  60. }
  62. div#data{
  63. height:auto;
  64. background-color:#B9121B;
  66. }
  68. div#message{
  69. margin: 0;
  70. height:75px;
  71. background: #AEEE00;
  72. }
  74. div#foot{
  75. margin: 0 0 0 0;
  76. bottom: 0;
  77. height:25px;
  78. background-color:#000000;
  79. }
  80. </body>
  81. </html>


Les div à 'aligner' sont les div colleft et colright, cet à dire que si le contenu de droite et plus grand que celui de gauche il faut que droite s'agrandisse.


Message édité par Bilbo248 le 07-01-2009 à 15:07:41

---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
Reply

Marsh Posté le 07-01-2009 à 15:07:29    

Mais s'il n'ont pas un fond spécial, pas besoin qu'ils soient de la même taille. C'est pour ça que dans ce genre de cas, le graphisme est très important.

Message cité 1 fois
Reply

Marsh Posté le 07-01-2009 à 15:08:28    

FlorentG a écrit :

Mais s'il n'ont pas un fond spécial, pas besoin qu'ils soient de la même taille. C'est pour ça que dans ce genre de cas, le graphisme est très important.


Le fond sera une couleur :/
Différente


Message édité par Bilbo248 le 07-01-2009 à 15:08:48

---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
Reply

Marsh Posté le 07-01-2009 à 15:11:31    

C'est une couleur unie ? Un pattern ?

Reply

Marsh Posté le 07-01-2009 à 15:13:51    

background-color ^^


---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
Reply

Marsh Posté le 07-01-2009 à 15:14:51    

Alors le mieux est de mettre un fond sur le conteneur, à la manière des Faux Columns comme indiqué précédemment :)

Reply

Marsh Posté le 07-01-2009 à 15:33:48    

Je viens d'essayez de trois petit chose çà ne marche pas, ou faut-il que je mette background image ?
Merci de tes réponses !


---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
Reply

Marsh Posté le 07-01-2009 à 15:45:45    

Sur le #body. L'image sera alors de la largeur de ce dernier, et en hauteur, un seul pixel suffit.

Reply

Marsh Posté le 07-01-2009 à 15:54:31    

J'ai mis un pixel blanc de 1x1 en background sur le div body, mais le div de droite ne s'allonge pas :s


---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
Reply

Marsh Posté le 07-01-2009 à 15:55:27    

Nan, pas un pixel blanc. Il faut une image de la largeur du div body, avec dedans la couleur des colonnes. Cette image sera répétée sur y, ce qui créera le subterfuge.

Reply

Marsh Posté le 07-01-2009 à 15:59:04    

j'avais eu le même soucis (j'avais d'ailleurs posté sur ce forum) et j'ai utilisé cette solution (pour mon site en signature) qui marche très bien :D

Reply

Marsh Posté le 07-01-2009 à 15:59:39    

Le div body à une largeur indéfini. Je fait comment ?


---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
Reply

Marsh Posté le 07-01-2009 à 16:00:31    

Ah pas cool :/ Du coup sur grand écran tu te retrouves avec des paragraphes de une ligne :D

Reply

Marsh Posté le 07-01-2009 à 16:01:07    

Sinon vu que ton menu est à largeur fixe, suffit d'avoir une image de 150px de large avec la couleur du menu, qui sera mise sur le div body

Reply

Marsh Posté le 07-01-2009 à 16:17:13    

Mon image ne s'affiche pas dés que je la met dans mon div body :/
Par contre dans la classe qui affecte la balise body çà marche.
Mais çà résout pas le probléme.


Message édité par Bilbo248 le 07-01-2009 à 16:17:59

---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
Reply

Marsh Posté le 07-01-2009 à 16:22:34    

Normal, les floats sortent du flux, du coup le body fait zéro pixels de haut. Fout un overflow: hidden; dessus

Reply

Marsh Posté le 07-01-2009 à 16:37:55    

voici ma nouvelle classe body :

Code :
  1. div#bodi{
  2. height: auto;
  3. width:auto;
  4. background-image:url(menuback.gif);
  5. background-repeat:repeat-y;
  6. background-position:left;
  7. overflow: hidden;
  8. }


Hum çà ne marche pas :s


---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
Reply

Marsh Posté le 07-01-2009 à 16:42:08    

T'as écrit bodi au lieu de body

Message cité 1 fois
Reply

Marsh Posté le 07-01-2009 à 16:42:52    

:D

Reply

Marsh Posté le 07-01-2009 à 16:44:23    

FlorentG a écrit :

T'as écrit bodi au lieu de body


Je l'ai renommé dans mon code pensant que ce nom là posé probléme ( renommé des deux côté bien sur :D :D)
Si seulement la valeur d'un auto pouvait être récupéré et mise dans une variable que l'on puisse rappliqué sur une classe çà serait top.


Message édité par Bilbo248 le 07-01-2009 à 16:48:36

---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
Reply

Marsh Posté le 07-01-2009 à 17:17:21    

J'ai trouvé celà mais sans plus de résultat  :s
http://forum.alsacreations.com/top [...] arent.html


---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed