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 to add checkmarks and x's when validating in angularjs?

    How to force enter key to make a line break inside iframe editor

    How to remove gap between elements when using CSS3 table-row/header/footer-group in Firefox?

    How to Wrap Text Within an Image-Link? HTML CSS

    How do I put a border: 1px solid #ddd around a selectbox using jQuery?

    How to run multiple css selector classes at once?

    How do I assign styling to a Javascript variable?

    How to add multiple CSS classes to HTML node in Closure template (soy)?

    How to remove/add jQueryUI CSS theme from specific element?

    How can I style this span for a quote without causing this layout problem?

    how to stop css/jquery rotation

    Slide Up on Services Pages & Slider Not Working/Showing

    GWT how to add css style on Image Resource

    How to use Jekyll baseurl in css files

    How to fix responsive drop down menu using css?

    CSS: overlay looks fine on Chrome, but not in Firefox 3: how do I fix the vertical offset?

    How to force wrapper div to keep its optimal width according to its children

    Bootstrap - How to make text wrap around an image on small devices?

    how the highlighted text color and background is determined

    How to work with gradients in CSS / list of online CSS gradient generators [closed]

    How to get the textarea to be same height as row

    How do I get a floating footer to stick to the bottom of the viewport in IE 6?

    How would I get my horizontal navigation bar to span the full width?

    How to make sure that two divs appear side by side? [closed]

    how to write browser specific css properties?

    How to have a common header and footer in a HTML CSS web app?

    How to pass a Rails variable into a view's CSS that must be refreshed dynamically (every 60 seconds)?

    How to “mark” a UL/LI nav item as “active” based on click?

    How to Load Resources (Css, js files) in Laravel 4 (Optimization)

    Autohide Scrollbars - Show only when necessary