problème image qui ne s'affiche pas.

ytti
Les bases HTML/CSS

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éponses

Badbart
Réponse acceptée

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.

ytti
Auteur
Réponse acceptée

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!