Problème avec le rollover du design complet (XHTML / CSS) en 5 étapes

Bonjour à tous,

Je suis débutant en css et je me suis intéressé au tuto "design complet en 5 étapes" proposé sur le site. Il me semble avoir tout compris mais je n'arrive pas a comprendre le fonctionnement du rollover qui fonctionne a priori d'une façon un peu différente du tuto sur les rollover, avec une image de 70 px de haut (25px + 10px pour l'ombre par image) alors que le line-height est de 25px.

Bref pouvez vous m'expliquer le fonctionnement ou m'envoyer l'image utiliser pour en comprendre le fonctionnement ?

Merci d'avance

Bonjour !

Je n'ai pas regardé en détail le tuto dont tu parles, alors si je suis à côté de la plaque, dis-le moi ...

Le principe du menu rollover présenté par Raphaël est d'utiliser une seule image, pour le lien "normal" et le lien survolé, afin d'éviter un temps de chargement au survol.

Il utilise pour cela une image qui fait le double de la taille de l'élément qu'elle doit décorer (soit 2 fois plus haute, soit 2 fois plus large selon les cas). Ici, l'image doit être deux fois plus haute que l'élément qui contient le lien : 25px pour le texte du lien + 10px pour l'ombrage en-dessous = 35px, multiplié par deux = 70px.

L'effet de survol est alors obtenu en modifiant la position du background dans la feuille de style. On ne change pas l'image de fond, mais seulement sa position ! Comme l'image a été chargée quand le visiteur est arrivé sur le site, elle se trouve dans le cache du navigateur et est donc affichée [quasi, tout est relatif ] instantanément.

<edit>Oups, je viens de remarquer que ce tuto a été enlevé du site pour passer dans le livre de Raphaël
Modifié par Sopo (15 Jan 2006 - 21:41)

Merci SOPO pour ta réponse, j'ai effectivement compris que l'image doit faire 70 px de haut et doit être contenu dans un bloc de 35 px pour etre affichée qu' à moitié mais je ne comprend pas à quoi ressemble l'image complète puisqu'elle est décalée de 25 px vers le haut et contenu dans un bloc ul#menu li a de 25 px seulement pour afficher la bordure que sur la partie haute de l'image sans l'ombre.

ul#menu
{
height: 35px ;
margin: 0 ;
padding: 0 ;
background: url(bg_menu.gif) repeat-x 0 -25px ;
list-style-type: none ;
}

ul#menu li
{
float: left ;
text-align: center ;
}

ul#menu li a
{
width: 130px ;
line-height: 25px ;
font-size: 1.2em ;
font-weight: bold ;
letter-spacing: 2px ;
color: #fff ;
display: block ;
text-decoration: none ;
border-right: 2px solid #dea ;
}

ul#menu li a:hover
{
background: url(bg_menu.gif) repeat-x 0 0 ;
}

merci à tous ceux qui pourront m'nvoyer cette fameuse image ou m'aider à comprendre le processus utilisé.

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Ha ! je crois que je vois ce qui te perturbe

En fait, l'image de fond n'est pas placée sur les liens, mais sur la liste, qui fait 35px de hauteur. Au moment du survol, on applique la même image au lien, qui fait effectivement 25px de haut, en la décalant vers le bas. Comme la liste n'est pas affectée par ce changement, on continue à voir l'ombre sous les liens, mais la partie vert foncé est recouverte par l'image de fond du lien ... j'ai l'impression que je ne suis pas très clair, là

Bon, en gros, l'image doit se présenter comme ceci :

en haut, une bande vert clair de 25px ;
au milieu, une bande vert foncé de 25px ;
en-dessous, une bande avec un dégradé gris-blanc qui doit faire 10px.

soit 60px de haut en tout.

PS :

chris-web a écrit :
et contenu dans un bloc ul#menu li a de 25 px seulement pour afficher la bordure que sur la partie haute de l'image sans l'ombre.

C'est peut-être moi qui ne comprends pas bien, mais j'ai l'impression que ce morceau de phrase ne veut absolument rien dire

PPS:

N'oublie pas de baliser ton code, comme Raphaël te l'a demandé !

Merci SOPO pour ta réponse.

C'est exactement ce que je voulais savoir. ET milles escuses à Raphaël pour mon précedent message.

chris-web a écrit :
Merci SOPO pour ta réponse.

C'est exactement ce que je voulais savoir. ET milles escuses à Raphaël pour mon précedent message.

Bah pas de problème... mais dès que tu voudras bien exécuter ce qu'il y'a dans mon message ce sera encore mieux (éditer ton message pour ajouter les bonnes balises de CODE)
De toute façon il va te falloir éditer ton premier message aussi pour y ajouter le marqueur [Résolu] qui est de rigueur
Modifié par Raphael (16 Jan 2006 - 17:01)

a écrit :
ET milles escuses à Raphaël pour mon précedent message.

Bon début, mais édite-le même si ton problème est résolu, ça pourrait rendre service à d'autres visiteurs

Et tant qu'à faire, je t'invite à ajouter [Résolu] dans le titre du message.

<edit>Argh, grillé par le chef </edit>
Modifié par Sopo (16 Jan 2006 - 17:01)