Problème Rectangle Position

**max1395** · 17/03/2011, 21h47

Bonjour

Voila j'ai un site et je voudrais créer une sorte de rectangle , de largeur 100% et de hauteur 20% , qui serait afficher en haut du site , et qui bougerais si on descends dans la page . Et après une autre rectangle , qui commence a 20% de la page . J'ai fais un début de code mais ça ne marche pas , sur google chrome , le 2em rectangle ne se mets pas a 20% , sur Mozilla : Pareil et sur Internet Explorer : sa se met bien mais ça ne descends pas quand on descends sur la page .

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
 
    <style type="text/css">
#boite
{
    vertical-align : top;
	height: 19%;
	width: 99%;
	position: fixed;
	background-color: blue;
	background-position : top;
	border-style : outset ;
}
table {
margin-top  : 21% ;
}
body
{
   margin: 21%;
   padding: 0;
}
    </style> 	
</head>
<body>
<div id="boite">
//1er rectangle 
</div>
<table border="4">
<tr>
<?php include ('index.php') ;?>//2em rectangle 
</tr>
</table>
</body>

**Nesmontou** · 17/03/2011, 22h26

Bonsoir,

Il manque les propriétés de positionnement top et left :

Code :

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

1
2
3
4
5
6
<div id="boite">
    <!-- 1er rectangle -->
</div>
<table>
    <!-- 2ème rectangle -->
</table>

Et le style CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#boite {
    height: 20%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
 
table {
    left: 0;
    position: fixed;
    top: 20%;
}

Bon développement

**max1395** · 17/03/2011, 23h14

Non malheureusement ça na rien changer , je ne comprends vraiment pas . Merci

**Nesmontou** · 18/03/2011, 21h11

Bonsoir,

J'ai testé le code suivant qui semble répondre à ton besoin :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Test</title>
 
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
 
			body, html {
				height: 100%;
				width: 100%;
			}
 
			#haut {
				background: #00f;
				height: 20%;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
			}
 
			#gauche {
				background: #f00;
				left: 0;
				position: fixed;
				top: 20%;
				width: 200px;
			}
 
			#contenu {
				margin: 0 0 0 200px;
			}
		</style>
	</head>
	<body>
		<div id="haut">
			<!-- Bloc haut -->
		</div>
		<div id="gauche">
			<!-- Bloc de gauche -->
		</div>
	</body>
</html>

Tests réalisés sous Chrome 10 et Firefox 3.6

**max1395** · 19/03/2011, 00h32

Parfait merci ça marche

Problème Rectangle Position

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager