Problème CSS et formulaire

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Problème CSS et formulaire

analfabete

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

Publicité

analfabete

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

Flyman30

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

analfabete

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

rompi

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;
}

analfabete

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/>

Flyman30

Je t'ai donné le code tout fait pour avoir un formulaire aux normes xhtml queveut tu de plus :sarcastic:

---------------
planuldep | Association pêche à la Sempé

FORUM HardWare.fr

Programmation

HTML/CSS

Problème CSS et formulaire

Sujets relatifs
Changer la couleur d'un lien dans un CSS ? possible ou pas ?	probleme require
Comment Charger une chaine (venant d'un formulaire) dans un tableau ?	nouveau probleme flex
problème d'execution d'un code JS sous IE	Problème compilation (toolkit Maximum Entropy)
probleme verification si checkbox est cochée	problème d'erreur de segmentation
Problème de chargement d'images sur Rollover avec IE	[Conseils]Mise en page contenant plein d'élément gif avec CSS ou HTML
Plus de sujets relatifs à : Problème CSS et formulaire

Page générée en 0.074 secondes