Question CSS débutante

Bonjour a tous!

Je commence tout juste à découvrir le css. J'ai lu beaucoup de choses et je commence à comprendre peu à peu le principe.
J'aimerai faire un petit site pour mon activité et j'ai choisi de l'héberger chez weebly.com.
J'aimerai personnaliser un peu mon futur site. Il n'est pas encore en ligne, pour l'instant, je n'en suis qu'au stade "test" et "essai".

J'arrive a mon problème maintenant.
Voici un site qui a la même "structure" que le mien : http://ayabellydance.weebly.com/
J'aimerai changer la couleur de fond qui est actuellement blanche pour la remplacer soit par une autre couleur soit par une image.
Le problème est que je n'arrive pas à trouver la partie du css à modifier !!! (Et ca m'enerve, j'y suis depuis 2 jours!!!).
Je vous demande donc un peu d'aide! J'espère que vous saurez m'aider.
Je vous remercie par avance.

Pour info, je vous copie/colle le css actuel

a écrit :

body{
margin:0px;
padding:0px;
background:#222 url(bodybg.png) repeat-x fixed top center;
background-image:url(exemple.jpg);
text-align:center;
font:11px Verdana,Arial,Helvetica,sans-serif;
}
#container{
width:700px;
margin:auto;
padding-bottom:20px;
}

/* basic styles */
h1,h2,h3,h4,h5,h6{
font-family:Georgia,Verdana,Arial,Helvetica,sans-serif;
font-weight:lighter;
margin:10px 0px 0px 0px;
color:#222;
}
h1{
font-size:28px;
}
h2{
font-size:25px;
color:#0a294f;
}
h3{
font-size:22px;
color:#202f0f;
}
h4{
font-size:18px;
color:#911322;
}
h5{
font-size:16px;
color:#af3d0a;
}
h6{
font-size:11px;
font-weight:bold;
color:#222;
}
del{
color:#999;
}
acronym{
/*border-bottom:1px dotted #222;*/
border:none;
background:url(dottedborder_dark.gif) repeat-x bottom center;
padding-bottom:1px;
cursor:help;
}
hr{
width:100%;
border:0;
margin:5px 0px;
margin:2px 0px 5px 0px;
height:1px;
color:#777;
background-color:#777;
}
a{
color:#af2639;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}

p{
line-height:22px;
margin:5px 0px 15px 0px;
/*text-align:justify;*/
}
.noborder{
border:0;
}
/* I can't get <pre> to display inline very well so just use <span class="pre"> */
#content .pre{
font:11px "Courier New",Courier,sans-serif;
color:#af454a;
}

img{
border:none;
}
img.floatright,
img.floatleft,
#left img{
border:1px solid #222;
}
a:hover img.floatright,
a:hover img.floatleft,
#left a:hover img{
border:1px solid #af2639;
}

/* floats, positioning, and widths */
.floatleft{
float:left;
}
.floatright{
float:right;
}
.w50{
width:50%;
}
.floatleft p{
padding:0px 10px 0px 0px;
}
.floatright p{
padding:0px 0px 0px 10px;
}
img.floatleft{
margin:15px 15px 5px 0px;
}
img.floatright{
margin:15px 0px 5px 15px;
}

