left:50%

Version imprimable

17/01/2006, 14h06
canabral

left:50%

Bonjour,

Je souhaite placer un block au milieu de ma page (en largeur) j'utilise donc left:50%, en pourcentage pour que le résultat soit le même suivant les résolutions :

Code:

.ensemble {position:absolute; left:50%; height:100%; width:760px;}

Mais le bloc reste sur la gauche comme si j'avais left:0%.
Lorsque j'utilise left:512px (1024/2) le bloc se positionne bien en milieu de page. Le problème c'est que pour une résolution en 800*600 cela ne correspond plus au milieu de page ...

Pourquoi les pourcentages ne marchent pas?? (Pour info sur IE le bloc se positionne bien mais pas sur Firefox en %)

Merci[/code]
17/01/2006, 14h14
Manium
Salut

rajoute
Code:

1 2 margin-left : -380px;
[/img]
17/01/2006, 14h19
canabral

le left:50% va placer mon bloc au milieu de page et le margin-left:-380px va me le retourner à gauche (avec une petite marge) c'est ce que je veux faire pour centrer mon site ... et c'est ce que j'ai essayé.

Mais le left:50% n'est pas priss en compte donc quand j'ajoute margin-left:-380px j'ai une marge de -380 à partir de 0 donc le bloc se retrouve complétement à gauche coupé en 2....

Je ne sais pas si je suis bien clair ....

Exemple pour centrer un bloc dans une 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
<!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>Centrer un bloc</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
        margin: 0;
        text-align: center;
}
 
.ensemble {
        position: relative;
        width: 760px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        background: #ff0;
}
</style>
</head>
 
<body>
 
...contenu avant le bloc...
 
<div class="ensemble">
	<p>contenu du bloc</p>
</div>
 
...contenu après le bloc...
 
</body>
</html>

17/01/2006, 16h36
canabral

jusque la je suis d'accord,

si dans ensemble je veux ajouter 2 bloc fils différents (avec une hauteur différente par exemple) et que ces 2 blocs doivent se trouver l'un en dessous de l'autre (sans ce superposer) commen faut-il faire?

Déjà merci pour ta réponse
17/01/2006, 16h38
ghohm

:faq:

:arrow: http://web.developpez.com/faq/html/?...orizontalement

Gôm

Citation:

Envoyé par canabral

jusque la je suis d'accord,

si dans ensemble je veux ajouter 2 bloc fils différents (avec une hauteur différente par exemple) et que ces 2 blocs doivent se trouver l'un en dessous de l'autre (sans ce superposer) commen faut-il faire?

Déjà merci pour ta réponse

Tu ajoutes simplement tes blocs dans le bloc ensemble. Les blocs n'ont pas de positionnement absolu dans cet exemple.

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
<!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>Centrer un bloc</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
   margin: 0;
   text-align: center;
}
 
.ensemble {
   position: relative;
   width: 760px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
   background: #ff0;
}
 
.bloc1 {
        height: 50px;
        background: #f0f0f0;
}
 
.bloc2 {
        height: 250px;
        background: #ffdead;
}
</style>
</head>
 
<body>
 
...contenu avant le bloc...
 
<div class="ensemble">
	<div class="bloc1">
		contenu du bloc #1
	</div>
 
	<div class="bloc2">
		contenu du bloc #2
	</div>
</div>
 
...contenu après le bloc...
 
</body>
</html>

18/01/2006, 09h13
canabral

je vais essayer mais je pense avoir essayé comme ça et le tout se superposait ...