[CSS] Comment centrer un design ?
Résolu/Fermé
A voir également:
- [CSS] Comment centrer un design ?
- Css exposant ✓ - Forum CSS
- Enlever le soulignement d'un lien css - Astuces et Solutions
- Comment mettre le centre de controle sur l'écran - Guide
- Virginie organise un rallye avec 30 équipes. elle veut créer un code pour désigner chaque équipe. elle a commencé à la main, mais elle voudrait le faire calculer à l'aide d'une formule. proposez une formule comportant une seule fonction et à recopier vers le bas dans la colonne a du fichier à télécharger. quelle formule sera en a9 ? ✓ - Forum Excel
- Fusionner et centrer excel grisé ✓ - Forum Excel
3 réponses
ericleclerc1985
Messages postés
644
Date d'inscription
dimanche 27 janvier 2008
Statut
Membre
Dernière intervention
21 août 2008
289
6 févr. 2008 à 17:09
6 févr. 2008 à 17:09
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.
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.
ericleclerc1985
Messages postés
644
Date d'inscription
dimanche 27 janvier 2008
Statut
Membre
Dernière intervention
21 août 2008
289
6 févr. 2008 à 16:57
6 févr. 2008 à 16:57
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.
Il y a un moyen, je vais essayer de le trouver.
