Problème CSS et formulaire

Marsh Posté le 03-03-2005 à 21:00:32

Bonsoir à tous voilà mon code:

Code :

<ul>
<form method="post">
<li>Login:<input align="left" type="text" name="login" maxlength="16"></li>
<li>Password:<input align="left" type="password" name="pass" maxlength="16"></li>
</form>
</ul>

J'aimerais savoir comment faire pour que les deux zones de texte soit aligné verticalement car actuellmeent elles sont juste apres login et password
Et si il existe pas uen autre facon de mettre en page ces formulaire sans <table>
Merci bien

Reply

Marsh Posté le 03-03-2005 à 21:00:32

Reply

Marsh Posté le 03-03-2005 à 21:13:42

faut-il deux bloc un pour le texte et autre pour le form ?

Reply

Marsh Posté le 03-03-2005 à 21:15:48

Les CSS

Code :

#cadreform
{
text-align: left;
font-family: Verdana, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
margin-right: auto;
margin-left: auto;
padding: 8px;
width: 80%;
background-color: #f0f8ff;
border: solid 2px #6495ed;
}
html>body #cadre2
{
width: auto;
}
#cadreform fieldset
{ /*mise en forme des cadres */
margin: 0;
font-style: normal;
padding: 0 1em 1em;
}
#cadreform legend
{
font-size: 1.3em;
font-weight: bold;
color: #000000;
}
#cadreform p { /*** Mise en forme des lignes du formulaire ***/
padding: .2em 0;
margin: 0 0 .2em 0;
}
#cadreform fieldset#coordonnees label
{ /*** Mise en forme des intitulés de champs ***/
float: left; /*** Très important, ne pas suprimer ! ***/
width: 30%; /*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
text-align: right; /*** ... et ils sont alignés à droite... ***/
margin: 0;
padding: 0 .5em 0 0;
line-height: 1.8; /*** ... et centrés verticalement. ***/
}
#cadreform label:hover
{

Le HTML

Code :

<form name="Acces" id="Acces" method="post" action=" ">
<div id="cadreform">
<fieldset id="coordonnees">
<legend>Vos Identifiants</legend>
<br />
<p>
<label for="nom" title="Veuillez saisir votre Login">Login :</label>
<input type="text" name="Login" id="Login" size="50" title="Veuillez saisir votre Login" tabindex="1" />
</p
<p>
<label for="password" title="Veuillez saisir votre mot de passe">Password :</label>
<input type="password" name="password" id="password" size="5" title="Veuillez saisir votre Password" tabindex="2" />
</p>
<p class="centre">
<input type="submit" value="Entrez" id="submit1" name="Submit1"title="Cliquez sur ce bouton pour vous connecter" tabindex="3" />
</p>
<br />
</fieldset>
</div>
</form>

Message édité par Flyman30 le 03-03-2005 à 21:16:51

Reply

Marsh Posté le 03-03-2005 à 21:25:52

A k merci pour ce résumez rapide la mise en forme et du coding reste plus qu'a me renseigner sur les balises label,legend, fieldset
Merci

Reply

Marsh Posté le 03-03-2005 à 21:31:49

Salut analfabet, n'utilise pas align="left",
c'est CSS doit gérer la mise en page

voila un petit truc qui marche, avec ton code html,

Code :

ul {
list-style: none;
}
form {
border: solid gray 1px;
width: 260px;
background: #f2f2f2;
padding: 12px 10px 0px;
}
form li {
clear:both;
width: 100%;
height: 30px;
margin: Opx;
}
input {
border: solid gray 1px;
background: #f2f2f2;
float: right;
margin: -18px 5px -18px;
}

Reply

Marsh Posté le 04-03-2005 à 21:22:18

Il n'y aurais pas une methode plus facile je demande pas de customizer les textbox etc... ; juste decaler les textbox de facon qu'elle soit aligner entre elles mais le probleme j'ai essaye de faire un margin-left:220px mais elle se decale pas par rapport a la bordure de gauche de la div mais au texte qui se trouve sur la même ligne voilà le code:


</style><head/>
<body>
<div >
Veuillez remplir tous les champs<br/>
Login:<input type="text" name="login" maxlenght="16" size="16" style="margin-left:110"><br/>
Mot de passe:<input type="password" name="password" maxlenght="16" size="16" style="margin-left:110"><br/>
Re-saisir:<input type="password" name="repassword" maxlenght="16" size="16" style="margin-left:110"><br/>
E-mail:<input type="text" name="e-mail" style="margin-left:110"><br/>
<input type="submit" value="Envoyer" style="margin-left:110">
<div/>