probleme de placement

**Tony_ducrocq** · 12/05/2009, 15h06

Bonjour,

je souhaite faire une page avec un menu a gauche et une banniere static
en cherchant un peu, je suis tombé la dessus

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
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left Frame Layout</title>
<style type="text/css">
 
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}
 
#framecontent{
position: absolute;
top: 0;
bottom: 0; 
left: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: navy;
color: white;
}
 
#maincontent{
position: fixed;
top: 0; 
left: 200px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
}
 
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
 
* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
 
* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}
</style>
 
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
 
</head>
 
<body>
<div id="corps">
	<div id="framecontent">
	<div class="innertube">
 
	<h1>CSS Left Frame Layout</h1>
	<h3>Sample text here</h3>
 
	</div>
	</div>
 
 
	<div id="maincontent">
	<div class="innertube">
 
	<h1>Dynamic Drive CSS Library</h1>
	<p><script type="text/javascript">filltext(255)</script></p>
	<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
 
	</div>
	</div>
</div>
</body>
</html>

je souhaite que le "corps" soit afficher sur 80% et soit en bas (pour me laisser 20% de dispo en haut pour la baniere ^^ )
je souhaite aussi avoir des marges de 10% a gauche et a droit du "corps"
mon probleme est qu'aucun de mes tests n'a fonctionné sous les firefox et IE en meme temps...

merci pour votre aide

ps si quelqu'un a un meilleur titre...

**Macmillenium** · 12/05/2009, 19h43

Bonjour,

Tu n'es pas tombé sur le bon exemple, faire basculer IE6 en mode Quirks et masquer les scrollbars du body, ce sont des graves erreurs sémantiques et ergonomiques.
Tu trouveras d'autres idées dans ce topic.

**Tony_ducrocq** · 13/05/2009, 09h25

merci, mais votre exemple bug sous IE, c'est pas du tous fluide

de plus, la scroll bar est sur le body, je la voudrai sur ma div si possible

je commence vraiment a en avoir assez du css...
on peut vraiment tous faire, mais il faut tous faire pour ie et les autres...