18041 sujets

Questions générales et questions de débutants

[Résolu] Site web impossible à centrer

Hello! Je souhaiterai centrer mon site web. Manipulation assez facile à réaliser en utilisant le css :

.body{
margin:auto;
height;#px
}


hors, cela ne fonctionne pas chez moi, malgrès après avoir utilisé plusieurs techniques, un conteneur en plus du body... J'ai dû faire une bêtise dans le CSS qui me bloque tout. Quelqu'un pour m'expliquer d'ou viens l'erreur? :3


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Galerie des 13 regards</title>
<link rel="stylesheet" type="text/css" media="screen" href="cssfluide.css"/>
</head>

<body>

<div id="contentpourcentrermercidevotreaide">

<div id="contentlogohaut">
<div id="logohaut"></div>
</div>

<nav>
  <ul id="navigation">                          
            <li id="encours"><a href="index.html">ACCUEIL</a></li>
            <li><a href="lemotdugaleriste.html">LE MOT DU GALERISTE</a></li>
            <li><a href="expositionsprecedentes.html">EXPOSITIONS PRECEDENTES</a></li>
            <li><a href="contact.html">CONTACT</a></li>
        	</ul>
</nav>

<div id="image"></div>

<div id="bloctexte"><div id="texte">Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lorem turpis, facilisis id purus a, molestie congue sapien. Sed vitae dictum est. Integer faucibus nulla at sapien sagittis, id fringilla lorem condimentum. Suspendisse lacinia, nisl quis maximus consequat, velit elit tristique enim, nec semper odio quam eget ipsum. Praesent et sem mauris.</div></div>


<div class="footer">GALERIE DES 13 REGARDS - 4 rue du docteur Leray - 75013 - PARIS</div>


</div>

</body>
</html>


et le css

@charset "UTF-8";
/* CSS Document */



.body
{
width:100%;
}

#contentpourcentrermercidevotreaide
{
margin:0px auto 0px auto;
width:1024px;
}
	
#contentlogohaut
{
width:100%;
height:90px;
margin:0px auto 0px auto;
}

#logohaut
{
background-image:url(images/indexs/1024/images/logohaut.jpg);
height:90px;
width:100%;
margin:0px auto 0px auto;
background-repeat:no-repeat;
}
	
.nav
{
color:#FFFFFF;
text-align:center;
text-decoration:none;
position:fixed;	
width:1024px;
height:30px;
margin:0px auto 0px auto;
}

#navigation 
{
height:30px;
width:1024px;
list-style-type:none;
background-color:#000000;
text-decoration:none;
text-align:center;
padding: 10px 0px 0px 0px;
margin:0px auto 0px auto;
}
		
#navigation li
{
background-color:#000000;
display:inline;
text-decoration:none;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter"; 
padding:0px 10px 0px 10px;
margin:0px auto 0px auto;
}

#navigation li a
{
color:#FFFFFF;
text-decoration:none;
padding:0px 5px 0px 5px;
margin:0px auto 0px auto;
}

#navigation li a:hover
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:11px 5px 11px 5px;
margin:0px auto 0px auto;
}

#navigation #encours a
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:11px 5px 11px 5px;
margin:0px auto 0px auto;
}

#image
{
height:310px;
width:1024px;
margin:0px auto 0px auto;
background-image:url(images/indexs/1024/images/image1024.jpg);
}
	
#bloctexte
{
height:auto;
width:800px;
margin:30px auto 0px auto;
}
	
#texte
{
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-justify:auto;
text-align:justify;
	}

.footer 
{
height:50px;
width:1024px;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-align:center;
background-color:#000000; 
margin:30px auto 0px auto;
color:#FFFFFF;
line-height:50px;
}

