Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1587 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] avoir deux Div de la meme hauteur

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] avoir deux Div de la meme hauteur

n°611200
cybercouf
Posté le 13-01-2004 à 23:52:29  profilanswer
 

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 ;)

mood
Publicité
Posté le 13-01-2004 à 23:52:29  profilanswer
 

n°611222
cybercouf
Posté le 14-01-2004 à 00:12:51  profilanswer
 

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..

n°611227
gm_superst​ar
Appelez-moi Super
Posté le 14-01-2004 à 00:26:06  profilanswer
 
n°611237
cybercouf
Posté le 14-01-2004 à 00:55:04  profilanswer
 

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!)

n°612330
Big-Foot
Posté le 15-01-2004 à 11:09:45  profilanswer
 

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

n°612342
gizmo
Posté le 15-01-2004 à 11:20:38  profilanswer
 

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 :/

n°612354
sibelius
Vous êtes sûr ?
Posté le 15-01-2004 à 11:29:44  profilanswer
 

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
n°612359
gizmo
Posté le 15-01-2004 à 11:34:41  profilanswer
 

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

n°612364
sibelius
Vous êtes sûr ?
Posté le 15-01-2004 à 11:41:59  profilanswer
 

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
n°612372
gizmo
Posté le 15-01-2004 à 11:52:03  profilanswer
 

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

mood
Publicité
Posté le 15-01-2004 à 11:52:03  profilanswer
 

n°1835133
Bilbo248
Posté le 07-01-2009 à 15:00:03  profilanswer
 

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
n°1835136
FlorentG
Posté le 07-01-2009 à 15:01:24  profilanswer
 

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

n°1835140
Bilbo248
Posté le 07-01-2009 à 15:06:23  profilanswer
 

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
n°1835142
FlorentG
Posté le 07-01-2009 à 15:07:29  profilanswer
 

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
n°1835143
Bilbo248
Posté le 07-01-2009 à 15:08:28  profilanswer
 

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
n°1835145
FlorentG
Posté le 07-01-2009 à 15:11:31  profilanswer
 

C'est une couleur unie ? Un pattern ?

n°1835148
Bilbo248
Posté le 07-01-2009 à 15:13:51  profilanswer
 

background-color ^^


---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
n°1835149
FlorentG
Posté le 07-01-2009 à 15:14:51  profilanswer
 

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

n°1835171
Bilbo248
Posté le 07-01-2009 à 15:33:48  profilanswer
 

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
n°1835174
FlorentG
Posté le 07-01-2009 à 15:45:45  profilanswer
 

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

n°1835178
Bilbo248
Posté le 07-01-2009 à 15:54:31  profilanswer
 

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
n°1835179
FlorentG
Posté le 07-01-2009 à 15:55:27  profilanswer
 

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.

n°1835185
Profil sup​primé
Posté le 07-01-2009 à 15:59:04  answer
 

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

n°1835188
Bilbo248
Posté le 07-01-2009 à 15:59:39  profilanswer
 

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


---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
n°1835189
FlorentG
Posté le 07-01-2009 à 16:00:31  profilanswer
 

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

n°1835192
FlorentG
Posté le 07-01-2009 à 16:01:07  profilanswer
 

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

n°1835205
Bilbo248
Posté le 07-01-2009 à 16:17:13  profilanswer
 

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
n°1835208
FlorentG
Posté le 07-01-2009 à 16:22:34  profilanswer
 

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

n°1835213
Bilbo248
Posté le 07-01-2009 à 16:37:55  profilanswer
 

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
n°1835215
FlorentG
Posté le 07-01-2009 à 16:42:08  profilanswer
 

T'as écrit bodi au lieu de body

Message cité 1 fois
n°1835216
Profil sup​primé
Posté le 07-01-2009 à 16:42:52  answer
 

:D

n°1835218
Bilbo248
Posté le 07-01-2009 à 16:44:23  profilanswer
 

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
n°1835220
Bilbo248
Posté le 07-01-2009 à 17:17:21  profilanswer
 

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


---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] avoir deux Div de la meme hauteur

 

Sujets relatifs
Problemes avec les Styles CSS sous Dreamweaver 2004[CSS] probleme avec un filter.alpha
[CSS] Height 100% dans IEImage de hauteur 100% de la cellule
[CSS] Image liens avec des bordures[CSS] background-image: Problème
[XHTML/CSS] Question con sur les classes CSS ...Equivalent de cellspacing pour une table en CSS ?
[DIVERS] Mozilla&Co : Impossible de definir une hauteur de 100% ???Div et hauteur, result diff. sur IE et Mozilla [XHTML et CSS]
Plus de sujets relatifs à : [CSS] avoir deux Div de la meme hauteur

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.048 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR