Conteneur, Contenu et Menu. Et fond coloré. [Résolu]

Nowwis · 17/01/2011, 13h23

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, 21h04

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, 11h29

Bonjour,

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

brisso · 20/01/2011, 12h16

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 !

20/01/2011, 11h29	#3
Nowwis Membre éclairé Développeur Web Inscription : juin 2009 Messages : 363 Détails du profil Informations personnelles : Sexe : Âge : 21 Localisation : France Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : juin 2009 Messages : 363 Points : 365 Points : 365	Bonjour, Super ! Le script JS est exactement ce que je cherchais ! Un gros merci et un +1 pour toi
	00

20/01/2011, 12h16	#4
brisso Membre du Club Inscription : novembre 2005 Messages : 179 Détails du profil Informations personnelles : Âge : 24 Informations forums : Inscription : novembre 2005 Messages : 179 Points : 60 Points : 60	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 !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email