Faire gliser à droite...

Bonsoir à tous,
J'ai un problème, il ne veut pas faire flotter à droite la partie avec les différents paragraphes qui ont un arriere plan avec des coins arrondis. Appercu du site J'ai beau essayer tout ce ce que je pense, il n'y a pas moyen et après vérification, ce n'est pas un probleme de pixel calculé trop juste (j'ai vérifié en passant l'écran à 1280x1024). J'espere que vous trouverez...

Voici mon 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
75
76
77
78
79
html, body{
	background-color: White;
	width: 1000px;
}
h1{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #008A88;
	font-size: medium;
	font-variant: small-caps ;
	margin-left: 55px;
	font: bold;
}
 
 /*Styles container*/
 
#header{
	padding-top: 10px;
	background-color: White;
	position: relative;
}
 
#plan{
	background-color: Red;
	width: 250px;
	margin-right: 255px;
	margin-left: 10px;
	position: relative;
}
#plan li{
	text-align: left;
	margin-left: 5px;
	margin-top: 10px;
	font-variant: small-caps ;
	list-style-image:url(images/puce.gif);
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: small;
	color: #000092;
}
#droite{/*partie normalement située à droite*/
	width: 700px;
	margin-right: 10px;
	margin-left: 280px;
	float: right;
}
#cadre {/* conteneur global et arrière-plan du titre du cadre */
	width: 650px;
	padding-top: 10px;
	background: url(images/fondhaut.jpg) top no-repeat;
}
#bloccadre {/* arrière-plan bas et sur l'ensemble du cadre */
	width: 650px;
	background: url(images/fondbas.jpg)  bottom no-repeat;
	padding-bottom: 10px;
}
#bloccadre p {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #028A00;
	font-size: small;
	text-align: justify;
	margin-right: 30px;
	margin-left: 30px;
}
#bloccadre li{
	text-align:justify;
	margin-right:30px;
	margin-left: 30px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: small;
	color: #028A00;
	list-style-type: square;
	list-style-position: outside;
}
#bloccadre h2{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #8A0045;
	font-size: small;
	margin-left: 40px;
	font: oblique;
}

Et mon HTML

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<head>
	<link href="style.css" rel="stylesheet" type="text/css">
	<title>..:: La cyberdépendance, qu'est-ce que c'est? ::..</title>
</head>
 
<body>
 
<div id="header"><center><img src="images/banniere.jpg" height="99" width="800"></center></div>
<div id="plan"><ul>
<li>Introduction</ol>
<li>La Société Avant Internet</li>
<li>La Société Avec Internet : Aspects Positifs Et Aspects Négatifs</li>
<li>La Dépendance A Internet</li>
<li>Mon Expérience Personnelle</li>
<li>Conclusion</li>
</ul></div>
 
<div id="droite">
<h1>Introduction:</h1><div id="cadre"><div id="bloccadre"><p>Je me suis demandé ...</p></div></div>
 
 
<h1>La communication avant Internet:</h1><div id="cadre"><div id="bloccadre"><p>Avant la fameuse arrivée d'Internet, les personnes s'informaient ...</p>
<p>Les gens ....</p></div></div>
 
<h1>La communication avec Internet:</h1><div id="cadre"><div id="bloccadre"><h2>Accès à l'information :</h2>
<p>De plus en plus de personnes...</p>
 
<h2>Relations sociales:</h2>
<p>Internet est accessible.....</p>
 
<p>Les "drogués" d'Internet ....</p>
 
<h2>Monde du travail:</h2>
 
<p>Dans le monde du travail ...</p>
 
<h2>Gestion du temps et stress</h2>
 
<p>Les e-mails (1972), ces fameux courriers ...</p></div></div>
 
 
<h1>La dépendance à Internet:</h1>
<div id="cadre"><div id="bloccadre"><h2>Portrait d'un cyberdépendant</h2>
 
<p>Le cyberdépendant néglige ...</p>
 
<h2>Il existe plusieurs types de cyberdépendance:</h2>
<ul>
<li>La cyberdépendance ...</li>
<li>La cyberdépendance...</li>
<li>La cyberdépendance ...</li>
</ul>
<p>On estime le nombre... </p></div></div>
 
<h1>Mon expérience personnelle:</h1>
<div id="cadre"><div id="bloccadre"><p>J'ai découvert Internet,....</p></div></div>
 
<h1>Conclusion:</h1>
<div id="cadre"><div id="bloccadre"><p>Internet ...</p></div></div></div>
 
</body>
</html>

Un grand Merci d'avance

Essaye de changer dans
Code:

1 2 3 4 5 6 7 #plan{ background-color: Red; width: 250px; margin-right: 255px; margin-left: 10px; position: relative; }
par

Code:

position: absolute;

++

Merci beaucoup, j'ai même remplacer par fixed, comme ca le menu se déplace avec le défilement :D

Citation:

Envoyé par v4np13

Merci beaucoup, j'ai même remplacer par fixed, comme ca le menu se déplace avec le défilement :D

Ouaip c'est vrai.
Sinon pour résolu, pas besoin d'éditer ton titre : tu as un bouton en bas a gauche de la zone où tu lis ce message avec "résolu" et tu clic ;)
++