problème image qui ne s'affiche pas.

Ce sujet est résolu
Default
,

Bonjour,

Je suis en train de suivre le tuto "intégration d'un site en html et css".

Je coince déjà au niveau du menu.

Comme dans le tuto, j'ai un bord arrondi qui s'insère en bas du menu (c'est la limite sup du contenu). Mais avec les boutons, cette image arrondie ne s'affiche pas.

J'ai regardé à plusieurs reprises la vidéo et applique à la lettre (pas aux chiffres puisque mes valeurs ne sont pas les mêmes), il faut, dans #menu, rajouter une hauteur, ce que je fais, mais sans effet...

Ca commence à m'énerver...

Voici le code css concernant le menu:

/*////////////////////////////////////////
            Menu
////////////////////////////////////////*/
#menu{
    background:url(images/contenu_h.png) no repeat bottom center;
    height: 99px;
}
#menu ul li{
    list-style:none;
    float: left;
    padding:0;
}
#menu ul li.fictif{
    background-image:url(images/bouton_fictif.png) bottom;
    height:44px;
    width:99px;
    font-size:12px;
    text-decoration:none;
    text-align:center;
    display:block;
}
#menu ul li a{
    height:44px;
    width:79px;
    font-size:12px;
    text-decoration:none;
    text-align:center;
    display:block;
    background:no-repeat top left;
    line-height:70px;
    color:#f3f0c4;


}
#menu ul li a:hover{
    background-position:bottom left;
    line-height:35px;
}
#menu ul li a.vert1{
    background-image:url(images/bouton_vert1.png);  
}
#menu ul li a.vert2{
    background-image:url(images/bouton_vert2.png);  
}
#menu ul li a.gris{
    background-image:url(images/bouton_gris.png);   
}
#menu ul li a.violet1{
    background-image:url(images/bouton_violet1.png);    
}
#menu ul li a.violet2{
    background-image:url(images/bouton_violet2.png);    
}

Et voici le code html, entre les balises body:

<body>
<div id="top"> </div>
    <div id="conteneur">
        <div id="menu">
        <ul>
                <li class="fictif"> </li>
                <li> <a href="index.html"class="vert1">Accueil</a></li>
                <li> <a href="#"class="vert2">Infographie</a></li>
                <li><a href="#"class="gris"> Secrétariat</a></li>
                <li><a href="#"class="violet1"> Livre photo</a></li>
                <li><a href="#"class="violet2">Aquarelle</a></li>


          </ul>


         </div>


    </div>


</body>

Si quelqu'un pouvait m'indiquer mon erreur, je lui en serais très reconnaissante!

2 Réponse

394
,

Moi j'ai regarde que le #menu.

Tu peux changer ton "no repeat" en "no-repeat" déjà. Puis met une height ET une width, en général les deux vont de pair ^^

Ça peut peut être régler ton soucis.

Default
,

Salut Badbart,

Je te remercie infiniment, c'était tout simplement ça!!

en fait "no - repeat" suffisait!

mais merci aussi pour le width, j'y penserai la prochaine fois aussi.

J'ai cherché dans tous les sens et je ne voyais pas cette simple erreur pourtant élémentaire...

Encore merci d'avoir regardé et si rapidement!