Sujet Précédent Sujet Suivant

Inscription

Fermé
Hakiimm Messages postés 13 Date d'inscription mercredi 30 mars 2016 Statut Membre Dernière intervention 13 décembre 2016 - Modifié par crapoulou le 22/04/2016 à 20:17
 rankere - 23 avril 2016 à 19:10
Bonsoir , esseye de fere ma page connection / inscrption de cette façon (faire en sorte que tout soit dans la méme line les un audessou des autres ) ,, mais je galaire vraiment , j y suis depuis 18:14 c"est vraiment simple mais je trouve vaiment pas ,, 
 <!DOCTYPE html>
<html>

<head>
    <title>inscription et connection </title>
    <link rel="stylesheet" href="css/inscription.css">
    <meta charset='utf-8'>


</head>
<header>
<nav class="menu" >
                <ul >
     
                 
                     <li id="decalage" >
                        <a href="sandwitch.html"> <p>Sandwitch</p> </a>
                    </li>
                    <!--
   -->
                    <li id="petits">
                        <a href="pizza.html"> <p>Pizza</p> </a>
                    </li>
                    <!--
  -->
                    <li >
                        <a href="hamburger.html"> <p>Hamburger </p> </a>
                    </li>
                    <!--
   -->
                    <li id="petits">
                        <a href="dessert.html"> <p>Dessert</p>  </a>
                    </li>
                    <!--
   -->
                    <li id="petits">
                        <a href="boisson.html"> <p>Boisson</p> </a>
                    </li>
     


                </ul>

            </nav>
 
     
                
            <nav class="login" >
                <ul >
                    <li>
                        <a href="sandwitch.html"> <p>connection </p> </a>  
                    </li>
                    <!--
   -->
     
                    <li>
                        <a href="pizza.html"> <p>Inscription</p> </a>
                    </li>
                   
                  

                </ul>

            </nav>
            
     
       

</header>


<body>
   
    <section>
            
   
 <div class="fond">
   
            <fieldset id="sec1">
     <div class="insc" >

        <form method="post" action="azer.php" class=h1>
   
   <fieldset id="section2">
    
    <legend> Connection </legend>
     <label for="Email"></label>
                <input type="email" id="Email" name="adresse" autocomplete="on" placeholder="Email:" required="required">
                <br>

                <label for="passe"></label>
                <input type="password" id="passe" name="passe" placeholder= "Mot de passe:" required="required"><br>
    
    <a id="retour" href="C:\Users\Orange\Desktop\acceuille et l bordel\acceuille.html">  Retour a la page    </p> </a>
                <input id="boutton" type="submit" value="Connection" <br>
   </fieldset><br>
    
   
   
            
         <font size=6>Où crée un compte</font> 
            <fieldset id="section1">
                <legend> information personelles </legend>
                <label for="prenom"></label>
                <input type="text" id="Email" name="prenom" autocomplete="on" placevlder="Prenom" required="required">
                <br>

                <label for="Nom"> </label>
                <input type="text" id="Email" name="Nom" autocomplete="on" placeholder="Nom" required="required">
                <br>

                <label for="numero"></label>
                <input type="text" id="Email" name="numero" autocomplete="on" placeholder="Numero de telephone:" required="required">
                <br>

                <label for="Email"></label>
                <input type="email" id="Email" name="adresse" autocomplete="on" placeholder="Email:" required="required">
                <br>

                <label for="passe"></label>
                <input type="password" id="passe" name="passe" placeholder= "Mot de passe:" required="required">
                <br>

                <label for="passe"></label>
                <input type="password" id="passe" name="passe" placeholder="Confirmez:" required="required">
                <br>

                <a href="C:\Users\Orange\Desktop\acceuille et l bordel\acceuille.html">  Retour a la page    </p> </a>
                <input id="boutton" type="submit" value="Créer un compte" <br>
            </fieldset>




    



    </form>
  </div>
    
            </fieldset>
  
     
  
  
  
  
  
 </div>
 </section>
 
 
 <footer>
  <div class="fond2 ">
  <center><p id="label" > © 2016 The Space Burger </p></center>
  
 
              <ul id="nav">
   
                    <li>
                        <a href="connaître.html"> <p>Nous connaître </p> </a>
                    </li>
                    <!--
   -->
                    <li>
                        <a href="connaître.html"> <p>Nous contacter</p> </a>
                    </li>
                    <!--
  -->
                    <li>
                        <a href="Recrutement.html"> <p>Recrutement  </p> </a>
                    </li>
                    <!--
   -->
                    <li>
                        <a href="conditions.html"> <p>Conditions générales livraison</p>  </a>
                    </li>
                    <!--
   -->
                    <li class="border">
                        <a href="Avis.html"> <p>Votre Avis Nous Importe</p> </a>
                    </li>


                </ul>
     </div>
     
       <a href="[http://facebook.com]" id="fb"> </a>
            <a href="[http://instagram.com]" id="insta"></a>
            <a href="[http://youtube.com]" id="tube"></a>
            <a href="[http://flickr.com]" id="ft"></a>
            <a href="[http://tweeter.com]" id="tw"></a>
            <a href="[https://linkedin.com/]" id="in"></a>

 </footer>
