[CSS] Comment centrer un design ?
Résolu
TN360
-
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;
}
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;
}
Configuration: Windows Vista Internet Explorer 7.0
3 réponses
-
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. -
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. -
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 !
