Centrer le design

7 avril 2006 à 19:24:32

Bonjour à tous !

Pour une raison que je ne connais absolument pas, mon design de ce centre pas dans la page

Pourtant, j'apprends le css et c'est exactement le même code de mateo (je suis en train de faire des essais pour mentrainer

Le design de Mateo est bien centré dans la demo du sdz mais quand je mets exactement le même code sur mon pc il ne le centre pas !!!

Mon code :

body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc

*/
}

(juste pour la balise body

)

Si quelqu'un voyait ou est le problème...

Inspirat

7 avril 2006 à 19:33:17

Euh je débute mais il faut mettre comme balise

<center><body>texte de ton site</body></center>

dans ton fichier HTML.
Non?

stuart

7 avril 2006 à 19:33:48

as-tu bien mis les balise body dans ton code html??
et vérifie que ton chemin du css dans ton code html est bon

Smashboy

7 avril 2006 à 19:43:35

Pour Bakurox : C'est du css, et non de l'html

Pour stuart : J'ai vérifié et le les deux paramètres sont vérifiés...

Inspirat

7 avril 2006 à 21:16:06

oui mais le probleme vient probablement de ton code html

où il faut rajouter la balise "center" qui doit encadrer "body".

Enfin il me semble

Anonyme

8 avril 2006 à 9:53:12

body
{
width:760px;
margin:auto;
}

Ce code devrais amplement suffire

Vérifie une nouvelle fois que tu chemin vers le fichier CSS est bien correct...

Smashboy

8 avril 2006 à 11:15:13

Merci Bakourox, je mets la balise <body> entre des <center> et le haut de la page et le centre sont centrés. Il ne me reste qu'à ajuster le menu avec margin-left

Merci encore

Thunderseb

8 avril 2006 à 11:33:25

Bakourox, la balise CENTER n'est pas valide !

Connector, fais plutot comme ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="Macromedia Dreamweaver 8.0 Mode Codeur" />
<style type="text/css">
#all {
text-align: center;
}
</style>
</head>
<body>
<div id="all">

</div>
</body>
</html>

Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

Smashboy

8 avril 2006 à 11:52:56

Ca ne marche toujours pas ! Il ne me le centre pas avec cette méthode. Mais text-align est juste pour le texte je pense (enfin je suis moins doué et j'ai moins d'expérience que toi). Je coyait que c'était margin: auto

Thunderseb

8 avril 2006 à 12:00:39

Ca marche très bien chez moi.

Donne ton code complète alors

Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

Bravad0

8 avril 2006 à 12:13:53

Margin : auto; ne marche pas sous internet explorer...tu utilise quoi comme navigateur ?

Thunderseb

8 avril 2006 à 12:18:59

Ma solution marche sous IE et Firefox.

Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

Smashboy

8 avril 2006 à 12:35:54

Je te passe mon code css :

body {
margin: auto;
margin: 20px;/* sans marges, la page sera collée aux bords */
font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
font-size: 12px; /* on définit la taille de police de base dans la page */
background-image: url("../02 Net Annuaire/images/arriere_plan.gif");
}
.all {
margin: auto;
}

.head1 {
background-image: url('images/haut.gif');
width: 770px;
height: 91px;
}

.head2 {
background-image: url('images/head2.gif');
width: 770px;
height: 36px;
}

.logo {
float: right; /* alignement du logo à droite */
margin-right: 10px; /* placement du logo dans son conteneur, head1 */
margin-top: 3px;
border: 0;
}
.gauche {
position: absolute;
left:0; /* on place le bloc gauche à gauche en position absolue */
background-image: url('images/menu.gif');
width: 181px;
height: 337px;
margin-left: 20px;
}
.centre {
margin-left: 181px; /* on place le bloc centre par rapport à la largeur du bloc gauche */
width: 586px;
padding-top: 30px;
}
.menu { /* on définit un conteneur pour le menu */
margin-top: 30px;
width: 160px;
border: 1px solid #060C6F;
background-color: #B7D3F0;
font-family: verdana, arial;
font-size: 110%;
text-align: center;
}
h1 {
font-size: 140%;
text-align: right;
}
h2 {
font-size: 100%;
text-align: right;
}
ul,li {
list-style-type: none; /* pour ne pas avoir de puces */
margin: 0;
padding:0;
line-height: 30px; /* interligne */
}
.menuhaut {
float: right; /* on aligne le menu vertical à droite de son conteneur, head3 */
margin-right: 10px;
margin-top: 10px;
}

.menuhaut a
{
font-size: 16px;
font-weight: bold;
color: #060C6F;
text-decoration: none; /* pour éviter le soulignement au survol */
margin-left: 20px; /* espacement entre chaque sous-menu */
}
.lien_titre
{
font-size: 140%;
font-family: Arial, serif;
font-weight: bold;
}
.lien_titre:active
{
color: red;
font-weight: bold;
}
.lien_titre:visited
{
color: blue;
font-weight: bold;
}
.lien_titre:visited:active
{
color: red;
font-weight: bold;
}
.description_site
{
font-family: Arial;
font-size: 120%;
}
.lien_vert
{
color: green;
font-family: Arial;
font-size: 120%
}
.tiret_vert
{
color: green;
}
a img
{
border: none;
}

il n'est pas très long car je suis en train de le construire !

Thunderseb

8 avril 2006 à 15:38:52

Remplace :

.all {
margin: auto;
}

Par :

#all {
text-align: center;
}

Et tu dois bien appelé ton div comme ça : <div id="all">

Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

Smashboy

8 avril 2006 à 18:25:29

Le problème c'est qu'il centre aussi le texte et qu'il ne centre pas le menu de gauche