Moving the text closer to the field box

HTML & CSS
1

How can I move the text Username and Password a little closer to their perspective field boxes? Thanks. Here’s the code:

<form action="login.php" method="post" accept-charset="UTF-8" class="middletext">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label><font class="font4_15">Username</font></label><span class="username"><input type="text" name="user_name_login" size="9" style="width:70px;" />
&nbsp;&nbsp;<label><font class="font4_15">Password</font></label><span class="password"><input type="password" name="password_login" size="9" style="width:70px;" />
<input type="submit" value="[var.lang_login_now]" class="btn_vid1" /></a><!--<a href="login.php"></a>-->
<input type="hidden" name="submitted" value="yes" />
<input type="hidden" name="remember_me" value="remember_me" />
</form>
2

Generally speaking CSS should always be externally linked unless there is an extremely good reason not to do so or you want a “single” localised; quick and dirty lazy fix on a specific item.

To see how the CSS applies itself try it out… it will of course style any form in the exact same way that it comes across that matches those patterns. It will do it on any page; each and every time there is a corresponding “match” linked to assuming the file is external: http://www.w3.org/TR/CSS2/selector.html#pattern-matching Notice a few Descendant selectors were used.

That is where your classes may come into play if you just want to match one single form or you could use multiple style sheets.

3

Same for me! Saw it in IE, FF, Opera and Chrome everywhere the same. Or are you referring to older IE versions?

4

With CSS. :wink:

Well, it’s a strange question in a way, as the code you posted (at least in my browser) has the text hard up against its field box.

Do you have some associated CSS that you are using?

5

I have learned it , but i can’t remember how to move the username and password to their perspective field boxes , i will work it out today , and when i get the ansere , i will give you the answer .

6

Thanks for the replies.

Can you clarify this

“Add a display block prop, same for input and then play with dimension (width, text-align and padding)”

or please give me an example?

Thanks

7

Thanks for your reply, it was helpful. Yes I was “getting confused with matching ‘class’ selectors and ‘id’ values”.

However, I’m still not clear. Should this code be added to the external CSS file?

html, body, form, label, div, input {
    margin: 0; padding: 0;
}
 
form {
    width: 500px;   
}
 
form div {
    width: 100%; 
}
 
form label {
    float: left; font-weight: bold; font-size: /* whatever ont size you wish to use */
}
 
form input {
    width: 100px; margin: 2px 8px; float: left; display: inline;    
}

I have more than one form in my web pages, so how will this css code get attributed to the html code presented here? Please clarify.

Thanks again

8

Thanks for that help.
However, I’m not clear on the css.

To use your code, should I name the form, say for example form1 and

add your css code to the css file like this?

html, body, form1, label, div, input {
    margin: 0; padding: 0;
}
 
form1{
    width: 500px;   
}
 
form1 div {
    width: 100&#37;; 
}
 
form1 label {
    float: left; font-weight: bold; font-size: /* whatever ont size you wish to use */
}
 
form1 input {
    width: 100px; margin: 2px 8px; float: left; display: inline;    
}
</style>

Or is your Css supposed to be on the html page? Because you have </style>>

I need some clarification, please.

Thanks

9

I suspect the closing </style> was a redundant typo during the testing period and got copy-and-pasted by accident the CSS should be external.

You cannot use “form1” in that context the form (in the example) matched the FORM element perhaps you are getting confused with matching ‘class’ selectors and ‘id’ values.

That form (post #7) matches <form> not; class=“form” so it could only be legally named ‘form’ in that instance. However, you could probably create a CLASS or ID attribute within the HTML called ‘form1’ and rewrite the CSS, so it matched a class, etc.

10

Your form was bit of a mess :slight_smile: Like johnny.dacu already mentioned you used a lot of those   entities (none-breaking spaces), Than there were 2 opening <span> tags without closing </span> tags, there was a closing </a> tag in the middle of the form, you had both size and width properties for your texfields declared and then all those font declaraties, those should be in a stylesheet.

I cleaned it a bit up:


html, body, form, label, div, input {
    margin: 0; padding: 0;
}

form {
    width: 500px;	
}

form div {
    width: 100&#37;; 
}

form label {
    float: left; font-weight: bold; font-size: /* whatever ont size you wish to use */
}

form input {
    width: 100px; margin: 2px 8px; float: left; display: inline;	
}
</style>



<form action="login.php" method="post">
<div>
<label>Username</label>
<input name="user_name_login" type="text">
<label>Password</label>
<input name="password_login" type="password">
<input type="submit" value="[var.lang_login_now]" class="btn_vid1" />
<input type="hidden" name="submitted" value="yes" />
<input type="hidden" name="remember_me" value="remember_me" />
</div>
</form>

I hope this helps you a bit in the right direction

11

First, remove all   code. Not very useful. To arrange labels use CSS. Add a display block prop, same for input and then play with dimension (width, text-align and padding);