Pas d'image

Je suis en train de faire l'exo du livre CSS 2 de raphael goetter. L'image d'rrière plan 'bannière) n'apparait pas en étant définie ainsi

#header {
height: 100px;
background: #97CO5F url(banniere.jpg) top left no-repeat;
tous les fichiers sont pourtant au même niveau d'arborescence.

j'ai essayé d'autre manips notamment en créant un repertoire "images" et en déclarant le chemin.
une idée ?
merci

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).
Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

De plus, pourrais-tu préciser de quel exercice tu parles (un numéro de page approximatif suffira), il n'y en a pas qu'un seul

Bonne continuation

1er truc qui me vient à l'esprit: es-tu certain que l'image sur le serveur s'appelle banniere.jpg et pas Bannière.jpeg tel que tu le vois dans le logiciel FTP?
- même extension
- pas d'accent (ou bien un accent dans le CSS et dans le nom, peu importe)
- et surtout majuscule ou pas en début de nom: ne pas tenir compte de ce qui peut s'afficher dans l'Explorateur de fichiers de Windows sur ton ordinateur, il y a plein de réglages possibles pour être induit en erreur et pour qu'il n'affiche pas le véritable nom

2ème point: la feuille de style CSS est également dans le même répertoire que la page HTML et que l'image?
Modifié par Felipe (05 Nov 2006 - 17:49)

bonsoir et merci de votre réponse. Effectivement, je n'ai pas pas mis de boutons code. Je le vois en bas dans la rubrique mise en forme. Ceci dit, c'est la première fois que j'utilise un forum.

En fait j'essaie de faire le projet de site proposé dans le livre de raphael goetter (p 230 et suivantes).
Je bute sur la notion d'image en arrière plan en haut de la page web.

background:#97C05F url(images/banniere.jpg) top left no-repeat;

J'ai rajouté le répertoire image pensant que c'était un problème de chemin.
j'ai corrigé le tir, sans pour autant comprendre, en transformant ainsi:

background:#97C05F url(images/banniere.jpg) center right no-repeat;

J'en déduis donc que ce n'est pas un problème de "chemin" mais que c'est le mot "top" qui créé un problème.
Cependant, je retrouve le même problème pour le menu à gauche de la page web. Je déclare l'image ainsi

background: #336600 url(images/fondmenu.jpg)bottom left no-repeat;

voilà. Etant débutant css, j'ai fouillé le forum sans succès. J'espère également avoir respecté l'étiquette du forum dans cette deuxième tentative.

Les extensions sont correctes et identiques. Pas de majuscule ou d'accent non plus. Ca semble donc ok.

Bonjour,

La syntaxe css que tu nous proposes est correcte. Si tu souhaites positionner l'image en haut et à gauche d'un conteneur, top left sont les bons paramètres.

Si tu souhaites voir apparaître l'image au milieu et à droite, c'est effectivement center right;

Quel résultat souhaites-tu obtenir ?

Ci-joint :

background position en détail



<edit>
Attention à l'ordre des paramètres ... et à l'élément html sur lequel tu appliques la propriété, car la position de l'image sur la page dépendra aussi de la position de ce dernier.
Modifié par Vero (05 Nov 2006 - 18:28)

En fait, je souhaite que l'image couvre totalement la surfce du menu de gauche. J'ai utilisé ce que tu m'as envoyé et je constate un problème de code. La couleur du mot "background" dans l'éditeur de code est différente des autres "background".
J'ai beau chercher, je ne vois pas le bug

#menu {
float: left;
width: 15em;
padding:0.5em 0 8em 0;
margin: Opx
background: #336600 url(images/fondmenu01.jpg)center left no-repeat;
}

Quelle taille a ton image ?

Si il s'agit d'un motif de fond à répéter, il faut l'indiquer ainsi :

#menu {

float: left;

width: 15em;

padding:0.5em 0 8em 0;

margin: Opx

background: #336600 url(images/fondmenu01.jpg) [b]repeat[/b];

}

En fait, l'image est répétée par défaut, à moins d'indiquer : no-repeat.
Auquel cas, il faut alors la positionner, sachant que la position par défaut devrait être top left.
Modifié par Vero (05 Nov 2006 - 18:44)

l'image fait 175 par 308 pixels.
Cependant je confirme que c'est un problème de code. J'ai fait un copier coller de ce que tu m'as envoyé et le "background" se colorie différemment des autres "backgrounds". Du coup la fonction ne doit pas opérer
Une balise doit manquer en amont pourtant la déclaration à l'air ok et celles qui précèdent aussi.
voici l'image upload/9314-ScreenShot0.jpg" alt="upload/9314-ScreenShot0.jpgupload/9314-ScreenShot0.jpg" />

Peux-tu mettre la page en ligne, cela sera plus simple ?

voilà.

/*Mise en page globale*/
body {
margin: 0;
padding: 0;
background: orange;	
color: white;
font-size:80%;
font-family: "Bitstream Vera Sans", Verdana, Arial, Helvetica, Serif;
}	   
/* bandeau du haut*/
#header {
height: 100px;
background:#97C05F url(images/banniere01.jpg) center right no-repeat;
} 
#header img {
float: right;
margin: 5px 5px 0 0;
} 
/* menu en dessous du bandeau du haut*/
#menuhaut {
margin:0;
padding:0.1em 0.5em 0.1em 0;
list-style-type: none;
background-color: black;
color: white;
text-align: right;
}
#menuhaut li {
display: inline;
}
#menuhaut a {
color: white;
text-decoration: none;
} 
/* soulignage de l'élément du menu quand il est pointé*/
#menuhaut a:hover {
text-decoration: underline;
} 
/* menu de gauche*/
#menu {
float: left;
width: 15em;
padding:0.5em 0 8em 0;
margin: Opx
background: #336600 url(images/fondmenu01.jpg)center left repeat;
}
#menu ul {
list-style-type: none;
padding: 0;
margin: 0 1em;
}
#menu li a {
display: block;
text-decoration: none;
height: 1.4em;
line-height: 1.4em; /* pour centrer verticlament le texte dans le bouton de lien*/
color: black;
font-weight: bold;
font-size: 120%
text-indent: 1em;
}
/* surlignage couleur de l'élément du menu quand il est pointé*/
#menu li a:hover {
background: #cccc33;
color: #336600;
}
#menu p {
margin: 1.5em 0 0 1em
font-weight: bold;
color: white;
}
#menu form.champ {
width: 8em;
}

EDIT de Raphael : j'ai ajouté la balise ouvrante [ code]
Modifié par Raphael (05 Nov 2006 - 19:11)

je suis désolé mais je n'ai pas compris. C'est à dire que je cherche la balise ouvrante en question sans succès.

ewpiriou a écrit :
je suis désolé mais je n'ai pas compris. C'est à dire que je cherche la balise ouvrante en question sans succès.

Je l'ai ajoutée
En fait, tu n'avais dans ton message que la balise fermante [ /code] mais pas la balise ouvrante à placer en début de ton code.

Je ne sais pas comment tu as réussi à faire celà mais la méthode est assez simple pourtant :
- cliquer sur "code" (la balise ouvrante se crée)
- écrire ton code
- cliquer à nouveau sur "code" (la balise fermante se crée)

Tu peux bien-sûr écrire les balises à la main si tu préfères.

Euh ... et un ";" aprés la déclaration du margin ça pourrait le faire non ?


et après le "font-size: 120%" aussi ... Modifié par barbe douce (06 Nov 2006 - 00:22)[/edit]

Merci à tous. Il suffit d'un petit ";" pour s'empoisonner la vie.
Maintenant ca marche.