Menu qui s'allonge en fonction du contenu

Ron56 · 22 Mars 2006

Voila je développe un site actuellement mais j'ai un soucis au niveau du CSS !

Voila le CSS posant problème :

Code:

#menu_v_g {
     background-image: url(../images/menu_v_bg.jpg);
     width: 151px;
     float: left;
     }

#contenu {
     width: 649px;
     margin-left:151px;
     }

menu_v_g étant le menu vertical gauche

contenu étant le contenu

Mon code HTML étant le suivant :

Code:

<div id="menu_v_g">
</div>
<div id="contenu">
</div>

Quand j'ajoute du contenu le bloc "contenu" s'allonge, et , j'aimerai bien que le menu s'allonge de la même façon !

Comment faire ?

EDIT :

Voila l'allure du site :

fabor · 22 Mars 2006

Code:

<div id="menu_v_g">
  <div id="contenu">
  </div>
</div>

peut etre non?

Ron56 · 22 Mars 2006

Nickel ! merci

Mais maintenant le footer reste en haut !

:lol:

Code HTML

Code:

<div id="menu_v_g">
<div id="contenu">
Contenu global
</div>
</div>
<div id="footer">
</div>

Code CSS du footer :

Code:

#footer {
     background-image: url(../images/footer_bg.jpg);
     width: 800px;
     height: 19px;
     }

narayana · 22 Mars 2006

#footer{
clear:both;
...

Ron56 · 22 Mars 2006

Merci bcp !

Problème résolu !

Ron56 · 22 Mars 2006

Un autre problème !

Compatibilité IE/mozilla !

La j'ai tout corrigé mais il y a un probleme avec le menu horizontal du haut ( juste en dessous de la bannière) :

Sous IE :

Sous FF :

Au niveau CSS ca donne :

Code:

#menu_h_g {
     background-image: url(../images/menu_h_g.jpg);
     background-repeat: no-repeat;
     width: 154px;
     height: 35px;
     float:left;
     }

#menu_h_d {
     background-image: url(../images/menu_h_d.jpg);
     background-repeat: repeat-x;
     height: 35px;
     width: 646px;
     margin-left:154px;
     }

menu_h_g : menu horizontal partie gauche

menu_h_d : menu horizontal partie droite

Au niveau du html :

Code:

<div id="menu_h_g">
</div>
<div id="menu_h_d">
</div>

Si jamais j'imbrique comme tout a l'heure comme ceci :

Code:

<div id="menu_h_g">
<div id="menu_h_d">
</div>
</div>

C'est impec sous IE :

MAis sous FF ca déconne :

narayana · 22 Mars 2006

#menu_h_d { float:right;
<div id="menu_h_g"></div>
<div id="menu_h_d"></div>
Je te conseillle une lecture du site de référence sur les css alsacreations
A mon avis tu n'as pas tout compris à ce qu'est le flux de données dans un document html ;-)

Ron56 · 22 Mars 2006

J'ai lu mais la c'est la première fois que je pratique :roll: :wink:

Avec un float right , marche pas , ca empire , j'ai ca sous IE et sous FF :

http://img364.imageshack.us/my.php?image=temp9vt.jpg

narayana · 22 Mars 2006

Donne le code source de ta page
et celui de ta css que l'on voit cela ;-)
Comme c'est en construction cela devrait pas être trop long

Ron56 · 22 Mars 2006

Code:

<body>
<div id="global">
<div id="header">
</div>
<div id="menu_h_g">
</div>
<div id="menu_h_d">
</div>
<div id="menu_v_g">
test
test
<div id="contenu">
Contenu global
</div>
</div>
<div id="footer">
</div>
</div>
</body>

Code:

body {
     margin: auto; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
     }

#global {
     margin-left: auto;
     margin-right: auto;
     width: 800;
     text-align: left; /* on rétablit l'alignement normal du texte */
     }

#header {
     background-image: url(../images/banniere.jpg);
     width: 800px;
     height: 123px;
     }

#menu_h_g {
     background-image: url(../images/menu_h_g.jpg);
     background-repeat: no-repeat;
     width: 154px;
     height: 35px;
     float:left;
     }

#menu_h_d {
     background-image: url(../images/menu_h_d.jpg);
     background-repeat: repeat-x;
     height: 35px;
     width: 646px;
     margin-left:154px;
     }

#menu_v_g {
     background-image: url(../images/menu_v_bg.jpg);
     background-repeat: repeat-y;
     width: 151px;
     float: left;
     }

#contenu {
     width: 649px;
     margin-left:151px;
     }

#footer {
     background-image: url(../images/footer_bg.jpg);
     width: 800px;
     height: 19px;
     clear:both; 
     }

ET la sous FF c'est OK , mais sous IE ca merde ! :s

IE :

http://img364.imageshack.us/my.php?image=temp9vt.jpg

Ron56 · 22 Mars 2006

Je comprend pas pq IE interprète comme ca :x :?