Centrer un div...

**Davboc** · 12/01/2006, 23h21

Salut !
Voila le site que je suis en train de créer :
http://davboc.free.fr/Tahlaniak/Site...L/accueil.html

J'ai trois questions à vous poser à ce propos, dans l'ordre inverse d'importance :

1) avez vous des commentaires/observation ? Lachez vous je suis pas susceptible

2) quand j'essaie de l'ouvrir à partir de firefox ce dernier me demande de l'ouvrir comme si je le télechargeais, c'est à dire qu'il me propose de l'ouvrir avec firefox (après l'avoir enregistré dans c:\temp) ou bien de l'enregistrer...

3) savez-vous comment je peux le centrer ? tout est placé avec des div absolus... j'ai essayé de mettre en relatif avec align=center dans les arguments du div du cadreprincipal mais du coup je sais pas comment placer les autres éléments en fonction de lui... Si je les met en relatif aussi ils se mettent dessous...
En fait j'aimerais pouvoir placer le cadre principal au milieu et à une certaine distance du haut et ensuite tout placer par rapport à lui (les boutons de gauche et de droite, celui du haut et le footer) Est-ce possible ? Si oui comment ?

**Auteur** · 12/01/2006, 23h58

bonsoir,

2)

Envoyé par Davboc

quand j'essaie de l'ouvrir à partir de firefox ce dernier me demande de l'ouvrir comme si je le télechargeais, c'est à dire qu'il me propose de l'ouvrir avec firefox (après l'avoir enregistré dans c:\temp) ou bien de l'enregistrer...

regarde voir si ces balises meta n'infulence pas ce comportement (supprime les du code et charge la page) :

Code :

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

1
2
3
 
<meta name="classification" content="Personal" />
<meta name="doc-type" content="Web Page" />

3)
Si tes div sont placés de façon absolue, tu peux affecter des valeurs aux attributs left, right, top, bottom. Exemple :

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.MonDiv{
position: absolute;
left: 200px;
top: 40px;
right: 200px;
bottom: 50px;
}
 
//-->
</style>
 
</head>
 
<body>
<div class="MonDiv">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</div>
 
</body>
 
</html>

par contre je te conseille de tester ta page avec différents navigateurs et différentes résolutions pour éviter les mauvaises surprises.

