[resolu] Fond de DIV avec hauteur differente

Bonjour,

j'ai des problèmes d'affichage sur le site suivant

J'ai mis sur cette page 2 copies d'ecran ou j'ai un problème d'affichage. (voir ici)

Ma structure HTML/CSS est la suivante :

<div id="container">
<div id="header">header</div>
 <div id="center">
    <div id="content">content</div>
    <div id="rightcol">	
      <dl id="menu">
        menu
      </dl>
    </div>
  </div>
<div id=footer>footer</div>
</div>

les hauteurs des div #content et #rightcol varient en fonction des pages et ont tous les deux un fond de couleur different qui doit être rempli jusqu'au footer.

J'ai appliqué les styles suivant :

#container {width:1004px;background:url(../img/css/back_menu.jpg) repeat-y top right #EBEAE4;}
#header {width:767px;height:90px; float:left;}
#center {width:1004px;}
#content {float:left; width:618px; padding:30px 35px 10px 114px; background:url(../img/css/back_content.jpg) no-repeat top left #F6B741; min-height:300px;}
#rightcol {float:left;width:237px;}
#footer {clear:left; width:1004px;}

Correction pour IE <6:

#content {height:300px;}

Dans #container je mets la couleur de fond dont j'ai besoin pour la colonne de droite (#rightcol). En applicant le fond au DIV #rightcol, je n'arrive pas a ce que la couleur aille jusqu'en bas lorsque le DIV #content a une hauteur supérieur.

Si vous voulez voir la feuille de style dans sa totalité. (voir ici)

Je ne sais pas si la méthode que j'applique est la meilleure, je suis ouverte a toute suggestion .. surtout si elle me permet de corriger les bugs existant

Merci,
Celia
Modifié par celia_ccs (06 Apr 2007 - 14:53)

Hello celia_css

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

L'article suivant t'intéressera peut-être : Des blocs de même hauteur sans tableaux.

Il est également possible d'utiliser une variante avec des images, la technique dite des « colonnes factices ».
Modifié par Florent V. (15 Jan 2007 - 12:12)

Salut,

merci pour ce lien .. j'ai effectivement réussi a resoudre le problème avec les colonnes factices expliqué sur ce site : http://www.alistapart.com/articles/fauxcolumns/

C'est en fait ce que je faisais déjà en appliquant un fond a #container

au lieu de mettre un fond juste pour la colonne de droite, j'ai mis un fond pour les 2 colonnes (orange et beige ensemble) et du coup ca marche
C'est a dire que j'ai changé mon image, celle ci fait toute la largeur de mon div #container.

 #container {width:1004px;background:url(../img/css/[b]back_center.jpg[/b]) repeat-y top right #EBEAE4;}

Merci pour cette aide.
Modifié par celia_ccs (06 Apr 2007 - 14:51)