Sujet Précédent Sujet Suivant

[CSS] Comment centrer un design ?

Résolu/Fermé
TN360 - 6 févr. 2008 à 16:26
 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;
}

3 réponses

Réponse 1 / 3
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
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 644 Date d'inscription dimanche 27 janvier 2008 Statut Membre Dernière intervention 21 août 2008 289
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.
0
Réponse 3 / 3
TN360
6 févr. 2008 à 17:16
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

Avis site azura home design / Azurahomedesign
sandra -
Zaza -

bonjour je voudrais savoir si ce site est fiable azura home design merci a vous

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

salut;
pour le script HTMLsuivant:
On veut sélectionner l'élément de liste inclus dans l'élément qui a pour attribut class = "trois" en utilisant querySelector()
Puis, on a créér un nouvel élément x comme suit:

comment ajouter cet élément à la liste aprés le dernier élément?

5 réponses
sharp aquos + prise HDMI
gainsborough -
Olomonke -

Bonjour,
J'ai une amie qui a un téléviseur Sharp aquos LC-32GD8E. Ayant résilié son abonnement à Numéricâble, elle ne parvient pas à faire fonctionner sa tv correctement. Elle a acquis un boîtier Brandt Récepteur TNT HD. Je lui ai connecté avec un câble HDMI en sélectionnant la sortie EXT5. Cela fonctionne (image et son) pendant quelques minutes puis tout se coupe pour retrouver la neige sur l'écran. Avec la télécommande, je vois que le téléviseur s'est remis sur la sortie TV et si on reselectionne EXT5 cela fonctionne à nouveau. Si on n'intervient pas le poste reste sur neige pendant quelques temps puis se reconnecte lui même sur EXT5 pour se couper à nouveau après quelques minutes....

6 réponses
trait horizontal avec du css
tipi75 -
alainpre -

Bonjour,

Je n'arrive pas à faire un trait horizontal avec du css.

Merci pour votre aide

9 réponses
léa passion bébé
!!!!!!!!!!!!!!!! -
chat_teigne -

Bonjour,
tout le monde je recherche quelqu'un qui voudré bien m'aider a léa passion bébé je n'arrive pas a ouvrir mes colis.Comment on fait SVP?? réponD moi vite C 1portan.merci davanS

186 réponses