Probleme de CSS sur un film-strip Rollover

[MoiMM]

Salut à tous !!

Voilà je viens d'essayer l'utilisation du "film-strip Rollover" expliqué sur cette page !!

Après 2/3 tatonnement (my english is very bbbaaaaddd ) je suis arrivé à insérer mon bouton mais j'ai encore un problème !!

Lors du survole une barre grise apparaît sur le bas de l'image !

Je pense que cela correspond à mon "A:hover" qui ajoute un fond gris sur le survole des liens ... ?

>> voir la page concernée

Comment puis je suprimer cette "barre grise" !

PS : Si vous êtes sous PC et utilisateur d'Explorer pourriez vous me dire si l'affichage est correct !?

Merci d'avance !

[dunjl]

Salut,

Je viens de regarder rapidement ton site, j'aime bien la sobriété du design. Je n'ai pas trop le temps de regarder tout ton css en revanche j'ai pu voir que ton rollover est en javascript, tu peux faire la même chose (sans changer ton image en plus, parce qu'elle deja prête) juste en css.

Regarde ici

en plus c'est en français et pas compliqué à mettre en place.

bon css

dunjl

[dunjl]

sous IE l'image est complètement grisée

[dunjl]

<ul id="menu">

<li><a href=&quot;http://www.creativedrums.com/wordpress/home"></a></li>'>;http://www.creativedrums.com/wordpress/home"></a></li>

<div id="b1">

<a href=&quot;http://www.creativedrums.com/wordpress/home" onmouseover="fsButton(1,-30)" onmouseup="fsButton(1,-30)" onmousedown="fsButton(1,-30)" onmouseout="fsButton(1,0)"><img src=&quot;http://www.creativedrums.com/wordpress/images/clear.gif" alt="" width="122" height="30" border="0"></a>

</div>

attention je crois que ta balise ul n'est pas fermée. en outre je ne comprends pas pourquoi tu utilises cette balise ici

Sinon pour ton lien voila le code html (en retirant les commandes javascript)

<a href=&quot;http://www.creativedrums.com/wordpress/home" ><img src=&quot;http://www.creativedrums.com/wordpress/images/clear.gif" alt="" width="122" height="30" border="0"></a>

et les css correspondant

#b1 a

{

        display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */

        width: 122px ;

        line-height: 30px ;

        color: #000 ;

        text-indent: 40px ; /* On décale le texte de 40px du bord gauche */

        text-decoration: none ;

        background: url(b-enter.jpg) no-repeat top left ; <= changement

       

}

#b1 a:hover

{

        background: url(b-enter.jpg) no-repeat bottom left; <=changement

}

[petit-ourson]

il faut que tu supprime le background-color sur l'evenement hover de ton lien qui englobe ton bouton. (hum pas sûr dêtre clair)

[dunjl]

<ul id="menu">

<li><a href=&quot;http://www.creativedrums.com/wordpress/home"></a></li>'>;http://www.creativedrums.com/wordpress/home"></a></li>

<div id="b1">

<a href=&quot;http://www.creativedrums.com/wordpress/home" onmouseover="fsButton(1,-30)" onmouseup="fsButton(1,-30)" onmousedown="fsButton(1,-30)" onmouseout="fsButton(1,0)"><img src=&quot;http://www.creativedrums.com/wordpress/images/clear.gif" alt="" width="122" height="30" border="0"></a>

</div>

attention je crois que ta balise ul n'est pas fermée. en outre je ne comprends pas pourquoi tu utilises cette balise ici

Sinon pour ton lien voila le code html (en retirant les commandes javascript et l'image clear.gif)

<a href=&quot;http://www.creativedrums.com/wordpress/home" ></a>

et les css correspondant

#b1 a

{

        display: block ;

        width: 122px ;

        height: 30px ;                  <= changement

        text-decoration: none ;

                                                                  <= changement

        background: url(http://www.creativedrums.com/wordpress/images/b-enter.jpg) no-repeat top left ; <= changement

       

}

#b1 a:hover

{

        background: url(http://www.creativedrums.com/wordpress/images/b-enter.jpg) no-repeat bottom left; <=changement

}

chez moi ca fonctionne sur moz et ie

a+

[dunjl]

désolé pour la première réponse, j'ai ajouté la réponse alors que je n'avais pas terminé

ah la la

[MoiMM]

Bon je crois que j'ai un sérieux problème ?? ... je viens d'essayer faire les corrections proposées par dunjl mais sans succès !!

Voici ce que j'ai fait exactemant !

Inséré dans mes CSS

#b1

{

  display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */

        width: 122px ;

        line-height: 30px ;

        color: #000 ;

        text-indent: 40px ; /* On décale le texte de 40px du bord gauche */

        text-decoration: none ;

        background: url(images/b-enter.jpg) no-repeat top left ;

       

}

#b1 a:hover

{

        background: url(images/b-enter.jpg) no-repeat bottom left;

}

et dans ma page :

<div id="b1">

<a href=&quot;http://www.creativedrums.com/wordpress/home" ></a>

</div>

Résultat rien ne s'affiche !??

Y a t'il un docteur dans la salle... je crois que j'ai un soucis !??!

[dunjl]

c normal :

ton premier bloc CSS doit être

#b1 a (c'est ton lien)

après tu lui définis une largeur et une hauteur (celles de ton image)

width:122px;

height:30px (et pas line-height)

et tu peux virer le text-indent

ensuite dans tes background ton url doit être soit en absolu (comme tu l'avais avant c'est-à-dire http://.etc) ou en relatif ( ca ca dépend où sont placées tes images sur ton serveur par rapport à ta feuille css)

réessaie déja en absolu

[MoiMM]

Merci dunjl ca marche !!!

Par contre maintenant j'aimerai bien que mon bouton soit justifiè sur la droite ! ... je vais faire 2/3 bidouille pour voir si je peux arranger ça !!

Encore merci tout le monde !!