Inscription
Hakiimm
Messages postés
13
Date d'inscription
Statut
Membre
Dernière intervention
-
rankere -
rankere -
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 ,,
et voila le css
et voila une image exsample
<!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:
- Inscription
- Wetransfer gratuit sans inscription - Guide
- Twitter inscription - Guide
- Vinted inscription - Guide
- Tchat gratuit sans inscription - Accueil - Réseaux sociaux
- Paypal inscription - Guide
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*/--> }