Centrer une page html avec plusieurs calques

ibrahim41 Messages postés 151 Date d'inscription   Statut Membre Dernière intervention   -  
ibrahim41 Messages postés 151 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

j'essaie en vain de centrer ma page html. pour qu'elle soit centrer à l'écran avec n'importe quelle résolution.

j'ai lu dans les forums qu'il faut faire à l'aide de tableau. le souci, c'est que tout est fini. il me manque juste à centrer la page. donc, je n'utiliserai pas la forme du tableau.

dans d'autres forums, j'ai lu qu'il fait que je creer une div avec le contenu du site puis une règle css. c'est ce que je m'efforce à faire mais je n'y arrive pas. le contenu du site n'est toujours pas centré. je vous transmet les codes html de ma page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BNA</title>
<style type="text/css">
<!--
#en-tete {
position:absolute;
left:202px;
top:2px;
width:800px;
height:100px;
}
#boutons {
position:absolute;
left:0px;
top:150px;
width:1100px;
height:40px;
z-index:2;
background-color: #CCCCCC;
}
#marque {
position:absolute;
left:0px;
top:190px;
width:300px;
height:810px;
z-index:3;
background-color: #999999;
}
#infos {
position:absolute;
left:300px;
top:190px;
width:800px;
height:810px;
z-index:4;
}
#bas {
position:absolute;
left:0px;
top:1000px;
width:1100px;
height:40px;
z-index:5;
background-color: #CCCCCC;
}
body,td,th {
color: #000000;
}
body {
background-color: #F3F3F3;
background-image: url();
}
#en-tete {
position:absolute;
left:0px;
top:0px;
width:850px;
height:100px;
z-index:1;
background-color: #FFFFFF;
}
#boutons {
position:absolute;
left:0px;
top:110px;
width:850px;
height:30px;
z-index:2;
}
.boutons {
}
#Layer1 {
position:absolute;
left:199px;
top:111px;
width:50px;
height:12px;
z-index:3;
}
.boutons {
background-color: #FFFFFF;
border: thin double #000000;
clear: Aucune;
float: Aucune;
height: auto;
width: auto;
color: #FFFFFF;
}
.boutons {
color: #FFFFFF;
text-decoration: none;
}
boutons {
color: #FFFFFF;
text-decoration: none;
background-color: #E0DFE3;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
.lien {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #FFFFFF;
}
#Layer2 {
position:absolute;
left:107px;
top:110px;
width:90px;
height:25px;
z-index:3;
}
#Layer3 {
position:absolute;
left:301px;
top:110px;
width:95px;
height:25px;
z-index:4;
}
#Layer4 {
position:absolute;
left:501px;
top:111px;
width:95px;
height:25px;
z-index:5;
}
#Layer5 {
position:absolute;
left:711px;
top:109px;
width:90px;
height:25px;
z-index:6;
}
.Style2 {color: #000000}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
}
#Layer6 { position:absolute;
left:0px;
top:150px;
width:200px;
height:800px;
z-index:7;
background-color: #E0DFE3;
}
#Layer6 { border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
#Layer7 {position:absolute;
left:200px;
top:150px;
width:650px;
height:800px;
z-index:8;
background-color: #EBEBEB;
}
#Layer7 {border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
#Layer8 {}
#Layer8 {position:absolute;
left:0px;
top:960px;
width:850px;
height:25px;
z-index:9;
background-color: #CCCCCC;
border: 1px solid #000000;
}
#Layer9 {
position:absolute;
left:342px;
top:329px;
width:390px;
height:470px;
z-index:10;
background-image: url(images/chantier.jpg);
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}

#conteneur
{
width: 850px;
margin-left: auto;
margin-right: auto;
}

-->
</style>
</head>

