28173 sujets

CSS et mise en forme, CSS3

[résolu] Centrage de la page dans le navigateur

Bonjour,
me revoila avec des tites questions de débutant... Smiley murf
Tout d'abord : Un GRAND MERCI à tous ceux qui m'ont aidé sur mon précédent problème .. Smiley biggrin
Alors voila j'ai un soucis de centrage de ma page dans le navigateur...
j'aimerais centrer ma page horizontallement j'ai pour cela testé les deux méthodes proposées sur ce site:
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS [/url]
Ca ne marche pas....voila mon code xhtml

<body style="direction: ltr;">
<div id="page">
<div id="en_tete"><img id="logo" alt="LOGO"
 src="images/logo.jpg"></div>
<div id="menu">
<div id="menu_galleries">
<h3>G</h3>
<p> <a href="m.html">M</a> <br>
<br>
<a href="b.html">B</a> <br>
<br>
<a href="d.html">D</a> <br>
<br>
<a href="f.html">F</a> </p>
</div>
<div id="menu_autres">
<h3>Autres</h3>
<p> <a href="contact.html">Contact</a> <br>
<br>
<a href="plan.html">Acc&egrave;s</a> <br>
<br>
<a href="Citations.html">Citations</a> <br>
<br>
<a href="????.html">Donnez votre avis</a> <br>
<br>
<a href="i.html">I</a>
<br>
<br>
<a href="fl.html">Fl</a> </p>
</div>
</div>
<div id="acceuil_corps">
<p id="acceuil_corps1">Bienvenue, <br>
bla bla bla<br>
<q> La vie est une fleur. L'amour en est le miel.</q> <br>
Victor Hugo</p>
</div>
<div id="pied_de_page"><br>
Copyright débutant 2006&sbquo;
tous droits r&eacute;serv&eacute;s.<br>
Toute reproduction totale ou partielle est interdite sans l'accord des
auteurs.
</div>
</div>
</body>


Et voici le css:

 <style type="text/css">
q {
font-style: italic;
}
a:active, a:focus {
background-color: #ffcc66;
}
a:hover {
text-decoration: none;
color: green;
}
a {
text-decoration: none;
color: black;
font-style: italic;
}
body {
voir version 1 et 2
}
#page {
voir version 1 et 2
}
#en_tete {
border: 7px double #6fef93;
padding: 3px;
width: 800px;
height: 100px;
}
#logo {
width: 800px;
height: 100px;
}
#menu p {
font-style: oblique;
font-size: 150%;
}
h3 {
font-weight: bold;
text-decoration: blink;
font-size: 250%;
color: #60f7ce;
}
#menu {
border: 7px double #6fef93;
padding: 3px;
font-family: Times New Roman,Times,serif;
text-align: center;
margin-top: 3px;
float: left;
position: static;
background-image: url(images/menu.jpg);
background-repeat: no-repeat;
height: 1000px;
width: 200px;
}
#acceuil_corps {
height: 940px;
width: 600px;
margin-left: 223px;
margin-bottom: 0px;
background-image: url(images/fondrosesroses.jpg);
background-repeat: no-repeat;
}
#acceuil_corps1 {
margin-top: 3.4px;
}
#pied_de_page {
border: 7px double #6fef93;
padding: 0px 3px 3px;
width: 580px;
margin-left: 222px;
margin-top: 0px;
text-align: center;
background-color: white;
height: 63px;
font-family: Times New Roman,Times,serif;
font-size: small;
}
  </style>


Donc voila le code css général alors pour body et #page il y à 2 versions cad les deux méthodes:
version 1 margin-auto:

body {
margin: 0;
height: 100%;
text-align: center
}
#page {
width: 800px
position: realive; 
margin-left: auto; margin-right: auto;
}

version2 retrait négatif:

body{
height: 100% 
}
#global {
position:absolute;
left: 50%; 
width: 800px;
margin-left: -400px; /* moitié de la largeur */
border: 1px solid #000;
}

Alors le résultat, c'est qu'avec la première méthode rien ne change, ma page reste collée au bord gauche du navigateur, et avec la deuxième... Smiley biggol ben ca part en sucette Smiley confus la page est collée au bord gauche mais il en manque la moitiée...
Il semblerait donc que le ratrait soit pris en compte mais pas le positionement absolut à 50% gauche Smiley decu
Donc voila ou j'en suis.....
Merci d'avance pour vos remarques et conseils si productifs Smiley murf
Modifié par mars (21 May 2006 - 14:54)

body {
width: 800px;
margin: 0 auto;
}

a moins que je n'ai pas compris ton probleme sinon il n'y a pas plus simple
Sujet clos
Aller à