centrer page web et mettre un arriere plan noir

ChristianTrambly · Message par **ChristianTrambly** » 20 nov. 2014, 20:50

Bonjour
Je n'arrive pas à centrer mes pages ni à mettre un arriére plan noir sur mon site http://coc.loc.gd.bornand.free.fr
sur d'autres sites j'ai réussi comme par exemple celui-ci :http://melodamis.charnay.free.fr

je ne réussis pas à reproduire

Voici mon code CSS:

#conteneur {
border: 1px solid #993399;
width: 90%;
margin-left: 5%;
background-color: #ccccff;
clear: both;
}
#body {
margin:auto;
width: 918px;
background-color: black;
text-align: center;
}
#entete {
background-image: url(images/destination_granbo.JPG);
background-color: transparent;
width: 750px;
height: 64px;
padding-top: 0%;
top: 0%;
margin-top: 0%;
background-attachment: fixed ! important;
background-repeat: repeat-y;
background-position: center center;
}
#menu {
width: 150px;
float: left;
color: #336666;
font-weight: bold;
font-style: italic;
background-color: #ccccff;
line-height: normal;
font-family: Arial,Helvetica,sans-serif;
font-size: 11pt;
text-align: left;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
}
#texte {
margin: 10px 10px 10px 160px;
padding: 20px;
font-style: italic;
font-weight: bold;
background-color: #847094;
color: #66cccc;
list-style-position: outside;
list-style-type: disc;
}
#pied {
border-color: #333300;
clear: left;
font-style: italic;
color: #336666;
background-color: #66cccc;
font-weight: bold;
text-decoration: blink;
text-align: center;
}
h2 {
color: #cc66cc;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
font-style: oblique;
}
.imggauche {
border: 5px solid #336666;
margin: 20px;
float: left;
}
.imgdroite {
border: 5px solid #336666;
margin: 20px;
float: right;
}
.photomenu {
padding-top: 30px;
}
p {
text-indent: 30px;
}
.tabmenu {
border: 5px groove #847094;
color: #339999;
}
h1 {
margin-top: 30px;
margin-bottom: 30px;
}

Merci d'avance pour votre aide

Christian
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:33.0) Gecko/20100101 Firefox/33.0

Message par **Ymai** » 20 nov. 2014, 22:53

Bonjour
Il me semble que le souci principal ne soit pas dans le code CSS mais dans le code HTML
On lit

Code : Tout sélectionner

<body style="width: 918px; background-color: rgb(204, 204, 255); float: none;">

Conclusion: la couleur imposée là l'emporte sur tout ce que l'on pourrait mettre dans la feuille de styles. Pas une bonne pratique, a priori.
Quant au "float: none", j'avoue ne pas trop comprendre.
Donc, on vire tout (sauf, peut-être, width:918px) et il reste

Code : Tout sélectionner

<body>

Ensuite, dans la feuille de styles:

Code : Tout sélectionner

body {background-color: black;
}

et, pour le centrage, se focaliser sur

Code : Tout sélectionner

#conteneur {
    background-color: #ccccff;
    background-image: url("images/fondgranbo.jpg");
    background-position: left top;
    border: 1px solid #993399;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

où les deux directives sur "margin" permettront de centrer l'ensemble du #conteneur sur la page.
Et l'on voit que l'on atteint là les limites de KompoZer puisque le codage "a mano" est plus efficace. Le moment de laisser la bouée et de nager quelques premières brasses dans la grande profondeur?
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:33.0) Gecko/20100101 Firefox/33.0

Geckozone

centrer page web et mettre un arriere plan noir

centrer page web et mettre un arriere plan noir

Re: centrer page web et mettre un arriere plan noir

Qui est en ligne ?