Mon site n'est pas centrer

A vue d'oeil , ca a l'air d'etre d'une dimension de 600 de width .

Petit rappel , si tu joues avec des pourcentages , 100% prendra l'espace maximum sur une fenetre , et pour centrer un site il suffit de mettre margin-left et margin-right à auto dans les propriétés du body .

| Alerter

Répondre à DIgItaL_ReaM

haris2006

17 Juillet 2006 07:32:08

non j'ai deja mis Margin: auto;

| Alerter

Répondre à haris2006

haris2006

17 Juillet 2006 09:20:38

Quelqu'un pourrait -il m'aider ?

| Alerter

Répondre à haris2006

haris2006

17 Juillet 2006 10:01:52

J'ai vraiment besion d'aide svp

| Alerter

Répondre à haris2006

Sethpolma

17 Juillet 2006 11:17:10

Idem pour moi : il est tout à fait centré. Sous Firefox du moins.

Jolie ta bannière ! :-D

| Alerter

Répondre à Sethpolma

mannkauff

17 Juillet 2006 11:45:12

moi aussi j'ai se probleme
mon site n'est pas du tous centrer
...
++

| Alerter

Répondre à mannkauff

haris2006

17 Juillet 2006 13:30:00

Merci beaucoup sethpoma sinon si quelqu'un pourrait nous aider on vous en serrez trés reconnaisant

Merci

| Alerter

Répondre à haris2006

mr_keyser

17 Juillet 2006 13:41:41

Je voit ton problème!
CSS power!
Tu met toute la page dans un conteneur (div).
Ce conteneur, tu lui met :
une largeur x (par exemple 800px)
une hauteur de 100%
position:absolute
left: 50%
margin-left: -400px (enfaite la moitié de la largeur x)

ca donne par exemple :
Dans le css :

#conteneur {

position:absolute;

width:800px;

height:100%;

left:50%;

margin-left:-400px;

}

dans la page html :

<html>

  <head>

   .....

  </head>

  <body>

     <div id="conteneur">

          la page blalbalabl

     </div>

  </body>

</html>

ca va te centrer ta page quelque-soit la résolution du client!

| Alerter

Répondre à mr_keyser

haris2006

17 Juillet 2006 13:59:17

Merci je vais essayer ;-) :-D

| Alerter

Répondre à haris2006

haris2006

17 Juillet 2006 14:27:46

Sans aucun Résultats...

Bon je vais vous envoyer ma feuille de CSS

