IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Hover sur <a> (text-indent)


Sujet :

Survol d'un élément en CSS (:hover)

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2007
    Messages
    51
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 51
    Par défaut Hover sur <a> (text-indent)
    Bonjour

    Petit souci de mise en forme, Firefox ne veut pas me faire de text-indent sur un lien !

    Voilà le code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    ul li a:hover
    {
    	font-size: large;
    	font-weight: bold;
    	text-indent: 20px;
    }
    Oui le(s) lien(s) se trouve(nt) dans une liste (j'ai donc déjà essayé sur un lien simple, mais ça ne change rien.

    Sous IE (qui ne respecte pas des masses les règles du jeu ^^) le texte est bien décale au passage du pointeur, mais pas sous FF !

    Une idée du pourquoi?

  2. #2
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut
    Salut,

    Ben je crois que tu as tout dit. IE ne réagit pas correctement, enfin d'après ce que je comprends. text-indent agit sur la première boîte en-ligne contenu dans un bloc. Or tu essaies d'agir sur le texte d'un élément <a>. Le comportement de text-indent est donc normal.

  3. #3
    Membre Expert Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Par défaut
    Bonjour,
    c'est normal puisque la propriété text-indent ne s'applique qu'aux éléments de niveau block. IE n'a donc pas un comportement standard.
    Tu dois donc ajouter cela:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    ul li a
    {display:block;}
    Au passage, attention à bien vérifier que le hover n'a aucun impact
    sur la mise en forme des éléments adjacents.

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2007
    Messages
    51
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 51
    Par défaut
    Merci pour ces réponses ! c'est nickel

    Juste une petite remarque, encore un problème IE/FF : Sous IE, la puce est décalée avec le texte, pas sous FF ! (m'enfin c'est loin d'être important!)


    Sinon Erwan31
    attention à bien vérifier que le hover n'a aucun impact
    sur la mise en forme des éléments adjacents.
    +1 ^.^

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Effet hover sur titre avec passage souris sur texte
    Par ickyknox dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 24/11/2012, 17h01
  2. hover sur input type text
    Par mica94 dans le forum jQuery
    Réponses: 0
    Dernier message: 03/08/2011, 16h26
  3. Hover sur texte fait apparaitre une image
    Par guillaumeabxl dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 29/01/2011, 21h28
  4. menu popup sur une zone de text
    Par jesus144 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 26/05/2005, 23h15
  5. Fonction LEFT sur champ de type "text" : méthodes
    Par MatthieuQ dans le forum Langage SQL
    Réponses: 4
    Dernier message: 08/06/2004, 11h15

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo