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