</body>
</html>



et voila le css 

 body {
    background-image: url("images/Pizza1.jpg");
    background-repeat: no-repeat;
    background-position: 100%;
    
    
}

.menu {
    width: 100%;
    margin-top: -10px;
}

.menu  ul {
    margin: -15px;
    list-style-type: none;
    background-color: #9E1212;
    font-size: 80%; 
 background-color: #9E1212;
 text-align: left;
 height: 50px;
    box-shadow: 0px 1px  #9E1212; 
    background-position: left;
    
   
    }
    

 


.menu  li {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width: 185px;
    height: 36px;
 background-color: #605C5C;
 text-align: center;
 height: 60px;
 box-shadow: 0px 0px 0px #fbfbfc;
   background-position: left;
    }

.menu  li a {
        display: block;
        text-decoration: none;
        height: 35px;
  margin:0;
  padding: 0px 0px;
  line-height: 0px;
  border-left: 0px solid #888;
  border-right: 0px solid #888;
        text-decoration: none;
  color: white;
  text-shadow: -1px -1px 0px #111111;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 2em;
         }

.menu  li:hover {
    background-color: black;
}


.c1 {
    background-color: black;
    overflow: auto;
    background-image: url("fond.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: right top;

}
/*******connection / inscription !*******/
.login ul {
    float: right;
    overflow: hidden;
    padding: 0px 10px 0px  ;
    margin-top: -150px;
    height: 40px;
       

   
    
    
    
}
.login li{
      list-style: none;
      float: right;
      padding: 10px;
      border-right: 1px solid #FFFFFF;


     
  
      
    
}
.login li a{
    display: inline-block;
    text-decoration: none;
    color: white;
    
    

    
}

 
.login a:hover{
   color:#433453;
} 









/*******menu*******/
#nav 
{
   margin:-20px;
   padding: 0px;
   text-align: center;
   
}

 
 
 
#nav li 
{
   display: inline-block;
   padding:1px;
   margin:5px;
   height: 100px;

 
}




#nav li a{
    color: #111111;
       display: block;
    padding: 0px 10px 0px 0px;
    line-height: 12px;
    border-right: 2px solid #111111;
    text-decoration: none;
 
    
     
}
    #nav a:hover{
   color:#fff;
}


/* inscruption */

body {
    background-image: url("images/Pizza1.jpg");
    background-repeat: no-repeat;
    background-position: 100%;
    
    
}

/*******menu*******/
.menu {
    width: 100%;
        margin-top: -10px;
        

}

.menu  ul {
    margin: -15px;
    list-style-type: none;
    background-color: #9E1212;
    font-size: 80%; 
 background-color: #9E1212;
 text-align: left;
 height: 50px;
    box-shadow: 0px 1px  #9E1212; 
    background-position: left;
    
   
    }
    

  #petits{
    
    width: 105px;

    
 }


.menu  li {
    display: inline-block;
    width: 155px;
    height: 20px;
 background-color: #9E1212;
 text-align: center;
 height: 50px;
 box-shadow: 0px 0px 0px #fbfbfc;
   background-position: left;
   border: 19px;
   
   
    }

.menu  li a {
        display: block;
        text-decoration: none;
        height: 19px;
  margin:0;
  padding: 0px 0px;
  line-height: 0px;
  border-left: 0px solid #888;
  border-right: 0px solid #888;
        text-decoration: none;
  color: white;
  text-shadow: -1px -1px 0px #111111;
  font-family: Century Gothic, sans-serif;
  font-size: 2em;
        
         }

.menu  li:hover {
    background-color: black;
    
}


#decalage{
    margin-left: 65px;
    
}


/*******connection / inscription !*******/
.login ul {
    float: right;
    overflow: hidden;
    padding: 0px 0px 0px  ;
    height: 0px;
    
       

  
    
    
    
}
.login li{
      list-style: none;
      float: right;
      padding: 10px;
      margin-top: -60px;
      
    
      

    
}
.login li a{
    display: block;
     line-height: 12px;
     border-right: 2px solid #111111;
    text-decoration: none;
    color: white;
    
    
    

    
}

 
.login a:hover{
   color:#111111;
} 








/*** fond***/





.fond{
    background-color: white;
      opacity: 0.85;
    width:  600px;
    height: auto;
    padding: 20px;
    border: 2px solid #111111;
    margin-top: 60px;
    margin-left: 60px;
    margin-right: 1160px;
  
}




#sec1 {
    width: auto;
    height: auto;
    box-shadow: 0px 0px 5px #333333;
    border-radius: 10px;
    
}


/***spit***/
#fb,
#insta,
#tube,
#tw {
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    
    
    
}

#fb {
    background-image: url("images/D.png");
    background-position: 0px, 0px;
    left: 570px;
   
}

#tw {
    background-image: url("images/d.png");
    background-position: -40px 0px;
    left: 610px;
   
}

