Roll over en CSS

bonjour,

Je n'arrive pas à faire un roll over en CSS sans que l'image soit tout le temps rechargé par IE. J'ai donc un blanc entre chaque état du bouton à chaque fois que je passe ma souris!
J'ai essayé plusieurs techniques, dont celle qui utilise une seule image (http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique).
Mais rien n'y fait l'image est toujours rechargé!
ça me rend fou, aidez moi svp! J'ai cherché sur le forum je n'ai rien trouvé de plus.

Html:

<ul id="menu">
<li><a href="#">&nbsp;</a></li>
<li><a href="#">&nbsp;</a></li>
<li><a href="#">&nbsp;</a></li>
<li><a href="#">&nbsp;</a></li>
</ul>

Css:

ul#menu{
float: left;
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
ul#menu li{
float: left;
margin: 20px 0 0 30px;
padding: 0 ;
 display:inline;
}
ul#menu li a{
 display:block;
width: 48px ;
line-height: 10px ;
 background: url(img/home_2.gif) no-repeat 0 0;
 margin-right:20px;
 text-decoration:none;
 border:0;
}
ul#menu li a:hover{
background: url(img/home_2.gif) no-repeat 0 -10px ;
}

Je débute en css...
Merci!

Hmm, étrange, il ne devrait pas y avoir de soucis sous XP

Tu as un exemple en ligne ?

Le même problème se pose-t-il sur l'exemple du tutoriel ?
http://css.alsacreations.com/xmedia/exemples/roll_over/
Modifié par Olivier (08 Apr 2006 - 14:23)

Olivier a écrit :
Hmm, étrange, il ne devrait pas y avoir de soucis sous XP

Tu as un exemple en ligne ?

Le même problème se pose-t-il sur l'exemple du tutoriel ?
http://css.alsacreations.com/xmedia/exemples/roll_over/

Le problème ne se pose pas sur le tuto.
Tu peux voir mon problème ici : http://www.madebyseb.com/test/index.htm

oui ça fait bien longtemps que je n'ai pas réinstallé, ça vient peut-être de là, je vais y penser

Merci les gars!

Seb1.9 a écrit :
ça me rend fou pourquoi ça le fait chez moi alors

Comment ça la partie de gauche ne s'affiche pas??

C'est en phase de test, je me doute que le   ce n'est pas bon, mais je voudrais rien mettre entre mes balises a, pas de texte ni rien, je veux juste afficher le background. Si je met une image on verra pas mon background...

La partie gauche ne s'affiche pas sous IE6 win XP (sans service pack). J'ai un grand vide blanc.

Pour les menus, c'est justement ce que je veux te dire, il te faut du texte (quitte à le masquer par la suite et faire ça avec des images de fond).

Ton site sera totalement inutilisable sans image et sans CSS.

Olivier a écrit :


La partie gauche ne s'affiche pas sous IE6 win XP (sans service pack). J'ai un grand vide blanc.

Pour les menus, c'est justement ce que je veux te dire, il te faut du texte (quitte à le masquer par la suite et faire ça avec des images de fond).

Ton site sera totalement inutilisable sans image et sans CSS.

Pour la partie gauche je ne comprend pas pourquoi elle ne s'affiche pas, c'est simplement une image en background dans un div...commes les autres images.

Pour le menu, je rajoute quoi exactement ds ma balise a et ds mon css?

Je veux faire mon site entièrement en Css, donc c'est normal que sans mon fichier css le site sera inutilisable...je ne comprend pas ta remarque

Seb1.9 a écrit :

Je veux faire mon site entièrement en Css, donc c'est normal que sans mon fichier css le site sera inutilisable...je ne comprend pas ta remarque

Houla ! c'est là que tu te trompes

CSS n'est qu'une surcouche au HTML. Les CSS permettent de mettre en page, en forme, d'appliquer une charte graphique etc.

Ce que les CSS permettent c'est la séparation du contenu et de la mise en forme.

Les CSS désactivés, le site doit rester consultable, regarde le récent CSS Naked Day -> http://blog.alsacreations.com/2006/04/05/237-naked-day

Le but était de montrer que même sans styles CSS le site web restait consultable.

Or avec ce que tu as fait là, ce n'est pas possible

Grosso modo ça se présente comme ça pour ton menu :

<ul id="menu">
<li><a href=".." id="home"><span>Accueil</span></a></li>
<li><a href=".." id="contact"><span>Contact</span></a></li>
</ul>

De cette façon même sans styles CSS (ou pour une autre feuille de style, pour un futur redesign etc), ton site reste consultable, le contenu est bien présent, les lecteurs d'écrans peuvent lire le menu, les moteurs indéxer les liens en fonction de leur intitulé etc.

Côté code CSS, c'est simplement une surcouche pour obtenir le rendu souhaité

ul#menu a#home { background: url(home.gif) no-repeat 0 0; }
ul#menu a#contact { background: url(contact.gif) no-repeat 0 0; }

/*
ul#menu a#home:hover { background-position: 0 -10px; }
ul#menu a#contact:hover { background-position: 0 -10px; }

Tu peux même faire ça directement a priori ->
*/
ul#menu a:hover { background-position: 0 -10px; }


ul#menu li a span
{
display: none;
/* il y a de meilleures façon de faire, confère la recherche etc */
}

Ok je commence à comprendre je vais appliquer ce que tu me dis
Pour les images de mon site, si je veux qu'elles s'affichent sans css je suis obligé de les mettre en dur ds le html et non en background ds mon css alors...?

Ok super merci pour tes lumières!

Je t'invite à regarder et à t'inspirer des techniques utilisées dans ce tutoriel pour t'assurer d'adopter la bonne marche de manoeuvre :

http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-css

Tu as d'ailleurs un exemple de ce que je t'expliquais pour le titre et les menus pour masquer le texte.