Have Geek Brain

How to correctly align text boxes on a web page using shortcuts

it's a CSS / design question. I have three text boxes that I want to center-align on a webpage. Then I want the shortcut description to the right of each.

When I use an attribute like text: align: center because the labels have different lengths, it gives out agitation of the text boxes [see. link to image below]

http://www.mediafire.com/imageview.php?quickkey=qcyoajm2iuk

Is there an easy way to keep the text boxes aligned and then put the labels to the right without changing the text boxes?

Thanks.

+2


a source to share


5 answers


basically you have to define the width for your form and float: left

input and the float: right

label to get the label to land next to your input. This is a CSS trick for centering relative elements of an element margin: 0 auto

, but you have to define the width.

The problem you will face is that all of your entrances will be next to each other. To prevent overlapping label and typing on the element. And clean the floats. I would use the LL LI element rather than Paragraphs (as in the PW example), because most of the time your form is a list of questions.



I've compiled an example for you: http://jsfiddle.net/Qs4pk/2/

+5


a source


use the tag <fieldset>

in conjunction with <label>

. Step by step explanation .
Then align as desired.



+3


a source


In the screenshot, you have text-align: each element inside the div is centered. This way you see the correct behavior for your current approach.

Instead, you need to center the div (covering the box of your textbox and label elements) and then left-align (which will be the default by the browser) the inner elements.

To center using a div:

#content {

width: 700 pixels; margin-left: auto; margin-right: auto; }

+1


a source


http://reisio.com/temp/form2.html

<! doctype html>
<html>
    <head>
        <title> </title>
        <style>
body {
    margin: 8px;
    padding: 0;
}
form {
    margin: 0;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font: 12px sans-serif;
    display: block! important;
    display: inline-block;
    overflow: hidden;
}
li {
    float: left;
    clear: left;
}
label {
    display: block;
    width: 200px;
    height: 19px;
    line-height: 19px;
    position: relative;
    margin: 0 0 5px;
    cursor: pointer;
    text-align: right;
}
input {
    width: 120px;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid gray;
    padding: 1px 0;
    height: 15px;
    font: 12px sans-serif;
}
        </style>
    </head>
    <body>
        <form action = "">
            <ul>
                <li>
                    <label> <input> Beans </label>
                </li>
                <li>
                    <label> <input> Cornbread </label>
                </li>
            </ul>
        </form>
    </body>
</html>
+1


a source


Your question also has a design aspect. What is the best alignment for labels and text boxes from a user perspective ? Several months ago, I was very surprised when I found "Web Form Design" in MIX09 (see http://videos.visitmix.com/MIX09/C17F ). With examples, you'll see how you can improve your user experience by placing labels and entering text boxes elsewhere. This video just changed my mind in this area. You can also look at http://www.lukew.com/presos/ and Best Practices for Hints and Validation in Web Forms http://sixrevisions.com/user-interface/best-practices-for-hints-and -validation-in-web-forms / , some of which have related information.

+1


a source






More articles:


All Articles