Difficultés pour centrer mon site en CSS

Résolu
byothe Messages postés 45 Date d'inscription   Statut Membre Dernière intervention   -  
 léa -
Bonjour à tous,

Ca fait plusieurs jours que j'essayes toutes les solutions que j'ai trouvé sur le net pour centre mon site web en CSS.
Je test pour le moment mon site en local avec EasyPhp sur IE 6 et Firefox.
Sur Firefox, tout va bien mon site se centre.
Par contre sur IE, rien à faire le site reste collé à gauche.

Voici mon code CSS (j'utilise le conteneur global qui inclus toute ma page entre les deux balises body) Je me suis permis de mettre le reste du code CSS au cas ou celui-ci pourrait interferer.

body {

height: 100%;
margin: 0;
background-color: #C9DAFF;
}


div#global {
min-height: 100%;
width: 980px;
margin: auto;
position: absolute;
padding: 0 ;
background: url(images/fondscorps.gif) center repeat-y;
top: 1px;
}

div#center {
/* Pour éviter la superposition
du pied de page et du contenu : */
padding-bottom: 50px;
overflow: auto;
}

div#en_tete
{
width: 980px;
height: 100px;
background-color: #0035AD;
/*background-image: url("images/haut.jpg");*/
background-repeat: no-repeat;
/*margin-bottom: 10px;*/
}

div#menu_verticale
{
width: 980px;
height: 25px;
background: url(images/bandeau980.gif) no-repeat top;
}

div#menu {
float: left;
width: 200px;
height: auto;
/*background: url(images/logoRB.gif) no-repeat bottom right;*/
/*margin-bottom: 40px*/
}

div#corps {
float: right;
width: 780px;
height: auto;
}

div#pied_de_page {
position: absolute;
width: 100%;
height :25px;
bottom: 0px;
}



Merci pour votre aide. J'espère que j'ai été assez clair et précis.
A voir également:

5 réponses

Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Bonjour,

Essaye
  text-align : center;
dans le html {
Vois http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS

+ Le
position: absolute;
du body { est inutile.

Ton “#menu_verticale” devrait plutôt s'appeler “#menu_horizontal” (-;
2
byothe Messages postés 45 Date d'inscription   Statut Membre Dernière intervention   27
 
SUPER !!!
Ca marche !!!
Merci beaucoup hehe !
0
byothe Messages postés 45 Date d'inscription   Statut Membre Dernière intervention   27
 
Enfin je me suis réjouis un peu vite :-( !
Ca marche très bien sur IE.

Mais comme pour que ça marche j'ai aussi du enlever le position : absolute du pieds de page...

... et bien sur Firefox, le corps descend jusqu'en bas de la page (lorsque les pages ne font pas toute la hauteur de l'ecran le corps s'ajuste automatiquement à la hauteur de l'écran). Mais le pied de page se positionne au niveau du bas réel de la page...

Ca doit pas être tres clair ce que j'ai dis...
0
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779 > byothe Messages postés 45 Date d'inscription   Statut Membre Dernière intervention  
 
“Ca doit pas être tres clair”
En effet (-;
0
byothe Messages postés 45 Date d'inscription   Statut Membre Dernière intervention   27 > Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention  
 
Bah c'est pas facile sans pouvoir mettre de copie d'ecran...
Je vais essayer de dessiner la page :

Donc ca c'est ma page :

_____________________
|...................................| }
|...................................| }
|...................................| }Contenu de la page
|...................................| }
|...................................| }
|...................................| }
|XXXXXXXXXXXXXXXXX.| <- pied de page qui se met bien en bas
|...................................| du contenu de la page
|...................................|
|...................................| } Ici le fonds de la page continue au lieu
_____________________ } de s'arrêter au niveau du pied de page

Un dessin vaut mieux qu'un long discours... j'espere que c'est plus comprehensible ???
Merci pour le coup de main en tout cas.
0
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Essaye :
  div#pied_de_page {
    clear : both;
    …
Tu pourras peut-être supprimer “bottom: 0px;”.

+ Même s'il est préférable d'avoir la page en vrai, pour les copies d'écran : hebergement gratuit d images et de photos
0
byothe Messages postés 45 Date d'inscription   Statut Membre Dernière intervention   27
 
Ca ne marche malheureusement pas...
Mais voici une copie d'ecran :

https://www.imagevenue.com/view/o/?i=47839_probleme_122_45lo.JPG&h=img2158
0
byothe Messages postés 45 Date d'inscription   Statut Membre Dernière intervention   27
 
Bon finalement j'ai trouvé une solution en supprimant le
min-height: 100%

dans la partie #corps.

Et comme ca le corps ne descend pas jusqu'en bas de la page et le pied de page se situe bien au niveau du vrai bas de page.

Il ne colle pas au bas du navigateur mais ec n'est pas grave.

En tout cas merci beaucoup !
0
tonnick
 
Et pkoi ne mets tu pas simplement un height: auto pour ta div
et ds body
text-align: center ;(pour centrer le contenu)
margin: 0 auto 0 auto;
padding: 0

>> vc ca, t'es sur que ca passe sur ie et firefox, les 2 plus courants.

eventuellement, evite les positions absolute, c'est super chiant a gérer sf si tu as des div qui se chevauchent.

@+
0
krof65 Messages postés 2 Date d'inscription   Statut Membre Dernière intervention  
 
salut moi j ai un pb avec webcreator qqu un peut il maider
-2

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
léa
 
je sais pas
Lea
-3