[CSS] Comment centrer un design ?

Résolu

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;
}

Afficher la suite

A voir également:

[CSS] Comment centrer un design ?
Fusionner et centrer excel grisé ✓ - Forum Excel
Memup feel design - Forum Disque dur / SSD
Enlever le soulignement d'un lien css ✓ - Forum Webmastering
Comment mettre le centre de controle sur l'écran - Guide
Stb refsw design c'est quoi - Forum Téléviseurs

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.

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.

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 !

Discussions similaires

sharp aquos + prise HDMI

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....

Utilisation des méthodes de manipulations du DOM

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?

Enlever le soulignement sous les liens en HTML/CSS

Document initial créé par Jean-François Pillou

Par défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none :
Grâce au CSS Grâce au CSS via une classe Grâce au CSS en ligne Notre vidéo

Grâce au CSS Pour ce faire, il suffit de définir le code CSS suivant dans votre code HTML :

a:link
{
text-decoration:none;
}

Notez que la pseudo-classe :link permet de ne cibler que les liens hypertextes () et non les ancres (). Vous pouvez toutefois vous en passer si vo...

Problème de reconnaissance Memup feel design

Bonjour,
Je viens de recevoir un DD memup feeel design, quand je le branche sur l'ordi, je ne le trouve pas. Que faut il faire? Il est connu de l'ordi car lorsque je déconnecte le port USB il apparait.

centrer le nom des dossier

Bonjour,

Quand je nomme un dossier le nom n'est plus centré, mais tout à gauche comment si j'etais dans word excel je ne comprend pas.

Configuration: Windows / Chrome 54.0.2840.71

Votre réponse

Discussions similaires