How to position label text with css


Tags: html,css

Problem :

So I'm making a simple login form and I want position these two label texts on top their respective inputs instead of having this big space gap. Fairly new sorry.

HTML

<form>
<fieldset>
    <label>Username
        <input type="username" class="button-user">
    </label>
    <label>Password
        <input type="password" class="button-pw">
    </label>
</fieldset>
<fieldset class="button-space">
    <input type="submit" class="button">
</fieldset>
</form>

CSS

fieldset {
width: 200px;
}
.button-space {
height: 50px;
background: #f0f0f2;
border-top: 1px;
}
.button {
margin-top: 13px;
}
.button-pw {
margin-top: 20px;
}
.button-user {
margin-top: 20px;
}

http://jsfiddle.net/ypNUU/



Solution :

That should solve it ;)

fieldset {
    width: 200px;
}
.button-space {
    height: 50px;
    background: #f0f0f2;
    border-top: 1px;
}
.button {
    margin-top: 13px;
}
.button-pw {
    display:block;
    margin-bottom:20px;
}
.button-user {
    display:block;
    margin-bottom:20px;
}

http://jsfiddle.net/ypNUU/5/

And if you don't want that gap space between the PW-textbox and then button, then set margin-bottom to 0px in .button-pw
http://jsfiddle.net/ypNUU/6/


    CSS Howto..

    How do you control CSS styles from within the CMS interface in Zotonic?

    How to accurately position divs with css

    How can I make the height of a div section to automatically adapt to the height of its content?

    Can someone help me figure out how to put normal links into this Jquery Menu?

    How to align 3 divs with CSS retaining relative position while scaling window

    How to have a horizontal line at the middle of a html heading with CSS?

    How do I animate an entire table row in Angular without affecting the table row border?

    Main navigation, classes on/off. HGelp understanding how this is built

    How to grows up a div height with a table that has your rows added dynamically?

    How to put a border around the text in a button?

    How do I span columns with a div based table?

    How can I edit a web part's .css file on the fly in MOSS 2007?

    how can I make my navbar scroll smoothly to the top on page click

    How do I make this sticky footer stick to the bottom of the layout when the sidebar exceeds screenheight?

    How to make HTML pages print at a consistent size from Chrome?

    How to have a background image properly fade in with CSS

    How can images be resized using Bootstrap

    In a text based browser game, how would I make a typewriter effect in the dialogue?

    How can I center a logo and place the links left and right on the navbar using bootstrap?

    How to set width of an element in %

    HTML+Javascript: How can I Load Data in Div via Class?

    How to make a disabled select box look like a normal text box(css only)

    2 Sidebar Columns Layout (How)?

    How To Have Margin For Background Image?

    How to make submit input and text input equally spaced

    How to arrange the elements of a semicircle in css/html/js

    How to centering a form

    CSS: position: absolute together with margin: auto for centering - How does that work?

    How to create custom horizontal radio buttons with CSS?

    How can I centralize this jquery styling colors into css?