Sujets similaires

J'ai vu qu'Orange avait fait un code directement exploitable pour mettre un formulaire d'accueil dans l'index body, seulement j'avais déjà commencée à l'aide d'un tuto d'en faire un (qui ne fonctionne pas mon formulaire pas le tuto).

Je voudrais seulement comprendre pourquoi la mise en page ne se fait pas. Au départ j'avais prévu de faire une page HTML en première page (vu que le forum le propose).
J'ai regarder si j'avais bien fermer les balises, les {}, les [] et les <> en premier lieu mais ça m'a l'air d'être bon.

L'adresse du forum ici

le but étant d'avoir un formulaire de connexion avec un formulaire de récupération de mot de passe avec un affichage "glissant" qui passe de l'un à l'autre.

Ce que je souhaiterais avoir : ça et ça

Ce que j'ai actuellement : ça

Voici le code :

Code:: <!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Formulaire de connexion : HTML5, CSS3 et jQuery</title>
<link href="style.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('.forgetpwd').click(function(){
   $('#formlogin').fadeOut(300, function() {
      $('#getpwd').fadeIn(300);
   });
});

$('.connect').click(function(){
   $('#getpwd').fadeOut(300, function() {
      $('#formlogin').fadeIn(300);
   });
});
});
</script>
</head>

<body>

<div class="loginbox">
<form id="formlogin" action="#">
<h4>Administration : connectez-vous</h4>
<input type="text" placeholder="Nom d'utilisateur" class="username" />
<input type="password" placeholder="Mot de passe" class="password" />
<ul>
<li><input type="checkbox" id="rememberme" /> <label for="rememberme">Se rappelez de moi</label></li>
<li><a href="#" class="forgetpwd">Mot de passe oublié ?</a></li>
</ul>
<input type="submit" value="Se connecter" />
</form>

<form id="getpwd" action="#">
<h4>Récupération de mon mot de passe</h4>
<input type="text" placeholder="Nom d'utilisateur" class="username" />
<input type="submit" value="Réinitialiser" />
<ul>
<li><a href="#" class="connect">Se connecter ?</a></li>
</ul>
</form>
</div>

*{
margin:0;
paddin:0;
}

body {
background: <url><img src="http://img15.hostingpics.net/pics/865252background.jpg" /></url> no-repeat center
center fixed;
background-size: cover;
color:#707070;
font-family:Arial, Helvetia, sans-serif;
font-size:0.75em:
}

.loginbox {
width:300px;
margin:200px auto;
border-radius:3px
background:#fff;
box-shadow:
      0 1px 1px rgba(0, 0, 0, .2),
      0 3px 0 #fff,
      0 4px 0 rgba(0, 0, 0, .2),
      0 6px 0 #fff,
      0 7px 0 rgba(0, 0, 0, .2),
   0 0 7px rgba(0,0,0, .3);
padding:20px;
overflow:hidden;
}

longinbox h4 {
font-size:1.25em;
border-bottom:1px dashed rgba(0,0,0,0.2);
margin-bottom:10px;
font-weight
   }

input[type=text], input[type=password] {
   padding:10px 10px 10px 35px;
   margin-bottom:10px;
   width:100%;
   border:1px solid #ddd;
   border-radius:3px;
   background-color:#fafafa;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   color:#aaa;
   }

input[type=text] {
   background:<url><img src="http://img15.hostingpics.net/pics/279911membre.png" /></url> #fafafa 10px center no-repeat;
   }

input[type=password] {
   background:<url><img src="http://img15.hostingpics.net/pics/215285Cadenas.png"/></url> #fafafa 10px center no-repeat;
}

input[type=text]:focus,
input[type=password]:focus {
   outline:0;
   border:1px solid #81c2f4;
   box-shadow:0 0 5px
rgba(0,0,0,0.2);
}
input[type=submit]{
   background: #81c2f4;
   background: -moz-linear-gradient(top, #81c2f4 0%, #69 ace0 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#81c2f4), color-stop(100%,#69ace0));
   background: -webkit-linear-gradient(top, #81c2f4 0%,#69ace0 100%);
   background: -o-linear-gradient(top, #81c2f4 0%,#69ace0 100%);
   background: linear-gradient(top, #81c2f4 0%,#69ace0 100%);
   color:#fff;
   border:1px solid #4e92c7;
   border-radius:3px;
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
   pading:10px;
   float:right:
   width:100px;
   cursor:pointer;
}
input[type="submit"]:hover {
      color:#407aa6;
      text-shadow:0 1px 0 rgba(255,255,255,0.5);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 0 3px rgba(0,0,0,0.4);
   }

   input[type=submit]:active {
      background: -moz-linear-gradient(top, # 0%, #81c2f4 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#69ace0), color-stop(100%,#81c2f4));
      background: -webkit-linear-gradient(top, #69ace0 0%,#81c2f4 100%);
      background: -o-linear-gradient(top, #69ace0 0%,#81c2f4 100%);
      background: -ms-linear-gradient(top, #69ace0 0%,#81c2f4 100%);
      background: linear-gradient(top, #69ace0 0%,#81c2f4 100%);
      box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3);
   }

      .loginbox ul {
      list-style:none;
      float:left;
      font-size:0.9em;
      line-height:1.75em;
   }

   .loginbox a {
      color:#81c2f4;
      text-decoration:none;
   }
<form id="getpwd" action="#">
<h4>Récupération de mon mot de passe</h4>
<input type="text" placeholder="Nom d'utilisateur" class="username" />
<input type="submit" value="Réinitialiser" />
<ul>
<li><a href="#" class="connect">Se connecter ?</a></li>
</ul>
</form>

#getpwd input[type=text] {
float:left;
width:65%;
padding-right:10px;
}
#getpwd input[text=submit] {
   padding:10px;
}
#getpwd ul {
float:right;
margin-top:10px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

#getpwd {
      display:none;
   }
$(document).ready(function($) {
});
$('.forgetpwd').click(function(){
   $('#formlogin').fadeOut(300,function() {
      $('#getpwd').fadeln(300);
   });
});
$('connect').click(function(){
$('#getpwd').fadeOut(300, function() {
   $('formlogin').fadeln(300);
   });
});

@keyframes fromtop {
   0% { margin: -200px auto;}
   50% { margin: 220px auto;}
   75% { margin: 180px auto;}
   100% { margin: 200px auto;}
}

.longinbox {
   animation:fromtop 1s;
}

<a href="http://www.forumactif.com" target="_blank">forumactif.com</a>

</body>
</html>

Merci d'avance.

A première vue, il y a un gros soucis avec ton CSS... Il est en plein milieu de ton HTML.

Est-ce-que tu es sûre de bien comprendre la différence entre le CSS et le HTML avant toute chose ?

J'espère ^^

Pour moi le HTML est la "structure" du document et le CSS ce qui permet de 'l'embellir'

Donc voilà la partie HTML (enfin j'espère) qui explique ce que l'on veut :

Code:: <!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Formulaire de connexion : HTML5, CSS3 et jQuery</title>
<link href="style.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('.forgetpwd').click(function(){
$('#formlogin').fadeOut(300, function() {
$('#getpwd').fadeIn(300);
});
});

$('.connect').click(function(){
$('#getpwd').fadeOut(300, function() {
$('#formlogin').fadeIn(300);
});
});
});
</script>
</head>

<body>

<div class="loginbox">
<form id="formlogin" action="#">
<h4>Administration : connectez-vous</h4>
<input type="text" placeholder="Nom d'utilisateur" class="username" />
<input type="password" placeholder="Mot de passe" class="password" />
<ul>
<li><input type="checkbox" id="rememberme" /> <label for="rememberme">Se rappelez de moi</label></li>
<li><a href="#" class="forgetpwd">Mot de passe oublié ?</a></li>
</ul>
<input type="submit" value="Se connecter" />
</form>

<form id="getpwd" action="#">
<h4>Récupération de mon mot de passe</h4>
<input type="text" placeholder="Nom d'utilisateur" class="username" />
<input type="submit" value="Réinitialiser" />
<ul>
<li><a href="#" class="connect">Se connecter ?</a></li>
</ul>
</form>
</div>
<a href="http://www.forumactif.com" target="_blank">forumactif.com</a>

</body>
</html>

et le CSS qui donnera tout son rendu à la chose :

Code:: *{
margin:0;
paddin:0;
}

body {
background: [url="http://img15.hostingpics.net/pics/865252background.jpg"][/url] no-repeat center
center fixed;
background-size: cover;
color:#707070;
font-family:Arial, Helvetia, sans-serif;
font-size:0.75em:
}

.loginbox {
width:300px;
margin:200px auto;
border-radius:3px
background:#fff;
box-shadow:
0 1px 1px rgba(0, 0, 0, .2),
0 3px 0 #fff,
0 4px 0 rgba(0, 0, 0, .2),
0 6px 0 #fff,
0 7px 0 rgba(0, 0, 0, .2),
0 0 7px rgba(0,0,0, .3);
padding:20px;
overflow:hidden;
}

longinbox h4 {
font-size:1.25em;
border-bottom:1px dashed rgba(0,0,0,0.2);
margin-bottom:10px;
font-weight
}

input[type=text], input[type=password] {
padding:10px 10px 10px 35px;
margin-bottom:10px;
width:100%;
border:1px solid #ddd;
border-radius:3px;
background-color:#fafafa;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color:#aaa;
}

input[type=text] {
background:[url="http://img15.hostingpics.net/pics/279911membre.png"][/url] #fafafa 10px center no-repeat;
}

input[type=password] {
background:[url="http://img15.hostingpics.net/pics/215285Cadenas.png"][/url] #fafafa 10px center no-repeat;
}

input[type=text]:focus,
input[type=password]:focus {
outline:0;
border:1px solid #81c2f4;
box-shadow:0 0 5px
rgba(0,0,0,0.2);
}
input[type=submit]{
background: #81c2f4;
background: -moz-linear-gradient(top, #81c2f4 0%, #69 ace0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#81c2f4), color-stop(100%,#69ace0));
background: -webkit-linear-gradient(top, #81c2f4 0%,#69ace0 100%);
background: -o-linear-gradient(top, #81c2f4 0%,#69ace0 100%);
background: linear-gradient(top, #81c2f4 0%,#69ace0 100%);
color:#fff;
border:1px solid #4e92c7;
border-radius:3px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
pading:10px;
float:right:
width:100px;
cursor:pointer;
}
input[type="submit"]:hover {
color:#407aa6;
text-shadow:0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 0 3px rgba(0,0,0,0.4);
}

input[type=submit]:active {
background: -moz-linear-gradient(top, # 0%, #81c2f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#69ace0), color-stop(100%,#81c2f4));
background: -webkit-linear-gradient(top, #69ace0 0%,#81c2f4 100%);
background: -o-linear-gradient(top, #69ace0 0%,#81c2f4 100%);
background: -ms-linear-gradient(top, #69ace0 0%,#81c2f4 100%);
background: linear-gradient(top, #69ace0 0%,#81c2f4 100%);
box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3);
}

.loginbox ul {
list-style:none;
float:left;
font-size:0.9em;
line-height:1.75em;
}

.loginbox a {
color:#81c2f4;
text-decoration:none;
}
<form id="getpwd" action="#">
<h4>Récupération de mon mot de passe</h4>
<input type="text" placeholder="Nom d'utilisateur" class="username" />
<input type="submit" value="Réinitialiser" />
<ul>
<li><a href="#" class="connect">Se connecter ?</a></li>
</ul>
</form>

#getpwd input[type=text] {
float:left;
width:65%;
padding-right:10px;
}
#getpwd input[text=submit] {
padding:10px;
}
#getpwd ul {
float:right;
margin-top:10px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

#getpwd {
display:none;
}
$(document).ready(function($) {
});
$('.forgetpwd').click(function(){
$('#formlogin').fadeOut(300,function() {
$('#getpwd').fadeln(300);
});
});
$('connect').click(function(){
$('#getpwd').fadeOut(300, function() {
$('formlogin').fadeln(300);
});
});

@keyframes fromtop {
0% { margin: -200px auto;}
50% { margin: 220px auto;}
75% { margin: 180px auto;}
100% { margin: 200px auto;}
}

.longinbox {
animation:fromtop 1s;
}

A mon avis, il va y avoir un problème au niveau des URL, j'ai pas du mettre les balises comme il faut.

C'est déjà mieux =)
Mais fait attention, il y a encore du HTML dans ton CSS du coup (le formulaire là qui traine en plein milieu Euh..

).

Je passe rapidement là je n'ai pas trop le temps de m'attarder (je reviens plus tard si personne n'est passé avant) mais déjà, effectivement, il n'y a pas de "balises" dans le CSS (en plus, c'est du BBCode que tu essaye d'écrire).

Il faut donc remplacer tes balises par :

Code:: url("http://mon-image.png");

Le rendu devrait donc déjà être meilleur après ça.

Voyons voir si j'ai compris :

Le code HTML :

Code:: <!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Formulaire de connexion : HTML5, CSS3 et jQuery</title>
<link href="style.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('.forgetpwd').click(function(){
$('#formlogin').fadeOut(300, function() {
$('#getpwd').fadeIn(300);
});
});

$('.connect').click(function(){
$('#getpwd').fadeOut(300, function() {
$('#formlogin').fadeIn(300);
});
});
});
</script>
</head>

<body>

<div class="loginbox">
<form id="formlogin" action="#">
<h4>Administration : connectez-vous</h4>
<input type="text" placeholder="Nom d'utilisateur" class="username" />
<input type="password" placeholder="Mot de passe" class="password" />
<ul>
<li><input type="checkbox" id="rememberme" /> <label for="rememberme">Se rappelez de moi</label></li>
<li><a href="#" class="forgetpwd">Mot de passe oublié ?</a></li>
</ul>
<input type="submit" value="Se connecter" />
</form>

<form id="getpwd" action="#">
   <h4>Récupération de mon mot de passe</h4>
   <input type="text" placeholder="Nom d'utilisateur" class="username" />
      <input type="submit" value="Réinitialiser" />
      <ul>
         <li><a href="#" class="connect">Se connecter ?</a></li>
      </ul>
</form>

</div>

<a href="http://www.forumactif.com" target="_blank">forumactif.com</a>

</body>
</html>

et le CSS, j'ai remplacer les url, ça devrait être bon.

Code:: *{
margin:0;
paddin:0;
}

body {
background: url('http://img15.hostingpics.net/pics/865252background.jpg') no-repeat center
center fixed;
background-size: cover;
color:#707070;
font-family:Arial, Helvetia, sans-serif;
font-size:0.75em:
}

.loginbox {
width:300px;
margin:200px auto;
border-radius:3px
background:#fff;
box-shadow:
0 1px 1px rgba(0, 0, 0, .2),
0 3px 0 #fff,
0 4px 0 rgba(0, 0, 0, .2),
0 6px 0 #fff,
0 7px 0 rgba(0, 0, 0, .2),
0 0 7px rgba(0,0,0, .3);
padding:20px;
overflow:hidden;
}

longinbox h4 {
font-size:1.25em;
border-bottom:1px dashed rgba(0,0,0,0.2);
margin-bottom:10px;
font-weight
}

input[type=text], input[type=password] {
padding:10px 10px 10px 35px;
margin-bottom:10px;
width:100%;
border:1px solid #ddd;
border-radius:3px;
background-color:#fafafa;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color:#aaa;
}

input[type=text] {
background:url('http://img15.hostingpics.net/pics/279911membre.png') #fafafa 10px center no-repeat;
}

input[type=password] {
background:url('http://img15.hostingpics.net/pics/215285Cadenas.png') #fafafa 10px center no-repeat;
}

input[type=text]:focus,
input[type=password]:focus {
outline:0;
border:1px solid #81c2f4;
box-shadow:0 0 5px
rgba(0,0,0,0.2);
}
input[type=submit]{
background: #81c2f4;
background: -moz-linear-gradient(top, #81c2f4 0%, #69 ace0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#81c2f4), color-stop(100%,#69ace0));
background: -webkit-linear-gradient(top, #81c2f4 0%,#69ace0 100%);
background: -o-linear-gradient(top, #81c2f4 0%,#69ace0 100%);
background: linear-gradient(top, #81c2f4 0%,#69ace0 100%);
color:#fff;
border:1px solid #4e92c7;
border-radius:3px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
pading:10px;
float:right:
width:100px;
cursor:pointer;
}
input[type="submit"]:hover {
color:#407aa6;
text-shadow:0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 0 3px rgba(0,0,0,0.4);
}

input[type=submit]:active {
background: -moz-linear-gradient(top, # 0%, #81c2f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#69ace0), color-stop(100%,#81c2f4));
background: -webkit-linear-gradient(top, #69ace0 0%,#81c2f4 100%);
background: -o-linear-gradient(top, #69ace0 0%,#81c2f4 100%);
background: -ms-linear-gradient(top, #69ace0 0%,#81c2f4 100%);
background: linear-gradient(top, #69ace0 0%,#81c2f4 100%);
box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3);
}

.loginbox ul {
list-style:none;
float:left;
font-size:0.9em;
line-height:1.75em;
}

.loginbox a {
color:#81c2f4;
text-decoration:none;
}

#getpwd input[type=text] {
float:left;
width:65%;
padding-right:10px;
}
#getpwd input[text=submit] {
padding:10px;
}
#getpwd ul {
float:right;
margin-top:10px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

#getpwd {
display:none;
}
$(document).ready(function($) {
});
$('.forgetpwd').click(function(){
$('#formlogin').fadeOut(300,function() {
$('#getpwd').fadeln(300);
});
});
$('connect').click(function(){
$('#getpwd').fadeOut(300, function() {
$('formlogin').fadeln(300);
});
});

@keyframes fromtop {
0% { margin: -200px auto;}
50% { margin: 220px auto;}
75% { margin: 180px auto;}
100% { margin: 200px auto;}
}

.longinbox {
animation:fromtop 1s;
}

J'ai mis en place donc la première pas avec le HTML qui devient de ce fait la page d'accueil, mais du coup, le code CSS je le met dans l'index_body ?

Heuuu, il y a du javascript dans le CSS O.o

Ben oui pourquoi faut pas ? c'est pas ce qui permet de faire l'effet de "slide" entre les deux formulaires ?

Edit :

Haldira a écrit:: J'ai mis en place donc la première pas avec le HTML qui devient de ce fait la page d'accueil, mais du coup, le code CSS je le met dans l'index_body ?

J'ai eue un moment de faiblesse Mise en page formulaire 3517359236

j'ai rien dit.

Le Javascript, c'est encore un autre langage.
Il est inclus dans le HTML en l'entourant avec les bonnes balises ou, plus conseillé, isolé ailleurs et appelé dans le code HTML (qui fait donc appel aux ressources CSS/Javascript nécessaires, comme une pieuvre en fait).

Donc pas de Javascript, ni de HTML, dans ton fichier .css
De même, seulement du javascript dans ton fichier .js
Le tout, appelé dans ton fichier .html final.

Ca te semble clair ?

Ok je pense avoir compris, donc il faut que j'enlève la partie script dans mon css et que je fasse un fichier spécial pour la phrase java, du coup, l'ensemble de départ se divise maintenant en trois c'est ça ?

Celui-là reste tout seul

Code:: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Ce code là, précisément, charge le fichier Javascript (et non Java attention !) indiqué (http://code.jquery.com/jquery-latest.js) dans la page HTML. C'est bel et bien du HTML, sous la forme d'une balise, que tu as là. Elle se place donc comme elle est, dans le HTML.

Ce code-ci est le Javascript qui n'a rien à faire dans ton CSS :

Code:: $(document).ready(function($) {
});
$('.forgetpwd').click(function(){
$('#formlogin').fadeOut(300,function() {
$('#getpwd').fadeln(300);
});
});
$('connect').click(function(){
$('#getpwd').fadeOut(300, function() {
$('formlogin').fadeln(300);
});
});

Voyons si tu as tout compris, est-ce-que tu peux me donner tes codes HTML et CSS distincts (et Javascript si tu décide de ne pas l'inclure dans ton HTML) ?

Alors le code CSS :

Code:: *{
margin:0;
paddin:0;
}

body {
background: url('http://img15.hostingpics.net/pics/865252background.jpg') no-repeat center
center fixed;
background-size: cover;
color:#707070;
font-family:Arial, Helvetia, sans-serif;
font-size:0.75em:
}

.loginbox {
width:300px;
margin:200px auto;
border-radius:3px
background:#fff;
box-shadow:
0 1px 1px rgba(0, 0, 0, .2),
0 3px 0 #fff,
0 4px 0 rgba(0, 0, 0, .2),
0 6px 0 #fff,
0 7px 0 rgba(0, 0, 0, .2),
0 0 7px rgba(0,0,0, .3);
padding:20px;
overflow:hidden;
}

longinbox h4 {
font-size:1.25em;
border-bottom:1px dashed rgba(0,0,0,0.2);
margin-bottom:10px;
font-weight
}

input[type=text], input[type=password] {
padding:10px 10px 10px 35px;
margin-bottom:10px;
width:100%;
border:1px solid #ddd;
border-radius:3px;
background-color:#fafafa;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color:#aaa;
}

input[type=text] {
background:url('http://img15.hostingpics.net/pics/279911membre.png') #fafafa 10px center no-repeat;
}

input[type=password] {
background:url('http://img15.hostingpics.net/pics/215285Cadenas.png') #fafafa 10px center no-repeat;
}

input[type=text]:focus,
input[type=password]:focus {
outline:0;
border:1px solid #81c2f4;
box-shadow:0 0 5px
rgba(0,0,0,0.2);
}
input[type=submit]{
background: #81c2f4;
background: -moz-linear-gradient(top, #81c2f4 0%, #69 ace0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#81c2f4), color-stop(100%,#69ace0));
background: -webkit-linear-gradient(top, #81c2f4 0%,#69ace0 100%);
background: -o-linear-gradient(top, #81c2f4 0%,#69ace0 100%);
background: linear-gradient(top, #81c2f4 0%,#69ace0 100%);
color:#fff;
border:1px solid #4e92c7;
border-radius:3px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
pading:10px;
float:right:
width:100px;
cursor:pointer;
}
input[type="submit"]:hover {
color:#407aa6;
text-shadow:0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 0 3px rgba(0,0,0,0.4);
}

input[type=submit]:active {
background: -moz-linear-gradient(top, # 0%, #81c2f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#69ace0), color-stop(100%,#81c2f4));
background: -webkit-linear-gradient(top, #69ace0 0%,#81c2f4 100%);
background: -o-linear-gradient(top, #69ace0 0%,#81c2f4 100%);
background: -ms-linear-gradient(top, #69ace0 0%,#81c2f4 100%);
background: linear-gradient(top, #69ace0 0%,#81c2f4 100%);
box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3);
}

.loginbox ul {
list-style:none;
float:left;
font-size:0.9em;
line-height:1.75em;
}

.loginbox a {
color:#81c2f4;
text-decoration:none;
}

#getpwd input[type=text] {
float:left;
width:65%;
padding-right:10px;
}
#getpwd input[text=submit] {
padding:10px;
}
#getpwd ul {
float:right;
margin-top:10px;
}

@keyframes fromtop {
0% { margin: -200px auto;}
50% { margin: 220px auto;}
75% { margin: 180px auto;}
100% { margin: 200px auto;}
}

.longinbox {
animation:fromtop 1s;
}

Le HTML avec le javascript dedans :

Code:: <!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Formulaire de connexion</title>
<link href="style.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('.forgetpwd').click(function(){
$('#formlogin').fadeOut(300, function() {
$('#getpwd').fadeIn(300);
});
});

$('.connect').click(function(){
$('#getpwd').fadeOut(300, function() {
$('#formlogin').fadeIn(300);
});
});
});
</script>
</head>

<body>

<div class="loginbox">
<form id="formlogin" action="#">
<h4>Administration : connectez-vous</h4>
<input type="text" placeholder="Nom d'utilisateur" class="username" />
<input type="password" placeholder="Mot de passe" class="password" />
<ul>
<li><input type="checkbox" id="rememberme" /> <label for="rememberme">Se rappelez de moi</label></li>
<li><a href="#" class="forgetpwd">Mot de passe oublié ?</a></li>
</ul>
<input type="submit" value="Se connecter" />
</form>

<form id="getpwd" action="#">
<h4>Récupération de mon mot de passe</h4>
<input type="text" placeholder="Nom d'utilisateur" class="username" />
<input type="submit" value="Réinitialiser" />
<ul>
<li><a href="#" class="connect">Se connecter ?</a></li>
</ul>
</form>

</div>

<a href="http://www.forumactif.com" target="_blank">forumactif.com</a>

</body>
</html>

Yep c'est cela =)

Et du coup, cela donne quoi ? La mise en page devrait être bonne à présent non ?

Je le met en place aujourd'hui ou demain et je te dis ça.

Merci Espeon

EDIT - 26.04.2012 - C'est super, ça marche, la mise en page est bonne. Par contre j'ai l'impression que l"animation de fonctionne pas.

Hmmmm et bien, et bien je vois déjà une coquille dans le css : .loginbox et non .longinbox

Ensuite, pour un soucis de compatibilité avec les différents navigateurs, il est recommandé d'utiliser les différents préfixes -moz- et -webkit- (notamment) avec @keyframes, sinon cela ne fonctionne effectivement pas partout.

C'est assez bien illustré ici : http://www.w3schools.com/cssref/css3_pr_keyframes.asp

Il faut savoir qu'à l'heure actuelle, l'animation en CSS 3 n'est pas encore bien compatible partout aussi Wink

Ciaossu,
Ton problème est-il toujours d'actualité ?
Si oui, il faudrait le préciser afin que les codeurs puissent voir ton problème et tenter de t'aider à le résoudre =D
Merci par avance Mise en page formulaire 1440637669

Bonjour Haldira,

Ton sujet restant sans réponse depuis plusieurs jours, je dois l'archiver. N'hésite pas à refaire une demande si jamais ton problème n'était pas résolu.

Bonne journée. Mise en page formulaire 510527

Mise en page formulaire

Mise en page formulaire

Sujets similaires

Sujets similaires

Partenaires Or