Faire gliser à droite...

**v4np13** · 26/03/2005, 02h11

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 :

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

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

**Sun3clipse** · 26/03/2005, 09h10

Essaye de changer dans

Code :

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

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

par

Code :

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

position: absolute;

++

**v4np13** · 26/03/2005, 10h47

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

**Sun3clipse** · 26/03/2005, 10h58

Envoyé par v4np13

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

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

++

Faire gliser à droite...

HTML

Vue hybride

Discussions similaires

Partager

Partager