[CSS] Comment centrer un design ?

Résolu
TN360 -  
 TN360 -
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;
}

3 réponses

Réponse 1 / 3
ericleclerc1985 Messages postés 647 Statut Membre 289
 
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.
2
Réponse 2 / 3
ericleclerc1985 Messages postés 647 Statut Membre 289
 
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
Réponse 3 / 3
TN360
 
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 !
0

Discussions similaires

sharp aquos + prise HDMI
gainsborough -
Olomonke -

6 réponses
Utilisation des méthodes de manipulations du DOM
SelOua_2617 -
SelOua_2617 -

5 réponses
Problème de reconnaissance Memup feel design
sasa -
Kiagoo Ross -

6 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
centrer le nom des dossier
rikano -
rikano -

2 réponses