@media screen and (max-width: 763px) 
{
	.body
{
width:100%;
}
	
#contentlogohaut
{
width:100%;
height:90px;
margin:0px auto 0px auto;
}

#logohaut
{
background-image:url(images/indexs/763/images/logohaut.jpg)
height:90px;
width:100%;
margin:0px auto 0px auto;
}
	
.nav
{
color:#FFFFFF;
text-align:center;
text-decoration:none;
position:fixed;	
width:763px;
height:30px;
margin:0px auto 0px auto;
}

#navigation 
{
height:30px;
width:763px;
list-style-type:none;
background-color:#000000;
text-decoration:none;
text-align:center;
padding: 10px 0px 0px 0px;
margin:0px auto 0px auto;
}
		
#navigation li
{
background-color:#000000;
display:inline;
text-decoration:none;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter"; 
padding:0px 10px 0px 10px;
margin:0px auto 0px auto;
}

#navigation li a
{
color:#FFFFFF;
text-decoration:none;
padding:0px 5px 0px 5px;
margin:0px auto 0px auto;
}

#navigation li a:hover
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:11px 5px 11px 5px;
margin:0px auto 0px auto;
}

#navigation #encours a
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:11px 5px 11px 5px;
margin:0px auto 0px auto;
}

#image
{
height:310px;
width:763px;
margin:0px auto 0px auto;
background-image:url(images/indexs/763/images/image763.jpg)
}
	
#bloctexte
{
height:auto;
width:600px;
margin:30px auto 0px auto;
}
	
#texte
{
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-justify:auto;
text-align:justify;
	}

.footer 
{
height:50px;
width:763px;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-align:center;
background-color:#000000; 
margin:30px auto 0px auto;
color:#FFFFFF;
line-height:50px;
}
}

@media screen and (max-width: 380px) 
{
	.body
{
width:100%;
}
	
#contentlogohaut
{
width:100%;
height:90px;
margin:0px auto 0px auto;
}

#logohaut
{
background-image:url(images/indexs/380/images/logohaut.jpg);
height:90px;
width:100%;
margin:0px auto 0px auto;
}
	
.nav
{
color:#FFFFFF;
text-decoration:none;
width:380px;
height:80px;
margin:0px auto 0px auto;
}

#navigation 
{
height:87px;
width:380px;
list-style-type:none;
background-color:#000000;
text-decoration:none;
text-align:center;
padding: 0px 0px 0px 0px;
margin:0px auto 0px auto;
}
		
#navigation li
{
background-color:#000000;
text-decoration:none;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter"; 
padding:3px 0px 0px 0px;
margin:0px auto 0px auto;
display:block;
}

#navigation li a
{
color:#FFFFFF;
text-decoration:none;
padding:0px 0px 0px 5px;
margin:0px auto 0px auto;
}

#navigation li a:hover
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:3px 10px 3px 10px;
margin:0px auto 0px auto;
}

#navigation #encours a
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:3px 5px 3px 5px;
margin:0px auto 0px auto;
}

#image
{
height:300px;
width:380px;
margin:0px auto 0px auto;
background-image:url(images/indexs/380/images/image380.jpg);
}
	
#bloctexte
{
height:auto;
width:300px;
margin:30px auto 0px auto;
}
	
#texte
{
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-justify:auto;
text-align:justify;
	}

.footer 
{
height:50px;
width:380px;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-align:center;
background-color:#000000; 
margin:30px auto 0px auto;
color:#FFFFFF;
line-height:50px;
}
}

Modifié par borg80 (03 Jun 2015 - 11:25)
Bonjour,

Déjà, il manque le code HTML de la page pour pouvoir identifier le souci Smiley cligne

