[CSS] Comment centrer un design ?
Résolu/Fermé
A voir également:
- [CSS] Comment centrer un design ?
- Maeva vient de créer son entreprise de design à montréal. en plus des actions menées sur son site web, elle souhaite développer la visibilité de son entreprise. pour cela, elle peut utiliser différentes techniques. ✓ - Forum Loisirs / Divertissements
- Css lien non souligné - Astuces et Solutions
- Taille bouton css - Forum HTML
- Css retour à la ligne - Forum CSS
- Dans le document à télécharger, léa a utilisé 2 méthodes différentes pour centrer le nom des continents. lesquels sont centrés correctement ? - Forum Jeux vidéo
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.