#insta {
    background-image: url("images/d.png");
    background-position: -160px 0px;
    left: 650px;
        
}

#tube {
    background-image: url("images/d.png");
    background-position: -120px 0px;
    left: 690px;
    margin-bottom: -372px;
}



/***TAABOOOO***/



td{
    text-align: left;
    
}
 


table {
     border-bottom: solid 0.5px #b5b5b5; 
}
h2{
    margin-left: 17px;
    border-bottom: solid 1px #b5b5b5;

}
#pan{
    float: right;
}
    


/*******connection / inscription !*******/
.login ul {
    float: right;
    overflow: hidden;
    padding: 0px 10px 0px  ;
    height: 46px;
    width: auto;
    margin-top: -30px;
    background-color: black;

    
}
.login li{
      list-style: none;
      float: right;
      padding: 5px;
      margin-top: -10px;
      width: auto;
       font-family: Century Gothic, sans-serif;
       font-size: 20px;
       text-align: center;
      
      
    
      

    
}
.login li a{
    display: block;
     line-height: 12px;
     border-right: 0px solid #111111;
    text-decoration: none;
    color: white;
    
    
    

    
}

 
.login a:hover{
   color:#ff3333;
} 
/***** footer ***/

footer{
    background-color: black;
    height: 100px;
    margin-left: -10px;
    margin-right: -10px;
    
}


#nav 
{
    
   margin:-20px;
   padding: 0px;
   text-align: center;
   
}


 
#nav li 
{
   display: inline-block;
   padding:1px;
   margin:5px;
   height: 100px;

 
}



#nav li a{
    color: #9fffff;
       display: block;
    padding: 0px 10px 0px 0px;
    line-height: 12px;
    border-right: 2px solid #111111;
    text-decoration: none;
    font-family: Century Gothic, sans-serif;
 
    
     
}
#label{
        font-family: Century Gothic, sans-serif;
        color: #9fffff;

    
}

    #nav a:hover{
   color:#ff2b2b;
}

li:nth-last-child(1) {
  border-right: none
}




/* sprite */
#fb,
#insta,
#tube,
#tw {
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    
    
    
}

#fb {
    background-image: url("D.png");
    background-position: 0px, 0px;
    left: 570px;
    bottom: -890px;
}

#tw {
    background-image: url("d.png");
    background-position: -40px 0px;
    left: 610px;
    bottom: -892px;
}

#insta {
    background-image: url("d.png");
    background-position: -160px 0px;
    left: 650px;
    bottom: -892px;
}

#tube {
    background-image: url("d.png");
    background-position: -120px 0px;
    left: 690px;
    bottom: -892px;
}


/*** formulaire incroption ***/
.insc  {
    background-color: #000000;
    width: 530px;
    height: auto;
    padding: 10px;
   border-radius: 10px;
   
   
}


#section2 ,
#section1 {
    width: 500px;
   
     }

#section1{
    margin-top:0px;
}

#section2:hover,
#section1:hover {
   
   
    border-radius: 10px;
   
}

legend {
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
    font-family: Century Gothic, sans-serif;
}

#section2 input,
#section1  input{
    width: 250px;
    height: 30px;
    border-radius: 10px;
    display: block;
    position: absolute;
    left: 300px;
    
}

#section2 label,
#section1 label{
    display: inline-block;
    width:auto;
    padding: 10px 310px 45px 10px;
    margin-right: 10px;
}

input[type="submit"] {
    
    padding: 20px 34px 34px ;
    font-size: medium;
    color: #ffffff;
    border-radius: 10px;
    background-color: #000000;
    font-family: Century Gothic, sans-serif;
     display: block;
    position: absolute;
    left: 560px;
    
    
    
}

input[type="submit"]:hover {
    background-color: #fe6921;
    margin-top: 1px;
    
}

font{
    
    margin-bottom: 10px;
}

#retour{
    
     display: block;
    position: absolute;
    left: 160px;
    top: 200px;
}


et voila une image exsample
A voir également:

1 réponse

Réponse 1 / 1
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 875
22 avril 2016 à 23:25
Salut,
Bon courage à celui qui va s'infuser 800 lignes sans savoir quel problème chercher...
1
rankere
23 avril 2016 à 19:10
lol oui j'ai commencé mais la flemme quand je vois qu'il y a du positionnement en float+marges...

Le plus simple est d'isoler(et simplifier) le code pour travailler sur la partie qui bug et trouver la correction.

Trop de décalages tue le positionnement ;)
Comme ça peut être: 

  li {
float:right;
    width: 11%;
    height: 2.44em;
 background-color: #605C5C;
 text-align: center;
 box-shadow: 0px 0px 0px #fbfbfc;
<!--  /* background-position: left; //a rajouter quand il y aura une image de background*/-->
    }
0

Discussions similaires

Comment regarder un film complet sans inscriptions et gratuit ?
Black -
Misterenart -

2 réponses
Localiser un portable gratuitement sans autorisation
zazamfg -
georges97 -

8 réponses
probleme d'inscription du combine
jp631 -
baladur13 -

7 réponses