Je n'arrive pas à centrer mon site
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
Quand je modifie mes codes par exemple :
Ca donne comme l'image 2 (décalé)
POUVEZ VOUS M'AIDER SVP ?
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 ?
4 réponses
-
euh ...
body{
width:1000px;
margin:auto;
}
?? non ? -
Utilise plutôt que des positions fixe comme des px , des pourcentages ce qui permet une adaptation a tout les écrans.
-
tu veux dire que je remplace les px par des % ?
-
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ètretext-align:center;
Et évidement il faudra appliquer a nouveau le paramètretext-align:ce que tu souhaite;
aux enfants de #global pour avoir l'alignement voulut dans les enfants
bon courage ;)
