menu de navigation avec de jquery fadeIn animations fadeOut sur le bouton de la souris sur

Question

Je construis un menu de navigation où chaque bouton aura deux images - l'une a transité dans un autre en utilisant jquery mouseenter et les événements mouseleave. La partie Jquery est triée et n'est pas un problème. Dans chaque ancre, j'ai deux travées et une seule est visible.

HTML j'ai décidé d'aller de l'avant avec est la suivante:

<div> 
    <a href="#"> 
     <span id="span1">Button1</span> 
     <span id="span2">Button1</span> 
    </a> 
    <a href="#">    
     <span id="span3">Button2</span> 
     <span id="span4">Button2</span> 
    </a> 
</div> 

Mon problème est avec css. Je ne suis pas capable de styler les boutons correctement, donc Button1 est à gauche de Button2. Actuellement, tous les deux boutons sont affichés dans le même espace (l'un sur l'autre) de sorte que le dernier est le seul visible.

Voici mon css:

#span1 { background-image:url('button1.png'); } 
    #span2 { background-image:url('button1H.png'); } 
    #span3 { background-image:url('button2.png'); } 
    #span4 { background-image:url('button2H.png'); } 

    span 
    { 
     background-repeat:no-repeat;     
     position:absolute; 
     width:100px; 
     height:50px; 
     text-indent:-9000px; 
     position: 0 0; 
    } 

    a 
    { 
     width:150px; 
     float:left; 
    } 

Suis-je manque un conteneur css? Mon but est de faire de chaque bouton 150px de long. Je veux avoir le bouton 1 qui est 150px long, puis le bouton 2 dans la même ligne.

Merci pour votre aide!

Answer 1

1. Vous utilisez la position: absolute pour toutes vos travées, ce qui les place à 0 0 sur les axes x et y. définir différentes positions left pour eux. Affichage d'utilisation: bloc pour vos travées, donc elles prennent une hauteur et une largeur.

essayer d'utiliser ceci:

#span1 { background-image:url('button1.png'); } 
#span2 { background-image:url('button1H.png'); } 
#span3 { background-image:url('button2.png'); left: 300px;} 
#span4 { background-image:url('button2H.png'); left: 300px;} 

span{ 
    background-repeat:no-repeat; 
    position:absolute; 
    width:100px; 
    height:50px; 
    position: 0 0; 
    display: block; 
    text-indent:-9000px; 
} 

voir ici: http://jsfiddle.net/SebastianPataneMasuelli/L5guL/1/

Vous pouvez fossé la position: absolute et manipuler la deuxième travée, en lui donnant une position relative et en le déplaçant à gauche. Cela vous permettra de faire flotter des éléments et d'éviter le positionnement à gauche absolu, qui peut devenir invisible à mesure que vous avez plus de liens. exemple: http://jsfiddle.net/SebastianPataneMasuelli/L5guL/4/