Hello! Je souhaiterai centrer mon site web. Manipulation assez facile à réaliser en utilisant le css :
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
et le css
Modifié par borg80 (03 Jun 2015 - 11:25)
.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)