Problème menu avec DIV.

Version imprimable

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:

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:

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!!!!

:salut:
Essaie ceci :

Code:

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:

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;
}

04/07/2007, 13h47
Shin_RockmanX

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??

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

Code:

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>

puis remplace ta balise body par ceci :

Code:

<body onload="reajuste()">

ça devrait aller normalement.

05/07/2007, 02h07
Shin_RockmanX

donc on est obligé de réajuster manuelle les deux div... elle ne peuvent pas se comporter comme des tableaux tout connement....
05/07/2007, 08h55
trotters213

bè sinon il faut que tu définisses une hauteur fixe.