Attribuer un style a une balise ul ?

Bonjour,

j'essais desesperement de venir a bout de ce tuto :

http://www.jfpalmier.fr/2012/informatique/les-animations-avec-jquery/



L'exemple 3.

J'ai recopie integralement le code, suivi le tuto a la lettre mais le style de la balise ul n'est pas prise en compte !

Mon code

html:

<ul class="menu-anim-jquery">
<li class="bouton-1"><a href="#Exemple" title="Menu">Texte</a></li>
    <li class="bouton-2"><a href="#Exemple" title="Menu">Texte</a></li>
    <li class="bouton-3"><a href="#Exemple" title="Menu">Texte</a></li>
    <li class="bouton-4"><a href="#Exemple" title="Menu">Texte</a></li>
</ul>

css

#menu-anim-jquery {
margin: 0 auto 50px auto;
    padding: 50px 0 0 127px;
    width: 497px;
    min-height: 130px;
    text-align: center;
    background: #30C url(images/icons.png) top center no-repeat;
    list-style: none;
border:1px solide #30C;
}
 
#menu-anim-jquery li {
    margin-right: 15px;
    width: 81px;
    height: 72px;
    position: relative;
    float: left;
}
 
#menu-anim-jquery a, #menu-anim-jquery a, #menu-anim-jquery a:hover {
    margin: 0 auto;
    width: 59px;
    height: 59px;
    overflow: hidden;
    background: url(images/icons.png) no-repeat;
    display: block;
    position: relative;
    z-index: 2;
}
 
#menu-anim-jquery li.button-color-1 a {
    background-position: -3px -3px;
}
 
#menu-anim-jquery li.button-color-2 a {
    background-position: -92px -3px;
}
 
#menu-anim-jquery li.button-color-3 a {
    background-position: -181px -3px;
}
 
#menu-anim-jquery li.button-color-4 a {
    background-position: -270px -3px;
}
 
#menu-anim-jquery li img.shadow {
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

quelqu'un peut-il m'aider svp ? je n'ai plus de solution, j'ai essayé pas mal de choses pour debugger mais rien n'y fait... c'est comme si la balise ul navait aucun style de defini ...

Merci.
Modifié par shunshay (20 Mar 2013 - 16:30)

Hello,

pour tes sélecteurs, tu as utilisé #menu-anim-jquery or tu dois pointer sur une classe.

Ju

Tu utilises un id dans ta feuille de styles et une classe dans ton code HTML.

Edit : grillé...
Modifié par jb_gfx (20 Mar 2013 - 16:34)

Non non désolé, aprés avoir fait un test j'ai oublié de remettre l'id le code est bien

  <ul id="menu-anim-jquery">
	<li class="bouton-1"><a href="#Exemple" title="Menu">Texte</a></li>
    <li class="bouton-2"><a href="#Exemple" title="Menu">Texte</a></li>
    <li class="bouton-3"><a href="#Exemple" title="Menu">Texte</a></li>
    <li class="bouton-4"><a href="#Exemple" title="Menu">Texte</a></li>
</ul>

Bonjour,
Que dit l'inspection de ton élément via l'outil de debug de ton navigateur ?

button vs bouton

       #menu-anim-jquery li.bouton-1 a {
		background-position: -3px -3px;
		}
		
	#menu-anim-jquery li.bouton-2 a {
		background-position: -92px -3px;
		}
		
	#menu-anim-jquery li.bouton-3 a {
		background-position: -181px -3px;
		}
		
	#menu-anim-jquery li.bouton-4 a {
		background-position: -270px -3px;
		}

Modifié par rodolpheb (20 Mar 2013 - 17:56)