alignement de la position absolue de CSS

Question

J'ai un formulaire de connexion sur mon site Web qui affiche lorsqu'un utilisateur clique sur un bouton. Il est un div qui flotte au-dessus d'autres contenus. Il ne prend qu'une petite partie de la page (directement sous le signe de lien).

Tout fonctionne très bien en dehors d'une petite chose. Il affiche aligné à la gauche du signe en lien (i essayé un schéma ci-dessous).

  

| Connexion |

     

| Connexion choses ici |

Je veux vraiment à ressembler à ceci (aligner à droite du signe en lien):

  

| signe   en |

     

| Connexion choses ici |

Ceci est mon HTML:

        <div class="clear">
            <a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;"><span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span></a>
        </div>
        <div id="signinbox" style="display:none;">
            <p>Who would you like to sign in with?</p>
            <p>Google</p>
            <p>Yahoo</p>
            <p>Other</p>
        </div>

Et le CSS pour le signe dans la boîte:

  

signinbox {background-color: # C1DEEE;     padding: 10px; z-index: 1; position:   absolu; top: 66px; }

Est-il possible de le faire en seulement CSS?

Merci

Answer 1

Enveloppez l'info signin dans un autre div et l'appeler intérieur-signin alors que positionner par rapport à la outter absolue div positionné. Vous pouvez également avoir à régler la largeur sur la outter absolue div positionné.

div.inner-signinbox {
    position: relative;
    right: 20px;
}

signinbox {
    width: 250px; //ADD A WIDTH
    background-color:#C1DEEE; 
    padding:10px; 
    z-index:1; 
    position: absolute;
    top:66px; 
}

Si cela ne fonctionne pas, pourquoi ne pas simplement ajouter une propriété « gauche » à la signingbox pour régler la position horizontale, ainsi que la verticale. Y at-il une raison pour laquelle vous ne pouvez pas la position absolue avec l'élément x et y?

Answer 2

Je pense que vous pouvez essayer

float: right

ou

text-align: right

Answer 3

Mettre les choses des signes dans l'intérieur de la div contenant le bouton de connexion.

Faire la position du conteneur. Par rapport

Ensuite, donner la position de choses de connexion: absolute; et à droite:. 0;

Par ailleurs, prendre soin ici; Javascript nécessitant simplement de se connecter est assez désagréable. Beaucoup de gens courir NoScript pour diverses raisons.

Answer 4

J'ai créé une nouvelle div avec classe « principal volet ». Vous pouvez régler la position de « signinbox ». du css en changeant la valeur de « droite » et « top ».

<div class="main-pane">
  <div class="clear">
            <a class="button" id="SignInBtn" href="#" onclick="toggleSignInBox(); return false;">
                 <span id="spanSignIn">Sign In / Register <img src="../../Content/shared/arrow_down.png" border="0" /></span>
           </a>
  </div>
  <div id="signinbox" style="display:none;">
            <p>Who would you like to sign in with?</p>
            <p>Google</p>
            <p>Yahoo</p>
            <p>Other</p>
   </div>
</div>

.main-pane{
    position:relative;
}

#signinbox{
    width: 250px; 
    background-color:#C1DEEE; 
    padding:10px; 
    z-index:5; 
    position: absolute;
    top:66px;
    right:0px;  
}

Merci, Arun Krishnan