Centrer le site au milieu

kacedda · 14/12/2011, 20h14

Bonjour,

Je souhaiterai que mon site soit au milieu de la page, c-a-d laisser deux bandes(zones) vide de chaque coté du site.

J'ai fait ceci:
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
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
 
#site_centrer{
   width: 850px;
   margin: 20px auto;
   border: 1px solid #e7e6d5;
   background: #000000;
}
 
#badeau_haut{
   position: fixed;
   z-index: 2;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 125px;
  background-color: #ffffff;
}
 
#menu_gauche{
   position: fixed;
   left: 0px;
   top: 125px;
   width: 180px;
   height: 100%;
   background: #f0f0f0;
}
 
#contenu_page{
   overflow: auto;
   position: absolute;
   left: 180px;
   top: 125px;
   width: 100%;
   height: 100%;
   background: #f000ff;
}
 
#message_bas{
   border-top      : 2px solid #dedede;
   position        : fixed;
   left            : 0;
   bottom          : 0;
   width           : 100%;
   height          : 40px;
   background      : #ffff00;
}

test.html

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
<html>
 
  <link rel="stylesheet" type="text/css" href="style.css" />
 
  <body>
 
  <div id="site_centrer">
 
    <div id="badeau_haut">
      Ici mon texte du bandeau
    </div>
 
    <div id="menu_gauche">
      Ici le menu
    </div>
 
    <div id="contenu_page">
      Ici le contenu
    </div>
 
    <div id="message_bas">
      Ici le message en bas
    </div>
 
  </div>
 
  </body>
</html>

Je comprend bien qu'il doit y a voir conflit quelque part, mais je n'arrive pas à mettre la main dessus.

Merci

jreaux62 · 14/12/2011, 20h32

Bonjour,
pour te répondre correctement, il faudrait en savoir plus : IE ? ...
1/ définir le doctype

Code :

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

1
2
3
<!DOCTYPE html>
<html>
...

2/ CSS du body :

Code :

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

body { width:100%; height: 100%; /* [...] */ }

12monkeys · 15/12/2011, 12h06

Bonjour

As tu appliqué la solution de la

? http://css.developpez.com/faq/?page=...orizontalement.
Plus comme dit jreaux62 mettre un doctype valide...

kacedda · 15/12/2011, 20h49

Bonjour,
Merci pour vos réponse, en effet je n'ai pas tout copier coller, dsl.
J'utilise le doctype

Code :

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

<!DOCTYPE html>

Html 5, mais je ne sais pas si cela joue beaucoup pour mon problème.
Sinon j'utilise firefox par défaut, donc d'abord le faire marcher chez moi et ensuite ie.

J'ai (ré)essayé avec l'exemple de la FAQ, mais je n'y arrive toujours pas. En fait je pense que cela vient des contraintes que je met dans les autres types (notamment width), j'ai essayé de passer à une taille fixe pour chaque ou par pourcentage, mais je n'arrive jamais à quelque chose de correct. Et pour le moment je tatillone sans vraiment savoir, si quelqu'un à une doc ou un exemple. (Les tutos de developpez m'ont aidé mais là je n'en trouve pas qui traite du sujet).

Merci

12monkeys · 15/12/2011, 21h11

On peut voir une page en ligne pour constater le souci ?

kacedda · 17/12/2011, 17h25

Bonjour,
Ben je débute, je me suis pas encore posé la question de l'hébergement, je n'en ai pas pour le moment. Mais avec copier-coller de l'exemple, on voit bien que le site prend toute la largeur de firefox.

12monkeys · 17/12/2011, 19h02

Ah oui en effet, tu utilises les positionnements fixed et absolute... Ces éléments sortent du flux et ne se positionnent pas en fonction de leur ancêtre...

Alors par exemple pour #badeau_haut modifie le left et le width de cette manière :

Code :

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

1
2
3
4
#badeau_haut {
    left: auto;
    width: 850px;
}

Et faire pareil pour le reste...

NoSmoking · 17/12/2011, 20h21

Bonjour,
on peut noter également qu'avec menu_gauche, avec une largeur de 125px, et contenu_page, avec une largeur de 100%, ta page sera toujours plus large que la page affichée.

15/12/2011, 12h06	#3
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 622 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 622 Points : 6 232 Points : 6 232	Bonjour As tu appliqué la solution de la ? http://css.developpez.com/faq/?page=...orizontalement. Plus comme dit jreaux62 mettre un doctype valide... __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

15/12/2011, 20h49	#4
kacedda Membre actif Inscription : juin 2002 Messages : 635 Détails du profil Informations forums : Inscription : juin 2002 Messages : 635 Points : 177 Points : 177	Bonjour, Merci pour vos réponse, en effet je n'ai pas tout copier coller, dsl. J'utilise le doctype Code : Sélectionner tout - Visualiser dans une fenêtre à part <!DOCTYPE html> Html 5, mais je ne sais pas si cela joue beaucoup pour mon problème. Sinon j'utilise firefox par défaut, donc d'abord le faire marcher chez moi et ensuite ie. J'ai (ré)essayé avec l'exemple de la FAQ, mais je n'y arrive toujours pas. En fait je pense que cela vient des contraintes que je met dans les autres types (notamment width), j'ai essayé de passer à une taille fixe pour chaque ou par pourcentage, mais je n'arrive jamais à quelque chose de correct. Et pour le moment je tatillone sans vraiment savoir, si quelqu'un à une doc ou un exemple. (Les tutos de developpez m'ont aidé mais là je n'en trouve pas qui traite du sujet). Merci
	00

15/12/2011, 21h11	#5
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 622 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 622 Points : 6 232 Points : 6 232	On peut voir une page en ligne pour constater le souci ? __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

17/12/2011, 17h25	#6
kacedda Membre actif Inscription : juin 2002 Messages : 635 Détails du profil Informations forums : Inscription : juin 2002 Messages : 635 Points : 177 Points : 177	Bonjour, Ben je débute, je me suis pas encore posé la question de l'hébergement, je n'en ai pas pour le moment. Mais avec copier-coller de l'exemple, on voit bien que le site prend toute la largeur de firefox.
	00

17/12/2011, 20h21	#8
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour, on peut noter également qu'avec menu_gauche, avec une largeur de 125px, et contenu_page, avec une largeur de 100%, ta page sera toujours plus large que la page affichée.
	10

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email