Besoin d'aide pour l'alignement UL positionné absolu basé sur CSS (effet de bascule)

Question

J'essaie d'avoir un système de changement de langue dans ce site Web. L'idée est d'avoir un SPAN qui affiche une liste déroulante (basée sur UL) qui contient une liste des langues disponibles. Voici un aperçu de l'effet que j'essaie d'atteindre.

alt text http://img337.imageshack.us/img337/3474/dropboxfinal.png

La liste déroulante est en fait une liste non numérotée qui est masquée par défaut. En vol stationnaire, je rends l'UL visible. Voici le HTML et le CSS.

HTML

<span id="langswitch">Language↓ 
    <ul id="langlist"> 
     <li class="en"> 
      <a title="Current language: English" href="http://domain/en"> 
       <img width="16" height="13" alt="English Language" src="flag-en.gif" /> 
       English 
      </a> 
     </li> 

     <li class="th"> 
      <a title="Switch to Thai language" href="http://domain/th"> 
       <img width="16" height="13" alt="Thai Language" src="flag-th.gif" /> 
       Thai 
      </a>  
     </li> 

     <li class="zh">   
      <a title="Switch to Chinese language" href="http://domain/zh"> 
       <img width="16" height="13" alt="Chinese Language" src="flag-zh.gif" /> 
       Chinese 
      </a> 
     <li> 
    </ul> 
</span> 

CSS

ul#langlist { 
    border:1px solid #3399CC; 
    color:#006699; 
    background:#fff; 
    padding:0 !important; 
    width:100px; 
    list-style:none; 
    position:absolute; 
    top:62px; 
    right:0; 
    z-index:100; 
    display:none; 
} 

span#langswitch:hover ul#langlist { display:block; } 

Mais au lieu de la liste déroulante apparaissant aligné avec ma portée, il est apparaît à l'extrémité droite du navigateur. Voici la capture d'écran.

alt text http://img84.imageshack.us/img84/1687/dropbox.png

peut l'un des gourous CSS recommander ici un correctif pour cela?

Merci, m^e

Answer 1

situé juste à la position de la « portée » à « relative », définir une largeur fixe de la « span » et jouer un peu avec les valeurs « haut » et « gauche "(appliqué à #langlist) pour gérer l'alignement vertical et horizontal de la liste!

---

EDIT (EN RÉPONSE À VOTRE QUESTION): Par défaut, lorsque vous placez dans une page Web un élément avec une position absolue, sa position (définie par les attributs « top » et « gauche ») est calculé par rapport à la page html ... donc, les valeurs "left" et "top" sont les coordonnées "x" et "y" d'un système de coordonnées apparent dont l'origine est le coin supérieur gauche.

Pour les éléments dans la tête de la page Web il n'y a pas de problème (dans la plupart des cas), mais les éléments absolument positionnés dans le contenu de la page sont constamment verrouillés sur leur position afin qu'ils ne bougent pas avec le contenu de la page si l'utilisateur fait défiler ou redimensionne la page web!

Si vous définissez sur «relative» la position de l'élément (dans ce cas, la plage) contenant l'étiquette positionnée de manière absolue, les valeurs «haut» et «gauche» sont calculées par rapport à ce conteneur. fixé!

SUR VOTRE CODE: Techniquement, vous ne pouvez pas appliquer la pseudo-classe « planer » à des éléments non-lien si votre Doctype est pas HTML5, donc ma suggestion est d'envisager d'utiliser une fonction jQuery pour appliquer « display: block "à la liste quand survient un événement hover sur le #label. Cependant, vous pouvez corriger votre code comme suivre ... gérer la distance de la liste de la #label modifier la valeur de #langlist « margin-top »:

<style type="text/css"> 
#container{ 
    position: relative; 
    width:100px; 
} 

#langswitch{ 
    padding: 0px; 
    margin: 0px; 
    list-style:none; 
    position:absolute; 
} 

#langlist { 
    border:1px solid #39C; 
    color:#069; 
    background:#fff; 
    padding:0 !important; 
    margin-top: 2px; 
    width:100px; 
    top:20px; 
    left:0px; 
    display: none; 
} 

#container:hover #langlist{ 
    display:block; 
} 

img{ 
    background-color: #CCC; 
    border: 1px solid black; 
} 
</style> 


<div id="container"> 
    <ul id="langswitch"> 
    <li> 
     <a id="label" href="#">Language↓</a> 
     <ul id="langlist"> 
     <li class="en"> 
      <a title="Current language: English" href="http://domain/en"> 
       <img width="16" height="13" alt="English Language" src="flag-en.gif" /> 
       English 
      </a> 
     </li> 

     <li class="th"> 
      <a title="Switch to Thai language" href="http://domain/th"> 
       <img width="16" height="13" alt="Thai Language" src="flag-th.gif" /> 
       Thai 
      </a>  
     </li> 

     <li class="zh">     
      <a title="Switch to Chinese language" href="http://domain/zh"> 
       <img width="16" height="13" alt="Chinese Language" src="flag-zh.gif" /> 
       Chinese 
      </a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div> 

Notez que cette solution ne fonctionne pas IE6!