Recentrer un ensemble de calques au départ "absolu"

**gomodo** · 04/11/2008, 10h37

Bonjour à tous,

Contexte initial :
Pour "design-er" un site web, et placer exactement les cadres "div" ici et pas ailleurs, j'ai utilisé des calques en absolu. Intérêt de l'absolu : si un pékos déboule dans votre bureau et souhaite ce calque un peu plus à droite, ou carrément en bas, on lui déplace en direct à la souris exactement la ou il veut, ça va vite.. et c'est normalement l'intérêt du CCS.

Phase 2 :
Tout le monde est content de la maquette du site web.. mais y a un pékos qui souhaite centrer l'ensemble des calques au milieu de son écran, car il trouve pénible d'avoir "tout à gauche"... (Il possède un écran 9000 pouces).

.. et la on commence à rentrer dans l'obscurantisme du CCS : sans les grimoires et les formules magiques, point de salut...

Bon, c'est pas grave, j'y vais quand même, je crée un calque qui se centre au milieu de la page.. dans le grimoire, on m'explique qu'il faut mettre un "margin-left: auto;" + "margin-right: auto;" avec un "width: ..;" sinon ça marche pas bien... (c'est vrai qu'une balise CSS avec 'center' aurait été trop simple).

Question :
Maintenant j'ai ma boite centrée, comment faire pour que les calques de la maquette (validée) se positionne maintenant par rapport au bord de mon cadre centré (et plus le bord du navigateur) ?

Merci aux Elfes et Magiciens qui pourront me répondre.

**HiRoN** · 04/11/2008, 10h47

Salut,

Sans le code (x)HTML & CSS difficile d'en dire plus.
Je ne peux que te conseiller d'aller voir ici.

Maintenant j'ai ma boite centrée, comment faire pour que les calques de la maquette (validée) se positionne maintenant par rapport au bord de mon cadre centré (et plus le bord du navigateur) ?

Difficile à dire sans le code et si tu as passé tout tes div en position:absolute...
Maquette compatible tous navigateurs ?

**gomodo** · 04/11/2008, 10h59

Merci de cette réponse rapide.

Je suis allé voir le lien qui est interessant, mais qui ne répond pas à ma question.

Je souhaite savoir si une série de calque avec position initiale "absolu" peut être déplacé "tel quel" dans un autre calque de manière à reproduire la position au pixel près.. mais à l'intérieur du nouveau cadre (qui est centré en l'occurence).

Dans mon code, il y a beaucoup de calque et ça va être lourd. Mais si nécessaire, je peux créer un exemple plus léger.

**devyan** · 04/11/2008, 11h14

Salut,

Pour centrer un calque absolu il suffit normalement de le positionner au centre moins la moitié de sa largeur. Ca paraît logique mais c'est exactement ce qu'il faut faire

Essaye ceci:

Code :

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

1
2
3
4
<div style="background:#CDE; position: absolute; 
width: 250px; height: 400px; 
top: 0; left: 50%; 
margin-left: -125px;"></div>

**gomodo** · 04/11/2008, 12h03

Merci pour ta réponse devyan, mais ce n'est pas ma question (j'ai compris le truc "logique"), voici le code html simplifié dans lequel il y a un jeu de cadre en absolu sauf "main_center_calque" qui est un cadre centré ( qui fonctionne..devyan :

) ,et je veux placer tous les autres à l'intérieur de ce cadre centré, en conservant la disposition initiale des autres calques de la maquette créés en absolu :

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
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link title="css2" href="maquette.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="main_center_calque">Calque centré : doit recevoir tous les autres calques ci-dessous</div>
<div id="logo_cadre">logo</div>
<div id="info"> info</div>
<div id="valeur">valeur</div>
<div id="menu0">menu0</div>
<div id="zone_large">zone libre</div>
<div id="pub">pub</div>
</body>
</html>

Voici le CSS associé (j'ai essayé de réduire pour l'exemple.. désolé pour la taille) :

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
body {
	background-color: #161531;
	margin: 0px;
}
#main_center_calque{
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	height:600px;
	z-index:0;
	color: #FFFFFF;
	visibility: visible;
	overflow: visible;
	background-color: #00CC00;
}
 
#logo_cadre{
	position:absolute;
	height:87px;
	z-index:1;
	left: 2px;
	top: 2px;
	background-color: #31306B;
	border-bottom-style: none;
	border-right-style: none;
	border-bottom-width: thin;
	border-right-width: inherit;
	color: #FFFFFF;
	visibility: visible;
	width: 403px;
	overflow: visible;
	vertical-align: middle;
	text-align: center;
}
#info{
	position:absolute;
	height:71px;
	z-index:1;
	left: 305px;
	top: 94px;
	background-color: #31306B;
	border-bottom-style: none;
	border-right-style: none;
	border-bottom-width: thin;
	border-right-width: inherit;
	color: #FFFFFF;
	visibility: visible;
	width: 99px;
	overflow: visible;
	vertical-align: middle;
	text-align: center;
}
#valeur{
	position:absolute;
	z-index:1;
	left: 305px;
	top: 169px;
	visibility: visible;
	overflow: hidden;
	width: 403px;
	vertical-align: middle;
	text-align: center;
	height: 65px;
	background-repeat: no-repeat;
	background-color: #31306B;
}
 
#menu0{
	position:absolute;
	z-index:1;
	left: 410px;
	top: 132px;
	background-color: #31306B;
	color: #FFFFFF;
	visibility: visible;
	width: 297px;
	overflow: visible;
	vertical-align: middle;
	text-align: left;
	height: 33px;
}
#zone_large{
	position:absolute;
	z-index:1;
	left: 3px;
	top: 94px;
	color: #FFFFFF;
	visibility: visible;
	overflow: visible;
	width: 298px;
	background-color: #31306B;
	text-align: center;
	vertical-align: middle;
	height: 209px;
}
#pub{
	position:absolute;
	z-index:1;
	color: #FFFFFF;
	visibility: visible;
	overflow: visible;
	width: 296px;
	vertical-align: middle;
	text-align: center;
	height: 126px;
	left: 410px;
	top: 2px;
	background-color: #31306B;
}

Est-ce possible ?

(Merci à HiRon et Dayan pour les précédentes réponses)

**devyan** · 04/11/2008, 12h08

Pourquoi ne pas les mettre PHYSIQUEMENT dans main_center_calque ?

Recentrer un ensemble de calques au départ "absolu"

CSS

Vue hybride

Discussions similaires

Partager

Partager