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

HTML Discussion :

Pb sous IE avec liste survolable


Sujet :

HTML

  1. #1
    Nouveau membre du Club
    Inscrit en
    Septembre 2005
    Messages
    5
    Détails du profil
    Informations forums :
    Inscription : Septembre 2005
    Messages : 5
    Par défaut Pb sous IE avec liste survolable
    Bonjour à tous,

    Je souhaite afficher une liste d'éléments qui, lorsque je survole un élément avec la souris, affiche une description en face de l'élément. J'ai trouvé une solution qui fonctionne sous Firefox, mais pas sous IE (la description de l'élément est invisible). Voici le code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <HTML>
      <HEAD>
        <STYLE type='text/css'>
          li {
            position:relative;
          }
          a span {
            position:absolute;
            top:0px;
            left:1px;
            width: 1px;
            height:1px;
            overflow:hidden;
            border:1px solid black;
          }
          a:hover span {
            position:absolute;
            top:0px;
            left:250px;
            width:3em;
            height:3em;
          }
        </STYLE>
      </HEAD>
      <BODY>
          <ul>
            <li>
              <a href="#nogo">
                 aaa
                 <span>titi</span>
              </a>
            </li>
            <li>
              <a href="#nogo">
                 aaa
                 <span>titi</span>
              </a>
            </li>
          </ul>
     </BODY>
    </HTML>
    Merci pour votre aide

  2. #2
    Membre émérite
    Avatar de Linaa
    Profil pro
    Inscrit en
    Avril 2005
    Messages
    987
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2005
    Messages : 987
    Par défaut
    Le style indiqué dans le a span ne s'applique pas uniquement au span de la balise a, mais aux deux!
    Mais il serait plus judicieux de passer par des classes ou des identifiants.

    Pour le span, il faut au debut le cacher par display:block, puis le faire apparaitre au survol avec display:inline;
    Vu qu'au debut le span n'est pas visible, les styles que tu as mis ne servent à rien.

    Pour IE, il faut rajouter en plus
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    	  a:hover {
    	    background:none;
    	  }
    Ce qui donne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <HTML>
      <HEAD>
        <STYLE type='text/css'>
          li {
            position:relative;
          }
          span {
    		display:none;
          }
    	  a:hover {
    	    background:none;
    	  }
          a:hover span {
    		display:inline;
            position:absolute;
            top:0px;
            left:250px;
            width:3em;
            height:3em;
    		border:1px solid #000000;
          }
        </STYLE>
      </HEAD>
      <BODY>
          <ul>
            <li>
              <a href="#nogo">
                 aaa
                 <span>titi</span>
              </a>
            </li>
            <li>
              <a href="#nogo">
                 aaa
                 <span>titi</span>
              </a>
            </li>
          </ul>
     </BODY>
    </HTML>

  3. #3
    Nouveau membre du Club
    Inscrit en
    Septembre 2005
    Messages
    5
    Détails du profil
    Informations forums :
    Inscription : Septembre 2005
    Messages : 5
    Par défaut
    Génial !!! Merci beaucoup pour tes explications claires et pédagogiques.

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

Discussions similaires

  1. Réponses: 8
    Dernier message: 13/08/2010, 09h18
  2. Réponses: 2
    Dernier message: 07/09/2007, 13h33
  3. sous requête avec liste
    Par illegalsene dans le forum Langage SQL
    Réponses: 3
    Dernier message: 23/05/2007, 12h11
  4. probleme de cochage de checkbox avec liste sous liste etc.
    Par satan.malin dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 24/02/2006, 21h49
  5. Sous formulaire avec zone de liste modifiable
    Par Krakotte dans le forum IHM
    Réponses: 7
    Dernier message: 20/01/2006, 10h21

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