/* rounded corners */
.tl{background:#222 url(tl.gif) no-repeat top left;}
.tr{background:transparent url(tr.gif) no-repeat top right;}
.br{background:transparent url(br.gif) no-repeat bottom right;}
.bl{background:transparent url(bl.gif) no-repeat bottom left;}

.ltl{background:#efefef url(l_tl.gif) no-repeat top left;}
.ltr{background:transparent url(l_tr.gif) no-repeat top right;}
.lbr{background:transparent url(l_br.gif) no-repeat bottom right;}
.lbl{background:transparent url(l_bl.gif) no-repeat bottom left;}

/* blockquotes and code*/
blockquote{
min-height:35px;
width:100%;
display:block;
margin:10px auto;
background:transparent url(quote.gif) no-repeat 10px 10px;
}
* html blockquote{
min-height:35px;
height:auto !important;
height:35px;
}
blockquote p{
margin:0px;
line-height:17px;
padding:10px 10px 10px 50px;
}
blockquote span{
color:#999;
font-size:9px;
padding-top:5px;
display:block;
}
blockquote span a{
color:#555;
text-decoration:none;
}
blockquote span a:hover{
text-decoration:underline;
}
blockquote.go{
background:transparent url(go.gif) no-repeat 10px 50%;
}
blockquote.stop{
background:transparent url(stop.gif) no-repeat 11px 50%;
}
blockquote.exclamation{
background:transparent url(exclamation.gif) no-repeat 23px 50%;
}
code{
display:block;
width:92%;
margin:0px auto 15px auto;
line-height:17px;
}
code .red{
color:#af454a;
}

/* forms */
form select,
form input,
form textarea{
font:11px Verdana,Arial,Helvetica,sans-serif;
border:1px solid #888;
}
form input:hover,
form input:focus,
form textarea:hover,
form textarea:focus,
form select:hover,
form select:focus{
background-color:#f9f9f9;
/*border:1px dotted #888; optional thought */
border:1px solid #444;
}
form select{
padding:1px;
}
form input{
padding:1px;
}
form label{
display:block;
color:#777
}
form textarea{
padding:1px;
line-height:16px;
}
form p{
margin:10px 0px;
}

/* top section */
#top{
background:url(contentbg.gif) repeat-y top center;
}

/* very bottom curve */
#bottom{
background:url(container_b.gif) no-repeat bottom center;
height:9px;
}
* html #bottom{
margin-top:-4px;
}

/* header */
#header{
font:30px Georgia,Verdana,Arial,Helvetica,sans-serif;
width:680px;
height:175px;
margin:auto;
background:url(%%HEADERIMG%%) no-repeat top center;
text-align:left;
}
#title{
margin-top:130px;
margin-left:13px;
position:absolute;
color:#fff;
background-color:transparent;
cursor:default;
}

/* menubar */
.nav{
height:40px;
background-color:#222;
color:#fff;
width:680px;
margin:auto;
text-align:right;
font-size:11px;
cursor:default;
}
.nav2{
height:40px;
}
#slogan{
position:absolute;
margin:11px 0px 0px 15px;
font-size:14px;
}
#navdiv{
float:left;
text-align:right;
}
#navlist{
list-style-type:none;
margin:0px;
padding:11px 8px 0px 0px;
width:670px;
}
#navlist li{
display:inline;
}
#navlist li a{
color:#999;
font-weight:bold;
text-decoration:none;
height:40px;
padding:8px 12px 14px 0px;
}
#navlist li a:hover{
color:#bfbfbf;
/* other thoughts
border-top:5px solid #fff;
color:#df521b;
*/
}
#active a:link {
color:#fff;
}
#active a:hover {
color:#fff;
}
#active a:visited {
color:#fff;
}

/* content */
#content{
min-height:400px;
width:680px;
margin:auto;
color:#222;
text-align:left;
}
* html #content{
min-height:400px;
height:auto !important;
height:400px;
}
#left{
float:left;
padding:10px 10px 20px 10px;
width: 660px;
}
* html #left{
padding-top:20px;
}

/* sidebar */
#right{
width:190px;
float:right;
padding:20px 10px 20px 20px;
}
* html #right{
padding-top:30px;
}
#right .sideitem{
margin-bottom:25px;
}
#right .sideitem h4{
font:12px Georgia,Arial,Helvetica,sans-serif;
font-weight:bold;
color:#222;
width:100%;
background:#fff url(dottedborder.gif) repeat-x bottom center;
padding-bottom:3px;
margin-bottom:13px;
}
#right .sideitem b{
/*display:block;*/
}
#right .sideitem p{
padding:0px 5px;
}
#right .sideitem ul{
margin-left:-4px;
}

/* footer */
.footer{
height:30px;
width:680px;
margin:auto;
color:#fff;
text-align:left;
clear:both;
}
.footer div{
height:30px;
}
#copyright{
text-align:left;
float:left;
padding:8px;
margin-top:0px !important;
margin-bottom:-16px;
}
#designcredit{
float:right;
text-align:right;
padding:8px;
margin-bottom:-16px;
}
#designcredit a{
color:#9f9f9f;
}
#designcredit a:hover{
color:#cf262d;
text-decoration:none;
}


