Centrer un div...

Version imprimable

12/01/2006, 23h21
Davboc

[resolu]Centrer un div...

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

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 ?

bonsoir,

2)

Citation:

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:

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:

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">  </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.

13/01/2006, 00h39
Davboc

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...
13/01/2006, 10h27
Davboc

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...
13/01/2006, 20h55
marsupix

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... :roll: 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)
15/01/2006, 20h19
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...
16/01/2006, 14h00
marsupix

Citation:

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 ;)
16/01/2006, 14h30
Trunks

moi je sais comment faire pour tout centrer au milieu. Je vous donne ça dans 1h je dois y aller.
16/01/2006, 14h32
Trunks
Pour le vertical : http://www.developpez.net/forums/viewtopic.php?t=442714

Pour l'horizontal:
Code:

1 2 width: 20px; /* faut spécifier une largeur */ margin: 0 auto;
16/01/2006, 17h26
Davboc

Merci je vais tester ça dès que j'ai du temps
16/01/2006, 20h03
marsupix

Citation:

Envoyé par Trunks

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

merci beaucoup j'y avais pas pensé :wink:
16/01/2006, 22h50
Trunks

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

Pense au [Résolu]

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:

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;
}