Problème menu avec DIV.

**Shin_RockmanX** · 02/07/2007, 21h32

Salut!
J'essaie de convertir mon site qui était fait avec des tableaux en mode DIV et CSS pour le sport et puis car j'ai cru voir que c'était quand même le nouveau standard.

La structure est simple:
Un cadre de 900px de large centré sur la page.
Première ligne contenant un bandeau flash de 900px.
Dernière ligne contenant une image de 900px.

et entre deux, une colonne sur la gauche avec les liens de largeur 130px avec à côté, une div de 770px qui contient les données de la page (=> le contenu).

Voici mon code:

Code :

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

1
2
3
4
5
6
7
8
9
 
<div class='maintable'>
   <div style='height:75px;'>mon objet flash</div>
   <div style='background-color:green;'>
	<div id='liens'>les liens du menu</div>
        <div id='content'>mon contenu</div>
   </div>
   <div id='bottom'><img src='bottom.gif' alt='' /></div>
</div>

avec le code CSS suivant:

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
25
26
27
28
29
30
31
32
 
.maintable {
border-top-width:0px;
border-left-width:0px;
border-right-width:1px;
border-bottom-width:1px;
border-color:white;
border-style:solid;
background-color:black;
width:900px;
margin:auto;
}
 
 
#liens {
position:relative;
width:130px;
height:100%;
border-right:dashed 1px;
border-left:1px white solid;
background-color:#00baff;
float:left;
}
 
 
#content {
float:left;
position:relative;
background-color:white;
vertical-align:top;
width:768px;
}

bon donc voila le problème, c'est que déjà, ma division du (au fond vert pour le test) contient bien apparemment les div liens et content mais:
si content est plus grande que liens, liens ne s'étire pas jusqu'en bas.
et en plus, la différence est noire, pas verte comme elle devrait.

donc il doit y avoir un problème avec le type de conteneur que j'utilise.

je pète les plombs au secour!!!!

**trotters213** · 03/07/2007, 08h50

Essaie ceci :

Code HTML :

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

1
2
3
4
5
6
7
8
<div id="maintable">  
	<div id="ban">mon objet flash</div>  
	<div id="milieu">  
		<div id="liens">les liens du menu</div>  
		<div id="content">mon contenu</div> 
	</div>  
	<div id="bottom"><img src="bottom.gif" alt="" /></div> 
</div>

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#maintable {
border-top-width:0;
border-left-width:0;
border-right-width:1px #fff solid;
border-bottom-width:1px #fff solid;
background-color:#000;
width:900px;
margin:auto;
}
 
 
#liens {
position:relative;
width:130px;
height:100%;
border-right:dashed 1px;
border-left:1px #fff solid;
background-color:#00baff;
float:left;
}
 
 
#content {
float:left;
position:relative;
background-color:#ff0;
vertical-align:top;
width:768px;
height:100%;
}
 
#milieu {
background-color:#0f0;
height:500px;
}
 
#ban {
height:75px; 
background-color:#ccc;
}

**Shin_RockmanX** · 04/07/2007, 13h47

oui ça marche bien tant que le contenu est plus petit que 500px de hauteur, mais comment faire pour les cas où c'est plus grand?
on peut faire en sorte que ça se réajuste??

**trotters213** · 04/07/2007, 14h29

Rajoute ceci ente tes balises <head> et </head> :

Code HTML :

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

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function reajuste()
{
        var hautLien = document.getElementById('liens').offsetHeight;
        var hautCont = document.getElementById('content').offsetHeight;
        if (hautLien>hautCont) document.getElementById('content').style.height=hautLien+'px';
        else document.getElementById('liens').style.height=hautCont + 'px';
}
</script>