/****************************** flyout menus ******************************/

#weebly-menus .weebly-menu-wrap {
z-index: 5000;
}

#weebly-menus .weebly-menu {
padding: 0;
margin: 0;
list-style: none;
}

#weebly-menus .weebly-menu li {
float: left;
clear: left;
width: 170px;
text-align: left;
}

#weebly-menus .weebly-menu li a {
position: relative;
display: block;
width: 100%;
background: #505050;
border-right: 1px solid #666666;
border-left: 1px solid #666666;
border-bottom: 1px solid #666666;
text-decoration: none;
font-size: 11px;
font-weight: normal;
line-height:1;
padding:3px;
color: #ccc;
}

#weebly-menus .weebly-menu li a:hover {
background: #878787;
}

#weebly-menus span.weebly-menu-title {
display: block;
padding: 5px 10px;
}

#weebly-menus span.weebly-menu-more {
background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top;
display: block;
position: absolute;
right: 5px;
top: 0;
font-family: Courier;
height: 28px;
line-height: 28px;
padding:1px 0 3px 0;
}

Bonsoir,
Tu devrais placer ton code non pas entre des balises "quote" mais entre des balises "code".

Ensuite, après un rapide coup d'oeil sur la page citée et en considérant que ton code html soit construit de la même manière, pour changer le blanc du bloc central, tu devrais essayer d'ajouter un background ou background-color dans ton #container.

Du reste, je n'ai pas regardé en détail mais j'ai l'impression qu'il y a une déclaration qui fait doublon dans ton 'body' : tu spécifies deux fois une image de fond.

J'ai enlevé le doublon dans body. Ca n'a rien changé visuellement.
Ensuite j'ai mis un "background-image : url"..." dans "container".
Le résultat : il semble que l'image apparaisse mais au dessous du bloc blanc !!! Grrr
Une autre idée ?

fifi.76 a écrit :
J'ai enlevé le doublon dans body. Ca n'a rien changé visuellement.

C'est possible ; Une chance sur deux selon celui retiré.

fifi.76 a écrit :
Ensuite j'ai mis un "background-image : url"..." dans "container".
Le résultat : il semble que l'image apparaisse mais au dessous du bloc blanc !!! Grrr
Une autre idée ?

Si je peux me permettre, le code html est surchargé inutilement et assez difficile à lire. (beaucoup d'imbrications de div ...).

A vue d'oeil, le #container représente la partie globale au centre et tout ce qu'elle contient (donc avec le fameux fond blanc). Si par "au dessus du bloc blanc" tu entends que l'image remplace totalement la couleur blanche, ça suit bien cette logique. Si l'image du header (qui est aussi placée en fond par css) est en transparence, on peut à priori constater une superposition comme lors de ton ajout d'image. (#header étant dans #container) ...
As-tu essayé avec non pas une image mais simplement une couleur ?
Modifié par Singularity (21 Jun 2010 - 23:25)

Bonjour,

Concernant le code html, je n'y ai pas du tout touché (je n'ai pas de notion). Je l'ai laissé tel quel. Il est certainement "surchargé" par nature.

Ensuite, j'ai écrit (dans mon précédent message) que l'image apparaissait au dessOUS du bloc blanc et non au dessus. Donc le "bloc blanc" continu de cacher mon image. J'ai également essayé avec de la couleur et ça donne le même effet. La couleur apparait au dessous du bloc blanc.

Voici une capture d'écran pour illustrer :

[EDIT Laurie-Anne : image trop grande !]http://img682.imageshack.us/img682/807/exemple.png
Modifié par Laurie-Anne (22 Jun 2010 - 13:46)

Salut,

En examinant le site dont tu mets le lien avec Firebug (un module complémentaire de Firefox, à mon avis indispensable, je ne sais pas si tu le connais, sinon je te le conseille...) il apparaît que le fond est appliqué sur le div portant l'id top :

/* top section */
#top{
background:url(contentbg.gif) repeat-y top center;
}

Il est complété, pour les coins arrondis du bas par :

/* very bottom curve */
#bottom{
background:url(container_b.gif) no-repeat bottom center;
height:9px;
}

