Input

[skooda]

Do any one now how to add login input to html/css

heres my css

body {
width: 1366px;
margin: 0 auto;




}

and i add this to the html it keep going to the top

<input name='username' type='text' class="areatest" size='22'/>

<form name='login' method='post' action='login.php'>

</form

>

[Spudinski]

One does not simply "add" it..

[skooda]

One does not simply "add" it..

I know its for the login its not done yet the problem is that im having trouble with the format it.It keep going to the top

[W3Theory || Peter]

Yeah, you have nothing in your css really, what did you expect it to happen? All you did was state the width of your body and nothing more....

[skooda]

body {

width: 1366px;

margin: 0 auto;

 

 

}

input {

border:2px solid #dadada;

border-radius:7px;

font-size:20px;

padding:5px;

}

input:focus {

outline:none;

border-color:#9ecaed;

box-shadow:0 0 10px #9ecaed;

}

 

thats aswell but thats just the input not sure how to add it to the css

[sniko]

thats aswell but thats just the input not sure how to add it to the css

How about putting it in some tags, or use a suitable link rel?

[MafiaHeros]

Not sure if this is what you ment...

 

[CSS]

input[type=text], input[type=password] {

background-color:#1A1A1A;

border: 1px #444444;

border-style: solid;

color:#FFFFFF;

}

input[type=text]:hover, input[type=password]:hover {

background-color:#222222;

border: 1px #555555;

border-style: solid;

color:#FFFFFF;

}

input[type=submit] {

background-color:#1A1A1A;

border: 2px #1A1A1A;

border-style:ridge;

color:#FFFFFF;

}

input[type=submit]:hover {

background-color:#222222;

border: 2px #222222;

border-style:ridge;

color:#FFFFFF;

}

textarea {

background-color:#1A1A1A;

border: 1px #444444;

border-style: solid;

color:#FFFFFF;

}

textarea:hover {

background-color:#222222;

border: 1px #555555;

border-style: solid;

color:#FFFFFF;

}

select {

background-color:#1A1A1A;

border: 1px #444444;

border-style: solid;

color:#FFFFFF;

}

[/CSS]

[skooda]

Not sure if this is what you ment...

 

[CSS]

input[type=text], input[type=password] {

background-color:#1A1A1A;

border: 1px #444444;

border-style: solid;

color:#FFFFFF;

}

input[type=text]:hover, input[type=password]:hover {

background-color:#222222;

border: 1px #555555;

border-style: solid;

color:#FFFFFF;

}

input[type=submit] {

background-color:#1A1A1A;

border: 2px #1A1A1A;

border-style:ridge;

color:#FFFFFF;

}

input[type=submit]:hover {

background-color:#222222;

border: 2px #222222;

border-style:ridge;

color:#FFFFFF;

}

textarea {

background-color:#1A1A1A;

border: 1px #444444;

border-style: solid;

color:#FFFFFF;

}

textarea:hover {

background-color:#222222;

border: 1px #555555;

border-style: solid;

color:#FFFFFF;

}

select {

background-color:#1A1A1A;

border: 1px #444444;

border-style: solid;

color:#FFFFFF;

}

[/CSS]

Thanks for trying but thats not the problem

heres the image

https://picasaweb.google.com/118124669787138694458/ScreenCapture02#5754749477186950770

the problem is that i cant get that input under the login

[lucky3809]

Thanks for trying but thats not the problem

heres the image

https://picasaweb.google.com/118124669787138694458/ScreenCapture02#5754749477186950770

the problem is that i cant get that input under the login

 

Put it in a div tag, then position it with css... Or without a div tag...make a new class in your css file such as input.position {margin-left:0px;}

then add it to your input tag...

<input class="position areatest" name='username' type='text' size='22'/>

OR

<div class='position'>

<form name='login' method='post' action='login.php'>

<input name='username' type='text' class="areatest" size='22'/>

</form>

</div>

Example Positions

---------------

margin-left

margin-right

margin-top

margin-bottom

float: right;

float:left;

ect.....

w3schools has some tuts in positioning it...

Edited June 17, 2012 by lucky3809

[rulerofzu]

Here ya go

http://lmgtfy.com/?q=form+input+css

[skooda]

Im doing lessons the problem im having is putting it under the login

 

<td colspan="3">
           <img src="images/login-box.gif" width="381" height="314" alt=""></td>	        
       <form action="">
   <label for="name">Name: </label> <input type="text" id="name" class="input" />
   <label for="password">Password: </label> <input type="password" id="password" class="input" />
   <label>  </label> <input type="submit" value="Submit" class="button" />
</form>

       </d>

 

Heres the css updated

body {
width: 1366px;
margin: 0 auto;




}
.input {
   border: 1px solid #006;
   background: #ffc;
}
.input:hover {
   border: 1px solid #f00;
   background: #ff6;
}
.button {
   border: 1px solid #006;
   background: #ccf;
}
.button:hover {
   border: 1px solid #f00;
   background: #eef;
}
label {
   display: block;
   width: 150px;
   float: left;
   margin: 2px 4px 6px 4px;
   text-align: right;
}
br { clear: left; }

[Seker]

Im doing lessons the problem im having is putting it under the login

 

margin: 0 auto;

Won't that just put it in the center of the page?

[skooda]

Won't that just put it in the center of the page?

I removed it.It took the login out of place so I added it back

[Seker]

I removed it.It took the login out of place so I added it back

I think you just need to change the values, not remove it completely.

[lucky3809]

You need to position it to under the place you are wanting it, it won't get there by itself your making it harder then it really is...

[rulerofzu]

You need to position it to under the place you are wanting it, it won't get there by itself your making it harder then it really is...

No you shouldnt. CSS should not be in the file it should be kept external.

Skooda your better learning about the differences between css id and css class

[skooda]

You need to position it to under the place you are wanting it, it won't get there by itself your making it harder then it really is...

Thanks lucky I got it I even made a few other pages