2 pièce(s) jointe(s)
[DIV] - Problèmes de mise en page
Bonjour,
Je développe un petit site dont le contenu est variable, pour ça j'ai plusieurs div (voir pj mise en page).
Si j'affiche ma pages dans n'importe quel navigateur (gmail, IE et FF), le contenu ne reste pas à sa place et se position sous mon menu. (voir vidéos)
De plus sin mon sous menu est trop long l'image de fond ne s'affiche pas de partout (voir sous menu de cours 1° MSA)
(le plus simple pour voir le problème : http://ressourcescompta.free.fr
Code css :
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
body
{
height:100%;
background-image:url('images/bg.jpg');
font:Tahoma #000000;
text-align: left;
min-height:550px;
}
html
{
height:100%;
}
/* page générale (header + contenu + footer) */
#imSite
{
width: 960px;
margin: 15px auto;
position:relative;
height:100%;
}
#imHeader
{
height:149px;
background-image: url('images/top.jpg');
background-repeat:no-repeat;
}
/* englobe menu sous menu et contenu */
#imBody
{
background-image: url('images/content.jpg');
background-repeat: repeat-y;
height:100%;
position:relative;
z-index:1;
}
/* Menu */
#imMenuMain
{
width: 180px;
float: left;
padding: 0px 0 0 9px;
height:100%;
position:relative;
}
/* Contenu */
#imContent
{
width: 750px;
margin-top: 10px 0 0 0;
height:100%;
margin-left:200px;
position:relative;
z-index:1;
}
/* Menu + Contenu */
#imPage
{
position: relative;
left : 10px;
height:100%;
z-index:1;
}
/* Sous Menu */
#imMenuSub
{
float: left;
width: 126px;
margin-left: 0px;
height: 100%;
overflow:auto;
margin-right: 15px;
} |
Et appel dans page :
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
|
<body>
<div id="imSite">
<div id="imHeader"></div>
<div id="imBody">
<div id="imMenuMain">
<div id="imMnMn">
<ul>
<li><a class='imMn' href='?Menu=0'><span class='imMenu'>Accueil</span></a></li>
<li><a class='imMn' href='?Menu=1'><span class='imMenu'>Cours 1° MSA</span></a></li>
<li><a class='imMn' href='?Menu=5'><span class='imMenu'>Membres</span></a></li>
<li><a class='imMn' href='?Menu=2'><span class='imMenu'>TP Excel</span></a></li>
<li><a class='imMn' href='?Menu=3'><span class='imMenu'>Vidéo Ciel Compta</span></a></li>
<li><a class='imMn' href='?Menu=4'><span class='imMenu'>Vidéo Ciel gestion commerciale</span></a></li>
</ul>
</div>
</div>
<div id="imPage" style='width: 900px'>
<div id="imCel0_01">
<div id="imCel0_01_Cont1">
<div id="imObj0_01">
<div id='imMenuSub'>
<ul>
<li><a href='?Menu=1&Ss=#'>Ch 1 - La facturation dans une entreprise commerciale</a></li>
<li><a href='?Menu=1&Ss=#'>Ch 2 - La facturation de services ou de travaux</a></li>
<li><a href='?Menu=1&Ss=#'>Ch 3 - Les ventes de biens</a></li>
</ul>
</div>
Contenu
</div
</div>
</div>
</div>
</div>
<div id="imFooter"></div>
</body>
</html> |
Si je copie colle la source dans un éditeur (là j'ai dreamweaver sous la main), ma mise en page est nickel, mes divs à la bonne haute et bien positionnés (voir la pj résultat).
Du coup je vois vraiment plus ce que je peux faire pour corriger mon problème.
Merci
