Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 193
  • Last Modified:

About space -again-URGENT

hi,
 In order to have this:
 
      Username:________
      Password:________

i use this:
<!--
form  {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #000000;
      }

label {
      float: left;
      width:220px;
      clear:all;
      padding-left:80px;

      }


//-->
</style>


My problem is i need  something like this

            Username:________
            Password:________
                         
                           HouseNo1:___________
                                          HouseNo2:______________


How do i do,pls help?
0
Jasbir21
Asked:
Jasbir21
  • 2
  • 2
1 Solution
 
seanpowellCommented:
You can adjust this to suit your needs, but this is the basic styling:

<html>
<head>
<title>Hello</title>
<style type="text/css">
<!--
form  {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #000000;
      }

input {
      width: 100px;
      }

label {
      float: left;
      width:100px;
      clear:all;
      padding-left:30px;
      }
   
//-->
</style>
</head>
<body>
<form>
<label for="username">Username:</label> <input type="text" name="username"><br />
<label for="password">Password:</label> <input type="text" name="password"><br />
<div style="width:100px; height:30px; float:left; padding:0px;"></div><span style="width:100px;">HouseNo1:</span> <input type="text" sixe="10" name="HouseNo1"><br />
<div style="width:204px; height:30px; float:left; clear:left;"></div><span style="width:100px;">HouseNo2:</span> <input type="text" sixe="10" name="HouseNo2"><br />
</form>
</body>
</html>
0
 
Jasbir21Author Commented:
thanks,i really panic, with the space.

Pls don't mind me asking something why put clear left; or clear=all;

and when put :

<div style="width:204px; height:30px; float:left; clear:left;"></div><span style="width:100px;">HouseNo2:</span>

if put div, then why span?

Very sorry me asking.

thanks
0
 
seanpowellCommented:
No problem at all...

With the div and the span - the clear:left just makes sure that the "HouseNo2" line sits below the "HouseNo1" line. It means that the left edge of the div must be against the page margin (Their can't be anything to the left of it, so it simply moves down one line) clear:all will also do this, but since there's nothing on the right of it, clear:left will take care of it.

Here's the same form with background colors added to help you see what's happening:

<html>
<head>
<title>Hello</title>
<style type="text/css">
<!--
form  {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #000000;
      }

input {
      width: 100px;
      }

label {
      float: left;
      width:100px;
      padding-left:30px;
      background-color: #CCCCCC;
      }
   
//-->
</style>
</head>
<body>
<form>
<label for="username">Username:</label> <input type="text" name="username"><br />
<label for="password">Password:</label> <input type="text" name="password"><br />
<div style="width:100px; height:30px; float:left; padding:0px; background-color: #CCCCCC;"></div><span style="width:100px; background-color: #CCCCCC;">HouseNo1:</span> <input type="text" sixe="10" name="HouseNo1"><br />
<div style="width:204px; height:30px; float:left; clear:all; background-color: #CCCCCC;"></div><span style="width:100px; background-color: #CCCCCC;">HouseNo2:</span> <input type="text" sixe="10" name="HouseNo2"><br />
</form>
</body>
</html>

Play around with adding and removing parts of the code to soo how each attribute affects its layout.

Please feel free to comment back :-)

Thanks,
georgemarian
0
 
Jasbir21Author Commented:
hi,
  thank you so much, you have really made me understand what it means. I just want to say that i am very very grateful and thankful for being very very patient with me and really helping me to understand.
 
  May God bless you in everything that you do ..

Thank you again and God bless you.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now