[CSS] Comment centrer un design ? [Résolu/Fermé]

- - Dernière réponse :  TN360 - 6 févr. 2008 à 17:16
Bonjour

J'ai un problème pour centrer mon design. Je ne sais pas quel balise choisir ...
Voila ce que je peux mettre dans ma balise body

body
{
width: 760px;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("design/fond.png");
margin: auto;

}

Cela ne marche pas, la page est centrer en haut à gauche ...


body
{
width: 760px;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("design/fond.png");
text-align: center;

}

Cela ne marche pas, la page est centrer en haut à gauche, seul la bannière est centrée correctement !


Donc voila, j'aimerais avoir un peu d'aide s'il-vous-plait, j'aimerais une balise à mettre dans la partie body afin de centrer toute la page.

Voici le code entier de la page

____
HTML




<html>
<head>
<title>Titre du site</title>
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />

</head>
<body>
<div id="banniere"> </div>

<div id="menu"><h4>Menu</h4> <br />
<a href="lien.html">Lien<a><br />
<a href="lien.html">Lien<a><br />
<a href="lien.html">Lien<a><br />
</div>

<div id="corps">
<h4>Titre du corps</h4><br />
<p>Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps. <br />
Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps. <br>
Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps.<br />
Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps. </p></div>

<div id="bas"><br /> Copyright "Nom du site" - 2008</div>

</body>
</html>


___
CSS





body
{
width: 760px;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("design/fond.png");
margin: auto /* Ne marche pas */

}


#banniere
{
width: 760px;
height: 100px;
background-image: url("design/banniere.png");
background-repeat: no-repeat;
}


#menu
{
float: left;
width: 150px;
height: 300px;
background-image: url("design/menu.png");
background-repeat: repeat-x;
padding-top: 30px;
padding-bottom: 30px;
font-family: Century Gothic, Arial;
font-size: 11px;


text-align: center;

}

#menu a
{
color: #484848;
}

#menu a:hover
{
font-weight: bold;
}

#menu h4
{
color: #006E6E;
}

#corps
{
float: left;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
padding-bottom: 30px;
color: #484848;
font-family: Century Gothic, Arial;
font-size: 11px;
font-weight: bold;
background-image: url("design/corps.png");
background-repeat: repeat-x;
width: 610px;
height: 300px;

}

#corps h4
{
color: #006E6E;
}
#bas
{
text-align: center;
width: 760px;
height: 30px;
color: #484848;
font-family: Century Gothic, Arial;
font-size: 9px;
font-weight: bold;
}
Afficher la suite 

3 réponses

Meilleure réponse
Messages postés
643
Date d'inscription
dimanche 27 janvier 2008
Statut
Membre
Dernière intervention
21 août 2008
165
2
Merci
CSS - design.css

body
{
background-image: url("design/fond.png");
text-align: center;
}

#page {
width: 760px;
margin-left: auto;
margin-right: auto;
}


#banniere
{
width: 760px;
height: 100px;
background-image: url("design/banniere.png");
background-repeat: no-repeat;
}


#menu
{
float: left;
width: 150px;
height: 300px;
background-image: url("design/menu.png");
background-repeat: repeat-x;
padding-top: 30px;
padding-bottom: 30px;
font-family: Century Gothic, Arial;
font-size: 11px;
text-align: center;

}

#menu a
{
color: #484848;
}

#menu a:hover
{
font-weight: bold;
}

#menu h4
{
color: #006E6E;
}

#corps
{
float: left;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
padding-bottom: 30px;
color: #484848;
font-family: Century Gothic, Arial;
font-size: 11px;
font-weight: bold;
background-image: url("design/corps.png");
background-repeat: repeat-x;
width: 610px;
height: 300px;

}

#corps h4
{
color: #006E6E;
}
#bas
{
text-align: center;
width: 760px;
height: 30px;
color: #484848;
font-family: Century Gothic, Arial;
font-size: 9px;
font-weight: bold;
}

HTML

<html>
<head>
<title>Titre du site</title>
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />

</head>
<body>
<div id="page">
<div id="banniere"> </div>
<div id="menu"><h4>Menu</h4> <br />
<a href="lien.html">Lien<a><br />
<a href="lien.html">Lien<a><br />
<a href="lien.html">Lien<a><br />
</div>

<div id="corps">
<h4>Titre du corps</h4><br />
<p>Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps. <br />
Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps. <br>
Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps.<br />
Ensemble du corps. Ensemble du corps. Ensemble du corps. Ensemble du corps. </p></div>

<div id="bas"><br /> Copyright "Nom du site" - 2008</div>
</div>
</body>
</html>


DONC,
il faut que tu ajoutes dans chaque contenu qui va être à gauche ce code : text-align: left; dans ton CSS.

J'ai ajouté un cadre et je l'ai appelé page, ta page est maintenant dans le milieu.

Dire « Merci » 2

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 70665 internautes nous ont dit merci ce mois-ci

Messages postés
643
Date d'inscription
dimanche 27 janvier 2008
Statut
Membre
Dernière intervention
21 août 2008
165
0
Merci
Ton code est correte, c'est Internet Explorer qui est dans le tord, sur Firefox, le site affiche #1. Donc, il faut mettre un code pour que IE le prend comme du monde.

Il y a un moyen, je vais essayer de le trouver.
0
Merci
Super !

D'la balle, merci beaucoup EricLeclerc1985 ! ! !

J'ai juste rajouter un ' text-align: justify; ' dans la partie corps afin de ne pas centrer le texte

C'est super, merci, je galérais des heures sans résultats !