Et si tu veux center un div : affecte la même valeur à right et left (dans ce cas l'attribut width est inutile). Il faudra sans doute aussi jouer sur les marges.

**Davboc** · 13/01/2006, 00h39

C'est ce que je fais sur la version actuelle : je place mes elements avec left et top. le probleme est que si je met de l'absolu ca sera centré pour une résolution donnée mais plus du tout pour une autre... C'est pour cela que je pense être obligé d'utiliser l'attribut align="center"...

Pour ce qui est du probleme de firefox il ne se produisait pas avant mon dernier upload et ces balises meta y étaient deja... Il ne se produit pas avec IE...

**Davboc** · 13/01/2006, 10h27

je crois que j'ai trouvé la solution : en positionnement absolu il ne faut pas utiliser des valeurs en pixel mais en pourcentage !
Reste à savoir ce qui se passe si l'ecran est plus petit que la valeur height de mon div qui elle sera obligatoirement en pixel...

[edit] A propos des valeurs de pourcentage est-ce que c'est moi ou est-on obligé de mettre des pourcentages entiers ? j'ai essayé de mettre 8,5% ca marche pas (ca ignore le left) et 8.5% rend apparement comme 8%...

[reedit] ouais ben je laisse tomber le centrage firefox et iexplorer reagissent meme pas pareil...

**marsupix** · 13/01/2006, 20h55

pour le centrage horizontal, c'est simple:
il suffit de fixer la largeur et de mettre margin:auto; (ou spécifier séparément margin-left et margin-right)

Pour le centrage vertical, ça dépend de la résolution du visiteur.
Je suis sur le meme problème en ce moment et j'avais pensé récupèrer en javascript la résolution du navigateur pour puis faire un calcul par rapport à la hauteur total du site pour définir le margin-top de la div contenant l'interface...

Ensuite je ne sais pas quelle résolution tu utilise mais je suis en 1024*768 et je n'ai pas l'interface entière... alors pense qu'il y a encore des gens en 800*600...

alors imagine ce qu'ils voient de ton site..
le plugin WebDeveloper de firefox est ton ami pour tester la page avec plusieur résolutions (et ausi valider tes pages etc)

edit
si c'est les images finales pour les boutons etc, il faudra revoir le format de fichier et/ou les paramètres de compression... car là on dirai du jpeg trop compressé (effet de mosaïque)

**Davboc** · 15/01/2006, 20h19

un collègue m'a parlé de centrer tout par rapport au milieu de l'ecran... ca a l'air interessant mais je n'ai pas encore eu le temps de m'y mettre...

Pour les images (jpg) j'ai essayé de trouver un compromis entre qualité et taille parce que si elles sont trop grosses elles vont mettre une plombe à se charger...

**marsupix** · 16/01/2006, 14h00

Envoyé par Davboc

un collègue m'a parlé de centrer tout par rapport au milieu de l'ecran... ca a l'air interessant mais je n'ai pas encore eu le temps de m'y mettre...

Pour les images (jpg) j'ai essayé de trouver un compromis entre qualité et taille parce que si elles sont trop grosses elles vont mettre une plombe à se charger...

Si tu trouve la soluce pour centrer au milieu de l'écran ça m'interresse (mail au pire

)
Pour les images, le jpeg est peut etre pas la meilleur solution (jpeg c'est mieux pour les images type "photos". essai en png

**Trunks** · 16/01/2006, 14h30

moi je sais comment faire pour tout centrer au milieu. Je vous donne ça dans 1h je dois y aller.

**Trunks** · 16/01/2006, 14h32

Pour le vertical : http://www.developpez.net/forums/viewtopic.php?t=442714

Pour l'horizontal:

Code :

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

1
2
width: 20px; /* faut spécifier une largeur */
margin: 0 auto;

**Davboc** · 16/01/2006, 17h26

Merci je vais tester ça dès que j'ai du temps

**marsupix** · 16/01/2006, 20h03

Envoyé par Trunks

Pour le vertical : http://www.developpez.net/forums/viewtopic.php?t=442714

merci beaucoup j'y avais pas pensé

**Trunks** · 16/01/2006, 22h50

De rien, moi aussi la première fois n'y avais pas pensé

Pense au [Résolu]

**Davboc** · 16/01/2006, 22h57

voila j'ai reussi a centrer mon site ! Voila mon css si ca interesse quelqu'un :
le site sera mis en ligne à cette adresse http://tahlaniak.free.fr dans la semaine

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/* CSS Document */
body 
{
	background-color: #C5C5E8;
}
 
h1
{
font-family:"Agency FB", "Arial", "sans-serif";
font-size:30px;
color:#000033;
}
 
h2
{
font-family:"Agency FB", "Arial", "sans-serif";
font-size:18px;
color:#000033;
}
 
h3
{
font-family:"Agency FB", "Arial", "sans-serif";
font-size:22px;
color:#000033;
}
 
#affichagerubrique
{
position:absolute;
margin-left:-163px;
left:50%;
top:45px;
z-index:1;
}
 
#interieurcadreprincipal
{
position:absolute;
height:550px;
width:505px;
margin-left:-223px;
left:50%;
top:260px;
z-index:1;
overflow:auto;
}
 
#cadreprincipal
{
position:absolute;
margin-left:-400px;
left:50%;
top:100px;
z-index:0;
}
 
#entreemenu1
{
position:absolute; 
left:50%;
margin-left:-466px;
top:280px;
z-index:1;
}
 
#entreemenu2
{
position:absolute; 
left:50%;
margin-left:-463px;
top:350px;
z-index:1;
}
 
#entreemenu3
{
position:absolute; 
left:50%;
margin-left:-464px;
top:420px;
z-index:1;
}
 
#entreemenu4
{
position:absolute; 
left:50%;
margin-left:-463px;
top:490px;
z-index:1;
}
 
#entreemenu5
{
position:absolute; 
left:50%;
margin-left:-466px;
top:560px;
z-index:1;
}
 
#entreemenu6
{
position:absolute;
left:50%;
margin-left:-466px;
top:630px;
z-index:1;
}
 
#entreemenu7
{
position:absolute;
left:50%;
margin-left:-464px;
top:700px;
z-index:1;
}
 
#footer
{
position:absolute;
left:50%;
margin-left:-55px;
top:915px;
z-index:1;
}

Centrer un div...

HTML

Vue hybride

Discussions similaires

Partager

Partager