Conteneur, Contenu et Menu. Et fond coloré.

**Nowwis** · 17/01/2011, 14h23

Bonjour à tous.

Je développe en ce moment un site et j'ai un soucis que je n'ai jamais eu...

Donc j'ai ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="conteneur">
    <div id="contenu">
    </div>
    <div id="menu">
    </div>
</div>

Et en css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#conteneur{height:auto;}
	#contenu{width:807px; float:left;background-color:#d9dadb;}
        #menu{width:193px; height:auto; background-color:#FFFFFF; float:right;}

Donc mon contenu doit être gris de mon header jusqu'à mon footer (pour bien faire le raccord entre les trois) et mon menu doit avoir un fond blanc...)
Donc comme ça, si contenu est plus grand que menu, c'est ok... Mais dans le cas ou c'est plus petit, ça me fait un fond blanc entre contenu et mon footer...

Et si je mets la couleur sur conteneur, quand contenu est plus grand, ça me mets un fond gris en dessous de menu...

Quelqu'un aurait une solution ?

**brisso** · 19/01/2011, 22h04

Salut,
personnellement je n'ai rien compris...
Tu veux faire quoi exactement ?

Que ta DIV menu soit toujours de la même hauteur que ta DIV contenu ?

Si oui ce n'est pas possible en CSS il me semble, la seule solution c'est d'utiliser le background du conteneur pour "tromper l'œil" et simuler une hauteur identique à celle de du contenu.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<head>
 
<style type="text/css">
#conteneur      {width:1000px; margin:0; background:#000000; position:absolute}
#contenu        {width:903px; margin:0; background:#d9dadb; position:relative; display:inline-block; float:left; height:200px; /*TAILLE FIXE POUR L'EXEMPLE*/}
#menu           {width:197px; margin:0; background:#000000; position:relative; display:inline-block; float:right;}
</style>
 
</head>
 
<body>
    <div id="conteneur">
 
        <div id="contenu">
        </div>
 
        <div id="menu">
        </div>
 
    </div>
 
</body>
</html>

Sinon, il existe un code en JS qui te permet de le faire sans trop de soucis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function Ajuste_DIV(){
  var O_Srce = document.getElementById( 'contenu');
  var O_Dest = document.getElementById( 'menu');
  O_Dest.style.height = parseInt( O_Srce.offsetHeight) +'px';
}
 
 
et dans la balise body : <body onLoad="Ajuste_DIV()">

**Nowwis** · 20/01/2011, 12h29

Bonjour,

Super ! Le script JS est exactement ce que je cherchais !
Un gros merci et un +1 pour toi

**brisso** · 20/01/2011, 13h16

Ravis de t'avoir aidé.
En revanche, pour avoir déjà utiliser ce script dans un de mes sites, ce petit javascript a un défaut. En effet, quand ta DIV contenu contient des DIV "hidden" par exemple et qu'elle s'allonge donc quant les DIV en question sont affiché, la DIV menu ne s'agrandira pas car le scipt est exécuté au chargement de la page seulement.

Donc si tu a ce genre de problème je pense que dans le forum JS quelqu'un pourra certainement t'aider.

Bonne continuation !

Conteneur, Contenu et Menu. Et fond coloré.

HTML

Discussions similaires

Partager

Partager