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 -
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.
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:
- Difficultés pour centrer mon site en CSS
- Site comme coco - Accueil - Réseaux sociaux
- Site de telechargement - Accueil - Outils
- Site pour vendre des objets d'occasion - Guide
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site pour partager des photos - Guide
5 réponses
Bonjour,
Essaye
Vois http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
+ Le
Ton “#menu_verticale” devrait plutôt s'appeler “#menu_horizontal” (-;
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” (-;
Essaye :
+ 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
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
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
Mais voici une copie d'ecran :
https://www.imagevenue.com/view/o/?i=47839_probleme_122_45lo.JPG&h=img2158
Bon finalement j'ai trouvé une solution en supprimant le
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 !
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 !
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.
@+
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.
@+
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ca marche !!!
Merci beaucoup hehe !
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...
En effet (-;
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.