Jump to content
Sign in to follow this  
skooda

Input

Recommended Posts

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

>

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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]

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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 by lucky3809

Share this post


Link to post
Share on other sites

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; }

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...