Bouton déroulant vers la droite

Résolu/Fermé
letrancheur Messages postés 210 Date d'inscription dimanche 14 juillet 2013 Statut Membre Dernière intervention 25 août 2020 - 31 janv. 2015 à 15:00
 simo - 4 févr. 2015 à 22:12
Bonjour,
Voila je recommence à faire du html et css depuis peux et je cherche une solution pour faire dérouler mon bouton vers la droite j'aimerais éviter d'utiliser le js pour cela voice ce que je cherche à faire



voila ce que cela donne déroulé


Le problème:
Est que le bouton se déroule partout(du coté droit du bouton) sur la largeur m^me si je ne vais pas dessus du coup j'ai essayé de réduire le div en le dimentionnant à la taille du bouton mais du coup le déroulage se met au dessus et le bouton dessend d'un cramp
Merci d'avance pour toutes l'aide que vous pourrez m'apporter

1 réponse

Zephirr Messages postés 316 Date d'inscription mardi 30 décembre 2014 Statut Membre Dernière intervention 6 novembre 2015 100
1 févr. 2015 à 03:43
1
letrancheur Messages postés 210 Date d'inscription dimanche 14 juillet 2013 Statut Membre Dernière intervention 25 août 2020 7
Modifié par letrancheur le 3/02/2015 à 17:50
le problème est que je n'ai pas fais cela comme ca voici ma partie de code

HTML
  <div align="right">
    <div id="login">
      <form method="post" action="connection">
        <div class="hidelogin">
          <input type="text" name="pseudo" placeholder="Pseudo du jeu" required>
          <input type="password" name="pass" placeholder="Mot de passe du /login" required>
          <input type="checkbox" name="logged" value="oui"> Rester connecté
        </div>
        <input type="submit" value="Connexion" class="insuba" style="width : 130px; text-align: right;">
      </form>
    </div>
    <a href="/inscription">
      <input type="submit" value="Inscription" calss="insuba" style="width : 130px; text-align: right;">
    </a>
  </div>


CSS
header {
 /*border: solid 1px;*/
 margin-top: 2.5%;
 margin-left: 10%;
 margin-right: 10%;
 min-width: 625px;
}
header #login{
 width: 625px;
}
header #login .hidelogin {
 display: none;
}
header #login:hover .hidelogin {
 position: relative;
 display: inline-block;
}

du coup si l'on observe par rapport au site que tu m'a donné, j'ai le #monmenu le #monmenu li ainsi que #monmenu li:hover .sfhover
0
Zephirr Messages postés 316 Date d'inscription mardi 30 décembre 2014 Statut Membre Dernière intervention 6 novembre 2015 100 > letrancheur Messages postés 210 Date d'inscription dimanche 14 juillet 2013 Statut Membre Dernière intervention 25 août 2020
Modifié par Zephirr le 3/02/2015 à 19:21
Ca te convient?

<head>
<STYLE type="text/css">

  ul ul {display: none; float : right;}
  li {list-style-type: none;}
  
  li:hover ul.niveau2, li li:hover ul.niveau3 {display: block}
  
  input.insuba {
    float:right;
    clear:both;
  }

</style>
</head>

<ul>
  <li>
    <form method="post" action="connection">
      <input type="submit" value="Connexion" class="insuba">
      <ul class="niveau2">
 <li>
   <input type="text" name="pseudo" placeholder="Pseudo du jeu" required>
   <input type="password" name="pass" placeholder="Mot de passe du /login" required>
   <input type="checkbox" name="logged" value="oui"> Rester connecte  
        </li>
      </ul>
    </form>
  </li>
 </ul>
0
letrancheur Messages postés 210 Date d'inscription dimanche 14 juillet 2013 Statut Membre Dernière intervention 25 août 2020 7 > Zephirr Messages postés 316 Date d'inscription mardi 30 décembre 2014 Statut Membre Dernière intervention 6 novembre 2015
3 févr. 2015 à 22:17
le problème étant que justen en dessus je vais déja faire une menu avec des ul et li :s
0
Zephirr Messages postés 316 Date d'inscription mardi 30 décembre 2014 Statut Membre Dernière intervention 6 novembre 2015 100
4 févr. 2015 à 07:51
Rajoute quelques
class
sur les ul, les li et dans le css.
0
letrancheur Messages postés 210 Date d'inscription dimanche 14 juillet 2013 Statut Membre Dernière intervention 25 août 2020 7
4 févr. 2015 à 11:55
ok merci je vais essayer comme sa
0