CODEWITHSUNDEEP
htmlcssforms
OzzC
OzzC

Reputation: 821

Trying to put my label above input type text

I have a login form, and Im trying to put my span above the input, but Im not having sucess doing this, all my tries, Im having the same result, that is:

Label: [INPUT]

but I want

Label:

[INPUT]

Do you know the trick to do this? Because for default it seems that always the label will be aligned left..

This is what Im trying: http://jsfiddle.net/8JkMm/ I have this html:

<div class="loginbox">
    <h1>Login:</h1>
    <form name="login" action="" method="post">
        <label class="label">
            <span class="field">Email:</span>
            <input type="text" name="user" />
        </label>

        <div class="label">
            <span class="field">Pass:</span>
            <input type="password" name="pass" class="pass" />
            <input type="submit" value="Login" class="btn" />
             <a href="index.php?remember=true" class="link">Forgot Password<i class="fa fa-chevron-right"></i></a>
        </div>        
    </form>
</div>

And this CSS:

.loginbox{position:absolute; left:50%; top:50%; background:rgba(255,255,255,0.9); width:360px; height:265px;}
.loginbox{margin-left:-180px; margin-top:-125px;}
.loginbox h1{padding:20px; font-weight:200; color:#FFF; background:pink;}
.loginbox form{padding:20px;}
.loginbox form .label{display:block; margin-bottom:10px;  width:320px;}
.loginbox form .label .field{ width:60px; text-align:right; font-size:20px; margin:7px 10px 3px 3px;}
.loginbox form .label input{padding:10px; font-size:16px; border:1px solid #CCC; width:225px;}
.loginbox form .label .pass{width:225px;}
.loginbox form .label .btn{float:right; width:auto; display:block;  border:none; font-size:14px; text-transform:uppercase; margin:15px auto;}
.loginbox form .label .btn{padding:11px 10px 11px; color:#fff;  cursor:pointer;}
.loginbox form .link {float:left;margin:15px auto;  color:#000;}

Upvotes: 2

Views: 19219

Answers (3)

potashin
potashin

Reputation: 44601

You can display your span (.loginbox form .label .field CSS class) element as block instead of the default inline :

.loginbox form .label .field{
     display:block;
     width:60px;
     font-size:20px;
     margin:7px 10px 3px 3px;
}

Your html structure seems a bit weird, although if you want to achieve the same result you posted then you should also remove text-align:right.

Example

Upvotes: 1

Houssam Badri
Houssam Badri

Reputation: 2509

I think that you could make better way for that, but a simple </br> give the result you want:

<label class="label">
            <span class="field">Email:</span></br>
            <input type="text" name="user" />
</label>

Upvotes: 2

John Heilman
John Heilman

Reputation: 101

Change <span class="field">Pass:</span> to <div class="field">Pass</div>

Span uses display style of inline, which tries to place the content in as if it were part of the sentence. One could think of each word in this sentence as a rectangle, and that the rectangles are 'inline' or on the same line with each other.

Div uses a display style of block, which tries to create a rectangle with the full width the first parent that has a width (unsure). As such, you could think of a div as a block that owns the whole width of the lines that it occupies.

Upvotes: 1

Related Questions