Mais, si tu change ce fond, restera encore un problème avec les coins arrondis des 2 barres de navigation...

Comme te le dis Singularity, ton code (enfin, celui de Weebly) est épouvantablement surchargé et complexe (ce qui n'est pas une qualité en l'occurrence). Il n'est d'ailleurs pas valide au sens du W3C, que ce soit le html ou le css.
Il te sera sans doute très difficile de "rentrer" dans ce code pour le personnaliser (tu aurais plus vite fait en reprenant tout à zero, html et css !).

Ceci dit, prends mes conseils avec précaution : je suis moi-même un amateur débutant en la matière et il y a clairement des choses que je ne connais pas (d'autres participant à ce forum te renseigneront plus sûrement).

Ha merci!!! Ca a marché!!

J'ai une autre question maintenant :

Est-il possible de rajouter des "sous thème" à la barre des menus, comme dans ce site :
http://www.barbaraweddings.com/

Si oui, comment? Est ce un code a rajouter dans le html ou le css?

Merci

html, css et javascript...
Peut-être weebly propose-t-il un "module" pour ce genre d'effet de menu.
Sinon, je te le répète : a mon avis il te sera très difficile de modifier ton site "dans le code", celui-ci étant trop complexe et embrouillé pour qu'un débutant y retrouve ses petits. De plus, sur cette base, tu n'aura jamais un site respectueux des standards web (ce qui est un peu la raison d'être de ce forum).

Re,
Je pense que weebly offre parfaitement cette possibilité puisque l'exemple du site précédent est un weebly... Il suffit de trouver ou ca se passe! Ou est ton optimisme Redkissifrott ? Pourquoi essayer de me décourager ?
Weebly offre parfaitement la possibilité d'accéder facilement et "sans" trop de souci au code CSS! La preuve, j'arrive a comprendre qql base alors que je n'y suis que depuis qql jours!
Quant au code html, qu'il soit compliqué ou pas, je ne pense pas y toucher sauf si qql me donne un code pour faire mes "sous thème"!
Enfin, je suis sur d'avoir un joli site avec weebly d'ici peu et qui sera, sans doute, bien plus respectueux des standards du web que d'autres.

Donc, si quelqu'un a une idée pour mes "sous thème", je suis toute ouïe!

fifi.76 a écrit :
Est-il possible de rajouter des "sous thème" à la barre des menus, comme dans ce site :
http://www.barbaraweddings.com/
Est ce un code a rajouter dans le html ou le css?

C'est ce qu'on appelle des menus déroulants. C'est du HTML (pour le contenu), du CSS (pour la mise en forme et le positionnement) et du JavaScript (pour les comportements dynamiques, affichage au survol et lors de la navigation au clavier, etc.).
J'ai coutume de dire que la création des menus déroulants est à réserver aux intégrateurs web professionnels (des experts de HTML, CSS et JavaScript, deux ans de formation minimum). Je te déconseille donc formellement d'essayer de reproduire cet effet... du moins si l'outil que tu utilises (Weebly) ne te propose pas de créer automatiquement ce genre de menu.

Remarque générale: si tu veux modifier ton code CSS, deux choses importantes:
1. Lire au moins une introduction CSS si ce n'est pas déjà fait (en voici une), et quelques tutoriels pour débutant pour compléter ces connaissances.
2. Pour savoir quels éléments HTML mettre en forme, et surtout quels sont les déclarations de la feuille de styles qui s'appliquent à un élément précis de la page, utiliser un outil pour développeur en mode «inspection», par exemple Firebug (extension pour Firefox) ou les outils pour développeur d'Internet Explorer 8, de Safari/Chrome (Web Inspector).

fifi.76 a écrit :
Pourquoi essayer de me décourager ?

Parce que pour produire du code de qualité (qui fait le boulot tout en étant robuste et fiable) il faut des compétences d'intégrateur web, et que ces compétences s'acquièrent en deux ans, pas en deux jours.

Je partage l'avis de redkissifrott. Cela dit, si tu te contentes de modifier quelques propriétés CSS pour changer des couleurs de fond ou des images de fond, des tailles de texte, ce genre de chose... pourquoi pas bidouiller, oui.