Comment formater mon formulaire avec CSS?

Question

Voici le code HTML pour ma colonne de gauche:

<div id="leftcolumn"> 
    <ul id="mainnavigation"> 
     <li><a href="#">Inicio</a></li> 
     <li><a href="#">Evaluaciones</a></li> 
     <li><a href="#">Docentes</a></li> 
     <li><a href="#">Soporte</a></li>     
    </ul> 
    <div id="loginarea">    
     Username:  
     <input type="text" name="Username" />   
     Password:   
     <input type="password" name="Password" /> 
     <input type="submit" value="Entrar" /> 
    </div> 
</div> 

Et voici mon CSS:

#leftcolumn 
{ 
    float:left; 
    position:relative; 
    top:20px; 
    left:20px; 
} 

#leftcolumn ul#mainnavigation 
{ 
    font-size:16px;  
} 

#leftcolumn ul#mainnavigation li 
{ 
    padding-top:8px; 

} 

#leftcolumn ul#mainnavigation li a 
{ 
    text-decoration:none; 
    color:White;  
} 

#leftcolumn ul#mainnavigation li a:hover 
{ 
    text-decoration:underline; 
    color:Lime;  
} 

#loginarea 
{ 
    margin-top:20px;  
} 

#loginarea input 
{ 
    float:left; 
} 

Je suis en train d'avoir un petit formulaire de connexion sur cette zone de navigation de gauche et je comme l'étiquette doit être au-dessus de leur zone de texte respective.

Une aide?

Answer 1

Utilisez des étiquettes, c'est ce qu'ils sont pour

<label for="username">Username:</label>  
    <input type="text" name="Username" id="username" />   
    <label for="password">Password:</label> 
    <input type="password" name="Password" id="password" /> 
    <input type="submit" value="Entrar" /> 

Ensuite, si vous faites afficher les étiquettes: bloc ils s'alignent au-dessus des entrées

Answer 2

Je devine que vous voulez les deux les entrées doivent être côte à côte avec l'étiquette sur le dessus. Si oui, j'utiliser le code HTML suivant:

<div id="form"> 
<ul> 
    <li> 
    <label for="username">Username:</label>  
    <input type="text" name="username" id="username" /> 
    </li><li> 
    <label for="password">Password:</label> 
    <input type="password" name="password" id="password" /> 
    </li> 
</ul> 

<input type="submit" value="Entrar" id="submit" /></div> 

flottent ensuite les éléments de la liste et ajoutez display: block aux étiquettes.

#form { 
    overflow: hidden; 
} 

#form li { 
    width: 180px; 
    float: left; 
    margin-right: 10px; 
} 

#form li label { 
    font-size: 11px; 
    font-weight: bold; 
    display: block; 
    margin-bottom: 2px; 
} 

#form #submit { 
    clear: both; 
} 

Answer 3

THs try ::

<div id="leftcolumn"> 
    <ul id="mainnavigation"> 
     <li><a href="#">Inicio</a></li> 
     <li><a href="#">Evaluaciones</a></li> 
     <li><a href="#">Docentes</a></li> 
     <li><a href="#">Soporte</a></li>     
    </ul> 
    <div id="loginarea">    
     <label for="Username">Username:</label>  
     <input type="text" name="Username" id="Username" />   
     <label for="Password">Password:</label>  
     <input type="password" name="Password" id="Password" /> 
     <input type="submit" value="Entrar" /> 
    </div> 
</div>​ 

avec ce CSS:

#leftcolumn 
{ 
    float:left; 
    position:relative; 
    top:20px; 
    left:20px; 
} 

#leftcolumn ul#mainnavigation 
{ 
    font-size:16px;  
} 

#leftcolumn ul#mainnavigation li 
{ 
    padding-top:8px; 

} 

#leftcolumn ul#mainnavigation li a 
{ 
    text-decoration:none; 
    color:White;  
} 

#leftcolumn ul#mainnavigation li a:hover 
{ 
    text-decoration:underline; 
    color:Lime;  
} 

#loginarea 
{ 
    margin-top:20px;  
} 

#loginarea input 
{ 
    display:block; 
} 

#loginarea label { 
    display:block; 
} 

Answer 4

Découvrez ce tutoriel, vraiment pour CSS UTILE dynamique.
http://articles.sitepoint.com/article/fancy-form-design-css et certains des exemples http://designshack.co.uk/articles/10-css-form-examples. Ils sont cross browser aussi.