Un background qui ne s'affiche pas.

Sujet résolu

2 novembre 2006 à 18:51:00

Bonjour,

J'ai ce code CSS :

#menu
{
float:left;
width:250px;
margin-top:10px;
margin:0px;
}

.element_menu_haut
{
margin:0px;
padding:0px;
height:48px;

border:none;

background-image:url("design/normal/menu-haut.png");
background-repeat:no-repeat;
background-position:top center;
}
.element_menu_milieu
{
margin:0px;
padding:5px;
padding-top:0px;
padding-bottom:0px;
padding-left:50px;

border:none;

background-image:url("design/normal/menu-milieu.png");
background-repeat:repeat-y;

font-family:Verdana, Arial, Times, serif;
font-size: 12px;
color:#999999;
}
.element_menu_bas
{
margin:0px;
padding:0px;
height:45px;

border:none;

background-image:url("design/normal/menu-bas.png");
background-repeat:no-repeat;
background-position:top center;
}

Ce code HTML :

<div id="menu">

<div class="element_menu_haut"></div>
<div class="element_menu_milieu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pellentesque sapien id metus. Sed adipiscing, mauris at iaculis tincidunt, lectus diam ornare tellus, id viverra nisl dolor a ante.</div>
<div class="element_menu_bas"></div>

<div class="element_menu_haut"></div>
<div class="element_menu_milieu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pellentesque sapien id metus. Sed adipiscing, mauris at iaculis tincidunt, lectus diam ornare tellus, id viverra nisl dolor a ante.</div>
<div class="element_menu_bas"></div>

</div>

Mon problème est que, le background qui, normalement, devrait s'afficher... ne s'affiche pas.
le chemin de l'image est bien dans le dossier design puis normal puis menu-haut.png. Pareil pour les autres...

Comment résoudre mon problème ?

PS : Voici ce qui s'affiche :

Cliquez pour agrandir

Ce qui est voulu (avec les background, cela devrait faire à peu près ça)

Le blanc, remplacé par du transparent en temps normal

'Titi

2 novembre 2006 à 18:53:31

Tu ne définies jamais de largeur "width", c'est pour ça.

RiouJ

2 novembre 2006 à 18:56:46

Ca change rien...

'Titi

2 novembre 2006 à 19:08:01

Enlèves tes background-position mais laisse les width.

RiouJ

2 novembre 2006 à 19:11:48

Citation : Variable

Enlèves tes background-position mais laisse les width.

Ca ne change rien non plus

[EDIT] C'est bizzard car j'ai fais au moins une 10ene de sites et ça m'avait jamais encore fait ce coup là...

'Titi

2 novembre 2006 à 19:30:52

Chez moi ton code fonctionne parfaitement bien.

Tu es certain que 48px de hauteur suffisent ?

N'oublies pas que ton image de fond ne s'affichera pas correctement si tu ne définies de largeur.

Vérifies le chemin d'accès à tes images. Essayes en mettant les images dans le même dossier que le reste.

RiouJ

3 novembre 2006 à 7:51:28

Regarde, j'ai mis ça sur internet :

Lien vers la page

les images se situent bien ici :
menu-haut.png | menu-bas.png | menu-milieu.png

les images sont bien dans le dossier design/normal/
Moi non plus je ne comprend pas pourquoi ils ne s'affichent pas...

Remarque : Même le header ne s'affiche pas...

Candygirl

3 novembre 2006 à 8:50:46

Citation : RiouJ

les images sont bien dans le dossier design/normal/
Moi non plus je ne comprend pas pourquoi ils ne s'affichent pas...

Voici le link vers ta page css dans ta page html:

Je constate qu'elle aussi se trouve dans le dossier design/normal. Tu es donc dans le même dossier que tes images et pour les appeler tu n'as qu'à mettre le nom de l'image:

background-image:url(en_tete.jpg);

RiouJ

3 novembre 2006 à 9:27:02

Citation : Candygirl

Citation : RiouJ

les images sont bien dans le dossier design/normal/
Moi non plus je ne comprend pas pourquoi ils ne s'affichent pas...

Voici le link vers ta page css dans ta page html:

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design/normal/design.css" />

Je constate qu'elle aussi se trouve dans le dossier design/normal. Tu es donc dans le même dossier que tes images et pour les appeler tu n'as qu'à mettre le nom de l'image:

background-image:url(en_tete.jpg);

Ah ouai !!!
Merci beaucoup j'y avais pas pensé !

Problème Résolu.