How to format my form with CSS? - css

Question

Here is the HTML for my left column:
<div id="leftcolumn">
<ul id="mainnavigation">
<li>Inicio</li>
<li>Evaluaciones</li>
<li>Docentes</li>
<li>Soporte</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>Inicio</li>
<li>Evaluaciones</li>
<li>Docentes</li>
<li>Soporte</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.