How to format my form with CSS?


Tags: css,forms

Problem :

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?



Solution :

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


    CSS Howto..

    How to clip canvas with CSS clip-path?

    How to change URL inside CSS?

    How to apply css for anchor tag inside table

    how do you add footer? like all right's reserved for a CSS design?

    How to make jQuery UI nav menu horizontal?

    How can I vertically and horizontally center a DIV?

    Show just cursor (caret) but hide the letters in input

    How to make links look like tabs using html/css?

    How to put image on the top of the div?

    Quick beginner CSS, how to “scope” styles?

    How to move the icon / button outside the textbox x-webkit-speech?

    how to move button to left

    WebGL: How to make an interactive div (like text input) be drawn on some web gl 3d object and still be interactive?

    How to get H1 content the same height in Firefox and in IE8?

    How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?

    How to clone the inner html of a list in query and wrap it

    how to change the opacity of the text along with the colorscale of the image in css?

    How to place something in a triangle-shaped box?

    How to make content next to a fixed-position menu not overlap in smaller resolutions

    Animate css depending on mouse movement [how can I improve]

    How to transform:scale the top and bottom part of a div using CSS

    Dropdown not showing elements Bootstrap 3

    How can I center vertically a div with position absolute and hight = 100px on another div with position relative but with not standard height

    How to make a HTML5 font lighter when fontWeight doesn't work? [closed]

    How to make width of navigation auto, while absolutely positioning its wrapper

    Jquery/CSS - how to clear a CSS-background set in another file I can't edit

    How to get CSS pseudo-elements to look the same cross browser?

    How to color a responsive table in Bootstrap?

    How to use a jQuery variable in CSS property

    How to reanimate div with jquery after using css keyframe animation