28173 sujets

CSS et mise en forme, CSS3

Ombre d'un lien au survole

Salut
Voila ce que je voudrais faire :
j'ai des liens, et je voudrais qu'au survole une ombre du lien aparaisse, voila le code :


<a href="#">Nom rubrique<span>Nom rubrique</span></a>
<a href="#">Nom rubrique<span>Nom rubrique</span></a>
<a href="#">Nom rubrique<span>Nom rubrique</span></a>
<a href="#">Nom rubrique<span>Nom rubrique</span></a>
<a href="#">Nom rubrique<span>Nom rubrique</span></a>
<a href="#">Nom rubrique<span>Nom rubrique</span></a>




#menu a
{
position:relative;
display:block;
text-decoration:none;
color:#000;
height:15px;
}

#menu a:hover
{
background:none; /*IE*/
}

#menu a span
{
display:none;
}

#menu a:hover span
{
display:inline;
position:absolute;
left:2px;
top:2px;
color:#b8b8b8;
}


seulement voila, l'ombre (le span quoi) aparrait au dessus du lien !
ce qui est tout a fait normal

j'ai essayé z-index mais ca na pas marcher

comment faire ?

merci
Modifié par aoemaster (27 Jul 2006 - 13:20)
Salut ...

C'est bien un menu de navigatio que tu réalises ? Je te conseille dans ce cas d'utiliser une liste non ordonnée pour regrouper tes liens. C'est plus correct sémantiquement parlant, et ça a aussi l'avantage de te fournir des blocs & sélecteurs supplémentaires dans ton code CSS, ce qui évite de passer par les <span> comme tu le fais ...

Quand tu parles d'une "ombre", c'est en fait une bordure grise ? je ne vaois pas d'image d'arrière plan dans ta feuille de style Smiley ohwell

Auquel cas il te suffit d'utiliser quelque chose de ce genre (non testé) 
<!-- HTML -->
<a href="..." title="...">Rubrique</a>

/* CSS */
a {
    margin-bottom: 2px;
    }
a:hover {
    margin-bottom: 0;
    border-bottom: 2px solid #b8b8b8;
    }
Bonjour,

"Nom rubrique<span>Nom rubrique</span>"... J'ai mal à mon contenu, là Smiley cligne

Souvenez vous, svp, que l'un des buts principaux du jeu est d'avoir un contenu qui n'ai pas besoin d'être déformé pour produire des effets de présentation. Or, avec ces fichus <span> dans les liens répétant le libellé, le contenu n'a plus de sens.

Pour l'ombrage:
- faites-le proprement dans IE grâce à un filter (cf msdn)
- parallèlement, faites-le proprement via text-shadow dans les quelques navigateurs qui supportent cette propriété (Safari et... toujours Safari, il me semble ?)
- et oubliez-le dans les autres navigateurs

Sinon l'ombrage via les images de background... Très joli quand le texte n'est pas affiché à la taille prévue. A moins que vous ne fixiez la taille du texte ou que vous ne fassiez un texte en image bien-sûr. Mais vous avez compris les standards, et vous n'allez pas le faire, n'est-ce pas ?
Modifié par Laurent Denis (28 Jul 2006 - 05:39)
Salut,

a écrit :
...ou que vous ne fassiez un texte en image bien-sûr


Si on fais un menu avec des images avec les title des liens renseignés et les alt des images aussi, c'est pas correct alors ?

En gros, navigation : pas d'images ?
Hum a écrit :
Si on fais un menu avec des images avec les title des liens renseignés et les alt des images aussi, c'est pas correct alors ?


Correct, qu'entends-tu par là ?

Les textes mis en image posent un problème d'accessibilité: s'il s'agit d'images img et non d'images d'arrière-plan CSS, le seul défaut majeur sera l'impossibilité ou la difficulté d'agrandire le texte pour une partie des utilisateurs (ceux n'ayant pas de zoom graphique dans IE ou FF en particulier).

En revanche, évitez de remplir le title du lien ne contenant qu'une image, ou alors, reproduisez-y exactement le contenu du alt de l'image (c'est la garantie la plus simple qu'aucune information ne sera perdue).

Mais là, avec cette histoire d'ombrage, ce qui motivait ma remarque était que je nous vois bien partis pour des liens vides de texte et d'image, avec un pseudo contenu en background CSS pour pouvoir faire facilement l'effet au :hover.

Je dois être en train de devenir doucement paranoïaque, à force de lire ce forum... Rassurez-moi ! Smiley cligne
Modifié par Laurent Denis (28 Jul 2006 - 06:55)
Correct par rapport au fait qu'effectivement il n'y a plus comme contenu "en dur "dans le lien dans le cas que je decris qu'une image (avec un alt et un title de lien renseignés avec le meme texte).

Mais si j'ai bien compris le seul bémol est de ne pas pouvoir redimensionner le texte (qui n'existe pas puisque c'est une image) ?

Donc, si tu fais pas dans le farfelu au niveau police, et que tu fais une belle image lissée et super lisible et pas minuscule c'est "correct" ?

Correct : par rapport a l'accéssibilité , les standards ,
Correct : solution considérée comme acceptable en fait ?

Car comme je l'ai lu ici, si on suit tout les standards à la lettre, "on" aura tous le meme menu et les sites se ressemblerons tous...

Merci de tes explications Laurent Denis.

Smiley smile
Modifié par Hum (28 Jul 2006 - 07:41)
Hum a écrit :
Donc, si tu fais pas dans le farfelu au niveau police, et que tu fais une belle image lissée et super lisible et pas minuscule c'est "correct" ?


Oui

Comme tu le suggères très justement, force est d'accepter les textes mis en image pour compenser le peu de variété graphique dans le système des polices de caractères Web, en veillant (au cas par cas) à en optimiser la lisibilité.

Une remarque à ce sujet: on retombe sur le fait que CSS marche sur 3 pattes fautes d'implémentations, et que ses limites viennent largement de là. En effet, CSS prévoyait bien un mécanisme de définition de polices de caractères, ainsi qu'un mécanisme de téléchargement, qui donnaient toute liberté du point de vue variété. Mais son implémentation est bloquée pour des raisons principalement économiques (opposition des sociétés propriétaires des fontes).
Sujet clos
Aller à