(par ailleurs, si tu pouvais donner l'URL d'une page en ligne ou créer (c'est gratuit) un jsFiddle si tu ne peux/veux pas donner d'URL, ça facilitera grandement la tâche de tes interlocuteurs sur le forum). Merci Smiley smile
Bonjour,

Petite question bête : As-tu mis un doctype au début de ta page html ?

Autre chose, même si ce n'est pas l'origine du problème, évites de dimensionner ton body.
Utilises plutôt un conteneur principal à l'intérieur de ton body.
Encore autre chose, évites en css d'appliquer tes règles sur des id, essaye de les cibler d'une autre manière.
Modifié par Raphi (03 Jun 2015 - 09:15)
Merci de vos réponses. En désespoir de cause (ce matin à 3h) je me suis amusé a mettre un 
margin: 0px auto 0px auto;
à tous les éléments de ma page, même si je sais que ce n'est pas la bonne solution, ça fonctionne pour le moment...

Je vous transmet mon CSS et HTML avec le conteneur "contentpourcentrermercidevotreaide".


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Galerie des 13 regards</title>
<link rel="stylesheet" type="text/css" media="screen" href="cssfluide.css"/>
</head>

<body>

<div id="contentpourcentrermercidevotreaide">

<div id="contentlogohaut">
<div id="logohaut"></div>
</div>

<nav>
  <ul id="navigation">                          
            <li id="encours"><a href="index.html">ACCUEIL</a></li>
            <li><a href="lemotdugaleriste.html">LE MOT DU GALERISTE</a></li>
            <li><a href="expositionsprecedentes.html">EXPOSITIONS PRECEDENTES</a></li>
            <li><a href="contact.html">CONTACT</a></li>
        	</ul>
</nav>

<div id="image"></div>

<div id="bloctexte"><div id="texte">Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lorem turpis, facilisis id purus a, molestie congue sapien. Sed vitae dictum est. Integer faucibus nulla at sapien sagittis, id fringilla lorem condimentum. Suspendisse lacinia, nisl quis maximus consequat, velit elit tristique enim, nec semper odio quam eget ipsum. Praesent et sem mauris.</div></div>


<div class="footer">GALERIE DES 13 REGARDS - 4 rue du docteur Leray - 75013 - PARIS</div>


</div>

</body>
</html>


et le css

@charset "UTF-8";
/* CSS Document */



.body
{
width:100%;
}

#contentpourcentrermercidevotreaide
{
margin:0px auto 0px auto;
width:1024px;
}
	
#contentlogohaut
{
width:100%;
height:90px;
margin:0px auto 0px auto;
}

#logohaut
{
background-image:url(images/indexs/1024/images/logohaut.jpg);
height:90px;
width:100%;
margin:0px auto 0px auto;
background-repeat:no-repeat;
}
	
.nav
{
color:#FFFFFF;
text-align:center;
text-decoration:none;
position:fixed;	
width:1024px;
height:30px;
margin:0px auto 0px auto;
}

#navigation 
{
height:30px;
width:1024px;
list-style-type:none;
background-color:#000000;
text-decoration:none;
text-align:center;
padding: 10px 0px 0px 0px;
margin:0px auto 0px auto;
}
		
#navigation li
{
background-color:#000000;
display:inline;
text-decoration:none;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter"; 
padding:0px 10px 0px 10px;
margin:0px auto 0px auto;
}

#navigation li a
{
color:#FFFFFF;
text-decoration:none;
padding:0px 5px 0px 5px;
margin:0px auto 0px auto;
}

#navigation li a:hover
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:11px 5px 11px 5px;
margin:0px auto 0px auto;
}

#navigation #encours a
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:11px 5px 11px 5px;
margin:0px auto 0px auto;
}

#image
{
height:310px;
width:1024px;
margin:0px auto 0px auto;
background-image:url(images/indexs/1024/images/image1024.jpg);
}
	
#bloctexte
{
height:auto;
width:800px;
margin:30px auto 0px auto;
}
	
#texte
{
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-justify:auto;
text-align:justify;
	}

.footer 
{
height:50px;
width:1024px;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-align:center;
background-color:#000000; 
margin:30px auto 0px auto;
color:#FFFFFF;
line-height:50px;
}

@media screen and (max-width: 763px) 
{
	.body
{
width:100%;
}
	
#contentlogohaut
{
width:100%;
height:90px;
margin:0px auto 0px auto;
}

#logohaut
{
background-image:url(images/indexs/763/images/logohaut.jpg)
height:90px;
width:100%;
margin:0px auto 0px auto;
}
	
.nav
{
color:#FFFFFF;
text-align:center;
text-decoration:none;
position:fixed;	
width:763px;
height:30px;
margin:0px auto 0px auto;
}

#navigation 
{
height:30px;
width:763px;
list-style-type:none;
background-color:#000000;
text-decoration:none;
text-align:center;
padding: 10px 0px 0px 0px;
margin:0px auto 0px auto;
}
		
#navigation li
{
background-color:#000000;
display:inline;
text-decoration:none;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter"; 
padding:0px 10px 0px 10px;
margin:0px auto 0px auto;
}

#navigation li a
{
color:#FFFFFF;
text-decoration:none;
padding:0px 5px 0px 5px;
margin:0px auto 0px auto;
}

#navigation li a:hover
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:11px 5px 11px 5px;
margin:0px auto 0px auto;
}

