Je n'arrive pas à centrer mon site

cs_garance Messages postés 30 Statut Membre -  
Psore Messages postés 120 Statut Membre -
Bonjour,
Je n'arrive pas à centrer mon site et je deviens dingue.
A savoir que je suis novice en la matière.
En pièce jointe 2 images
1 qui représente mes contenus
2 ce qui bouge quand je modifie les codes

MES CODES 
#haut {
	position:absolute;
	left:20px;
	top:20px;
	width:1200px;
	height:417px;
	z-index:1;
}
#milieu {
	position:absolute;
	left:20px;
	top:438px;
	width:1200px;
	height:604px;
	z-index:2;
}
#pied-page {
	position:absolute;
	left:21px;
	top:1040px;
	width:1200px;
	height:349px;
	z-index:3;
	background-image: url(image/pied-page.jpg);
}
#menu-principal {
	position:absolute;
	left:20px;
	top:368px;
	width:1200px;
	height:68px;
	z-index:4;
	background-image: url(image/menu.jpg);
}
#navigation {
	position:absolute;
	left:20px;
	top:436px;
	width:250px;
	height:606px;
	z-index:5;
	background-color: #FFFFFF;
}
#contenu {
	position:absolute;
	left:270px;
	top:436px;
	width:950px;
	height:606px;
	z-index:6;
	background-color: #FFFFFF;
}



Quand je modifie mes codes par exemple :
Ca donne comme l'image 2 (décalé) 
#haut{
       width: 1000px;
       margin: auto;
       display:block;
    }


POUVEZ VOUS M'AIDER SVP ?







A voir également:

4 réponses

Réponse 1 / 4
deeploy Messages postés 54 Statut Membre 6
 
euh ...

body{
width:1000px;
margin:auto;
}

?? non ?
1
Psore Messages postés 120 Statut Membre 1
 
tout à fais d'accord :

<code>
body {
width : la taille que tu désire;
margin : auto;
}

cela va te centrer ton site automatiquement pas besoin de plus
0
Réponse 2 / 4
mr_demonicon Messages postés 921 Statut Membre 126
 
Utilise plutôt que des positions fixe comme des px , des pourcentages ce qui permet une adaptation a tout les écrans.
0
Réponse 3 / 4
cs_garance Messages postés 30 Statut Membre
 
tu veux dire que je remplace les px par des % ?
0
mr_demonicon Messages postés 921 Statut Membre 126
 
non juste par exemple par 50% pour que ta partie prenne la moitie de la page
0
Réponse 4 / 4
bolchevian Messages postés 12 Statut Membre
 
Bonjour,

alors a ce que je vois tu es déjà pas mal pour le css MAIS, mauvaise technique!

La position Absolute est un faux amis et n'est a utiliser que lorsque l'on sait utiliser Position:relative...

=> Par default le body est définit en position:relative. et donc ses enfants vont se positionner en fonction du body.

Tu peux donner la propriété position relative a un element html afin que ses enfants se positionnent en fonction de cet l'élément ^^

Pour pouvoir te donner une sollution efficasse il faudrait aussi avoir ton modèle html.

En l'état, la solution la plus simple est de créer une div qui engloberai tout tes elements de page.

exemple : 

<html>

<head>
<style>
#global{
width:1200px;// taille max de tes éléments histoire de restreindre
position:relative;//permet de dire que les enfant se positionnerons en fonction de cette balise 
margin: 0 auto;//permet de centrer automatiquement l'élément
}
</style>
</head>

<body>
<div id="global" >
<!-- ici tes éléments html -->
</div>
</body>

</html>


Mais avec ton code css et ton positionnement absolut, le problème se reproduira dans ton conteneur global... il faut donc que tu effectue ta mise en page SANS le positionnement absolut pour resoudre ton probléme...

Et pour forcer l'alignement automatique au milieux de ton conteneur global, en admettant que tu n'ai plus la position absolute, tu ajoute à #global le paramètre 
text-align:center;

Et évidement il faudra appliquer a nouveau le paramètre 
text-align:ce que tu souhaite;
aux enfants de #global pour avoir l'alignement voulut dans les enfants


bon courage ;)
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses