How to format my form with CSS?

Question

Here is the HTML for my left column:

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

And here is my 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;
}

I'm trying to have a small login form on that left navigation area and I'd like the label to be on top of their respective textbox.

Any help?

Answer 1

Use labels, this is what they are for

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

Then if you make the labels display:block they will line up on top of the inputs

Answer 2

I'm guessing you want the two inputs to be side by side with the label on top. If so, I would use the following HTML:

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

Then float the list items and add display: block to the labels.

#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

try ths::

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

with this 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

Check out this tutorial, really helpfull for dynamic CSS.
http://articles.sitepoint.com/article/fancy-form-design-css and some of the examples http://designshack.co.uk/articles/10-css-form-examples. They are cross browser too.