#navigation #encours a
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:11px 5px 11px 5px;
margin:0px auto 0px auto;
}

#image
{
height:310px;
width:763px;
margin:0px auto 0px auto;
background-image:url(images/indexs/763/images/image763.jpg)
}
	
#bloctexte
{
height:auto;
width:600px;
margin:30px auto 0px auto;
}
	
#texte
{
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-justify:auto;
text-align:justify;
	}

.footer 
{
height:50px;
width:763px;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-align:center;
background-color:#000000; 
margin:30px auto 0px auto;
color:#FFFFFF;
line-height:50px;
}
}

@media screen and (max-width: 380px) 
{
	.body
{
width:100%;
}
	
#contentlogohaut
{
width:100%;
height:90px;
margin:0px auto 0px auto;
}

#logohaut
{
background-image:url(images/indexs/380/images/logohaut.jpg);
height:90px;
width:100%;
margin:0px auto 0px auto;
}
	
.nav
{
color:#FFFFFF;
text-decoration:none;
width:380px;
height:80px;
margin:0px auto 0px auto;
}

#navigation 
{
height:87px;
width:380px;
list-style-type:none;
background-color:#000000;
text-decoration:none;
text-align:center;
padding: 0px 0px 0px 0px;
margin:0px auto 0px auto;
}
		
#navigation li
{
background-color:#000000;
text-decoration:none;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter"; 
padding:3px 0px 0px 0px;
margin:0px auto 0px auto;
display:block;
}

#navigation li a
{
color:#FFFFFF;
text-decoration:none;
padding:0px 0px 0px 5px;
margin:0px auto 0px auto;
}

#navigation li a:hover
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:3px 10px 3px 10px;
margin:0px auto 0px auto;
}

#navigation #encours a
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:3px 5px 3px 5px;
margin:0px auto 0px auto;
}

#image
{
height:300px;
width:380px;
margin:0px auto 0px auto;
background-image:url(images/indexs/380/images/image380.jpg);
}
	
#bloctexte
{
height:auto;
width:300px;
margin:30px auto 0px auto;
}
	
#texte
{
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-justify:auto;
text-align:justify;
	}

.footer 
{
height:50px;
width:380px;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-align:center;
background-color:#000000; 
margin:30px auto 0px auto;
color:#FFFFFF;
line-height:50px;
}
}
Bonjour,

Tout d'abord, je n'ai pas lu ton code, car j'ai horreur de me farcir tout le code HTML/CSS/JS dans une demande d'aide.

D'autre, part, je suis à la bourre et je dois filer dans pas longtemps, alors, je n'ai pas lu tous les autres commentaires en détail. Je m'excuse si j'enfonce des portes ouvertes par d'autres.

Tout d'abord, pour centrer horizontalement un élément dans une page web, il faut que celui-ci ait une largeur définie.

Ensuite, pour éviter les <div id="main">...</div> et autres, tu pourrais utiliser le HTML5, qui comporte une gamme plus étendue de balises sémantiques comme <main></main>, <article></article>, <header></header>, <footer></footer>, etc.

Enfin, pour des propriétés comme padding ou margin, tu peux utiliser des syntaxes raccourcies comme :

margin:0px auto 0px auto > margin: 0 auto

Et avec une valeur 0, spécifier l'unité est inutile, 0, c'est toujours 0 quelle que soit l"unité.

Idem pour les couleurs hexa :

background-color: #FFFFFF > background-color: #fff

Ça allégera toujours ton code.

Tu devrais pouvoir trouver les infos sur ces syntaxes raccourcies sur le web sans trop de problèmes.

Enfin, si tu définis la taille d'une image en CSS, spécifier la largeur suffit, la hauteur est adaptée automatiquement (à moins que tu veuilles déformer l'image).

En espérant ne pas répondre à côté de la plaque, bonne continuation.
Modifié par thierry (03 Jun 2015 - 12:13)
Merci pour le coup de main thierry, J'ai réussis grâce à vous! Bien aimable d'avoir pris le temps de me répondre.

Hikingyo, je vais aller me renseigner sur le doctype du HTML5. Je ne sais même pas comment le formater.

Merci à tous! Comme d'habitude, vous avez étés parfaits en tout points. Merci! Smiley ravi
Sujet clos
Aller à