Citation :

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: rgb(11,30,78);
}
#en_tete
{
width: 760px;
height: 100px;
background-image: url("Images/logo_du_site.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
}
#menu
{
float: left;
width: 120px;
}
.element_menu
{
background-image: url("Menu1.gif");
background-repeat: no-repeat;

border: 2px solid black;

margin-bottom: 20px;
}
.element_menu h3
{
color: Black;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
.element_menu ul
{
list-style-image: url("puce.png");
padding: 7px;
padding-left: 20px;
padding-right: 0px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: Black;
}

.element_menu a:hover
{
color: orange;
}
#corps
{
margin-left: 140px;
margin-bottom: 0px;
padding: 5px;

background-image: url("corps.gif");
background-repeat:no-repeat;

border: 2px solid black;
}
#corps1
{
margin-left: 140px;
margin-bottom: 0px;
padding: 5px;

background-image: url("corps1.gif");
background-repeat:no-repeat;

border: 2px solid black;
}
#corps2
{
margin-left: 140px;
margin-bottom: 0px;
padding: 5px;

background-image: url("corps2.gif");
background-repeat:no-repeat;

border: 2px solid black;
}
#corps3
{
margin-left: 140px;
margin-bottom: 0px;
padding: 5px;

background-image: url("corps3.gif");
background-repeat:no-repeat;

border: 2px solid black;
}
#corps4
{
margin-left: 140px;
margin-bottom: 0px;
padding: 5px;

background-image: url("corps4.gif");
background-repeat:no-repeat;

border: 2px solid black;
}
#corps5
{
margin-left: 140px;
margin-bottom: 0px;
padding: 5px;

background-image: url("corps5.gif");
background-repeat:no-repeat;

border: 2px solid black;
}
#corps6
{
margin-left: 140px;
margin-bottom: 0px;
padding: 5px;

background-image: url("corps6.gif");
background-repeat:no-repeat;

border: 2px solid black;
}
#corps7
{
margin-left: 140px;
margin-bottom: 0px;
padding: 5px;

background-image: url("corps7.gif");
background-repeat:no-repeat;

border: 2px solid black;
}
#corps h1 /* Tous les titres h1 du corps */
{
color: #B3B3B3;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
height: 30px;

background-image: url("titre.png");
background-repeat: no-repeat;

padding-left: 30px;
color: #B3B3B3;
text-align: left;
}
.truc
{
background-color: #3e4e76;
border: 1px solid black;
}

| Alerter

Répondre à haris2006

mr_keyser

17 Juillet 2006 14:35:58

met la page principale aussi! normale avec ton #corps5, si il est placé au bonne endroit, ca devrait le faire!

| Alerter

Répondre à mr_keyser

daniel89

17 Juillet 2006 14:36:41

yep c'est dans le css
http://www.sexycable.com/" target="_blank">.

| Alerter

Répondre à daniel89

haris2006

17 Juillet 2006 14:45:44

Voila j'ai modifier le corps 5 car je l'avait oublier donc voila la page d'accueil

Citation :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Héote Online</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="Design.css" />
</head>

<body>



<div id="en_tete">
<center><img href src="Images/logo_du_site.gif"></center>
</div>



<div id="menu">
<div class="element_menu">
<h3>Acceuil</h3>
<ul>
<li><a href="Accueil.html">Acceuil</a></li>
<li><a href="http://heotelejeu.superforum.fr/index.forum">Le Forum</a></li>
<li><a href="Aide.html">Aide</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Le jeu</h3>
<ul>
<li><a href="Le jeu.html">Le Jeu</a></li>
<li><a href="downlaod.html">Downloads</a></li>
<li><a href="Screenshots.html">Screenshots</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Divers</h3>
<ul>
<li><a href="La Team E-T.html">La Team ET</a></li>
<li><a href="Chat.html">Chat</a></li>
<li><a href="Livre d'or.html">Livre d'or</a></li>
</ul>
</div>
</div>



<div id="corps">
<p>

<center> Bienvenue sur Héote Online</center></p>
</div>
</div>



<div id="pied_de_page">
<center><p>Copyright 2006, tous droits réservés</p></center>
</div>

</body>
</html>

PS: si vous me prenez pour un nul c'est parce que j'ai 12ans

| Alerter

Répondre à haris2006

mr_keyser

17 Juillet 2006 14:57:34

Tkt, t'est pas nul, tu apprend, c'est plutôt bien!
Donc rajoute à ta page, juste après le <body> :
<div id="corps5">
et juste avant le </body> :
</div>

et tu modifie le #corps5 :

position:absolute;
width:800px;
padding: 5px;
left:50%;
margin-left:-400px;

background-image: url("corps5.gif");
background-repeat:no-repeat;

border: 2px solid black;

| Alerter

Répondre à mr_keyser

haris2006

17 Juillet 2006 15:10:15

Je ne vois pas où tu veux en venir car dans ma page d'accueil le corps de la page n°5 est derrière les autres

| Alerter

Répondre à haris2006

mr_keyser

17 Juillet 2006 15:37:34

Oula... je crois qu'il y as du boulot lol
Faudrai que tu reprenne les bases du css et des div, parcque tu est mal parti là, tu ne doit pas faire une class corps.. pour chaque page! Mais une pour toute les pages! Tu doit pas faire 10 pages non plus, mais une page principale et les autres s'ouvre dans celle-ci! Tu fait ca avec du php (un switch) ca t'évite d'avoir 10 pages à modifier!

| Alerter

Répondre à mr_keyser

mr_keyser

17 Juillet 2006 15:40:42

prend mon msn, je te ferai une petite intro ce soir!

| Alerter

Répondre à mr_keyser

sparrowix

17 Juillet 2006 15:41:52

tu utilise quoi comme navigateur ?

| Alerter

Répondre à sparrowix

haris2006

17 Juillet 2006 15:46:12

Sa yé j'ai déja pris ton MSN et j'utilise IE comme navigateur mais j'utilise plusieur corps parce que si tu le remarque ce n'est pas toujours le meme corps donc ce n'est pas la meme image