28173 sujets

CSS et mise en forme, CSS3

[Résolu]Hover: afficher une image à distance du lien

Bonjour,

Je souhaiterais mettre en forme une page qui contienne sur la gauche une liste de liens. Et quand on survol un lien, que le navigateur affiche sur la droite de l'écran une image propre à chaque lien.

J'ai essayé ceci (css, trouvé ici http://forum.alsacreations.com/topic.php?fid=4&tid=14567&s=hover[/url]
):

<div class="element_menu">
   <ul>
      <li>
         <div id="vign1">
            <a href="#">Maroc<span></span></a>
         </div>
      </li> 
   </ul>
</div>


Code CSS:

.element_menu ul:                                 
       {
       padding: 2px;
       padding-bottom: 15px;                         
       padding-left: 20px;                           
       margin: 0px;                                  
       margin-bottom: 5px;                           
       list-style-image: url("images/arrow.gif");                                                  
       }

#vign1
      {
      text-align: left;
      display: block;
      float: left;
      }

#vign1 a span
             {
             display: none;
             }

#vign1 a:hover
              {
              background-color: black;
              }

#vign1 a:hover span
                   {
                   display: block;
                   position: absolute;
                   width: 416px;
                   height: 316px;
                   background-image: url(images/1.jpg);
                   left: 469px;
                   top: 220px;
                   background-repeat: no-repeat;
                   }


Le résultat partiel est bon.
-> le survol affiche une image à droite Smiley smile .
-> malheureusement la liste perd sa définition de forme Smiley fache .

Alors y a t-il une méthode plus simple ? Merci de vos réponses.
Modifié par doclolo (28 Jun 2006 - 10:47)
a écrit :
-> malheureusement la liste perd sa définition de forme fache .



Que veux-tu dire par là? Tu pourrais montrer le résultat. Et est ce que ça arrive tout le temps ou juste au survol?


EDIT : En fait, j'ai pigé le truc, tu dois retirer le display et le float de ta class vign1.
Tu peux même la supprimer si le text-align ne te sert pas.
Modifié par coccimaster (27 Jun 2006 - 10:07)
Voilà à quoi cela ressemble:

EDIT de modérateur : attention à ne pas afficher d'images géantes qui déforment le forum. Merci d'utiliser le bouton "créer une miniature" lorsque vous chargez une image.

Le 4ème lien fonctionne: en le survolant, l'image de droite change (celui tout en bas est une erreur).

Par contre sa forme ne correspond plus aux premiers liens.

Alors quid ?
Modifié par Raphael (27 Jun 2006 - 11:42)
Le truc, c'est que le display: block donne à l'élément #vign1 le rendu d'un bloc justement. Or, le bloc, lorsque ses enfants sont dimensionnés, ce qui est le cas des liens contenus dans ta div, va lui mëme s'ajuster à ces dimensions. Le float: left, va faire que toutes ces div, vont se coller les unes aux autres, sur la gauche, jusqu'à remplir la ligne, et ainsi de suite, un peu comme des briques en maçonnerie.


Mais bon, l'expliocation n'est pas géniale, cherche plutot sur les tutos d'alsas, du cotés des modèles de boites pour le display, et du positionnement css pour le float, tu seras bien mieux renseigné.
Sujet clos
Aller à