<body>
<div id="conteneur">
<div id="en-tete">
<div align="left"><img src="images/entete2.jpg" width="850" height="100" /></div>
</div>
<div id="boutons">
<h3 align="left"><a href="BNA/acces/images/entête.jpg" class="boutons"></a> </h3>
</div>
<div id="Layer2">
<div align="left"><a href="index.html">Accueil</a></div>
</div>
<div id="Layer3">
<div align="left"><a href="occasions/occasions1.html">Occasions</a></div>
</div>
<div id="Layer4">
<div align="left"><a href="acces/acces1.html">Plan d'accès</a> </div>
</div>
<div id="Layer5">
<div align="left"><a href="contact/contact.php">Contact</a></div>
</div>
<div id="Layer7"></div>
<div id="Layer9"></div>
<p align="left"> </p>
<div id="Layer8"></div>
<p align="left"> </p>
<p align="left"> </p>
<p align="left"> </p>
<p align="left"> </p>
<div id="Layer6">
<p align="left"> </p>
</div>
<p align="left"> </p>
</div>

</body>

</html>


merci pour vos réponses.

cordialement.
A voir également:

6 réponses

Réponse 1 / 6
olynx
 
Bonjour,
il faut que dans ton css tu donne une taille à ton body et que tu fasse margin: 0 auto ce qui donne :
body {
width: Xpx;
margin: 0 auto.
}

Et normalement ta page est centrée.
Bon courage
0
Réponse 2 / 6
ibrahim41 Messages postés 151 Date d'inscription   Statut Membre Dernière intervention   2
 
ça ne marche pas....
0
Réponse 3 / 6
ibrahim41 Messages postés 151 Date d'inscription   Statut Membre Dernière intervention   2
 
bonjour,

problème résolu...avec un autre code.

du genre :

#contenu{
width:850px;
position:absolute;
left: 50%;
margin-left: -425px;
}
0
olynx
 
Tu ne règles pas le pb, enfin tu règles le pb par rapport à ta fenêtre à toi.
Mais si une personne a une taille différente plus petite ou plus grande, ton site sera soit plus sur la droite ou plus sur la gauche.
0
Réponse 4 / 6
ibrahim41 Messages postés 151 Date d'inscription   Statut Membre Dernière intervention   2
 
bonjour,

aaaaaaaaaah....... dommage, je croyais que c'était résolu....

mais qu'en est-il du code? j'ai essayé et ça n'a pas marché.

j'ai donc remis une balise div avec le nom :
</body>
<div id="contenu">

ensuite le contenu de mon site

pour finir avec une balise div
</div>
</body>

et en règle css :
#contenu{
width:850px;
position:absolute;
left: 50%;
margin-left: -425px;
}


Donc quel est le code a appliqué pour centrer l'image avec n'importe quelle résolution? en sachant que mon site fait 850px de largeur.

j'ai essayé en règle css:
body {
width: 850px;
margin: 0 auto.
}

ou :

#body {
width: 850px;
margin: 0 auto.
}

mais cela n'a pas fonctionné, peut-être que je m'y suis mal pris..... qu'entends-tu par "il faut que dans ton css tu donne une taille à ton body ". c'est bien celle que j'ai émise : 850px?

merci pour ton aide.

cordialement.
0

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

Posez votre question
Réponse 5 / 6
ibrahim41 Messages postés 151 Date d'inscription   Statut Membre Dernière intervention   2
 
bonjour,

quelqu'un a une autre idéé?
0
olynx
 
Et si tu faisais comme je t'ai dit mettre une taille au body avec un margin 0 auto et tu enlevais les positions absolute.
0
Réponse 6 / 6
ibrahim41 Messages postés 151 Date d'inscription   Statut Membre Dernière intervention   2
 
bonjour,

excuse moi, mais je n'ai pas très bien saisi.
ça serai quelque chose de ce genre (avec le "#" avant body)? :
#body {
width: 850px;
margin: 0 auto.
}

et je supprime cette ligne à toutes mes règles css (#en-tete, #bouton, #marque, #infos......) ? :
position:absolute;

merci.

cordialement.
0

Discussions similaires

connection ok mais aucune page ne s'affiche
gandounet -
fabiennetitou -

10 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses