skooda Posted June 16, 2012 Share Posted June 16, 2012 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 > Quote Link to comment Share on other sites More sharing options...
Spudinski Posted June 16, 2012 Share Posted June 16, 2012 One does not simply "add" it.. Quote Link to comment Share on other sites More sharing options...
skooda Posted June 16, 2012 Author Share Posted June 16, 2012 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 Quote Link to comment Share on other sites More sharing options...
W3Theory || Peter Posted June 16, 2012 Share Posted June 16, 2012 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.... Quote Link to comment Share on other sites More sharing options...
skooda Posted June 16, 2012 Author Share Posted June 16, 2012 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 Quote Link to comment Share on other sites More sharing options...
sniko Posted June 16, 2012 Share Posted June 16, 2012 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? Quote Link to comment Share on other sites More sharing options...
MafiaHeros Posted June 16, 2012 Share Posted June 16, 2012 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] Quote Link to comment Share on other sites More sharing options...
skooda Posted June 17, 2012 Author Share Posted June 17, 2012 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 Quote Link to comment Share on other sites More sharing options...
lucky3809 Posted June 17, 2012 Share Posted June 17, 2012 (edited) 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 Quote Link to comment Share on other sites More sharing options...
rulerofzu Posted June 17, 2012 Share Posted June 17, 2012 Here ya go http://lmgtfy.com/?q=form+input+css Quote Link to comment Share on other sites More sharing options...
skooda Posted June 17, 2012 Author Share Posted June 17, 2012 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; } Quote Link to comment Share on other sites More sharing options...
Seker Posted June 17, 2012 Share Posted June 17, 2012 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? Quote Link to comment Share on other sites More sharing options...
skooda Posted June 17, 2012 Author Share Posted June 17, 2012 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 Quote Link to comment Share on other sites More sharing options...
Seker Posted June 17, 2012 Share Posted June 17, 2012 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. Quote Link to comment Share on other sites More sharing options...
lucky3809 Posted June 17, 2012 Share Posted June 17, 2012 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... Quote Link to comment Share on other sites More sharing options...
rulerofzu Posted June 18, 2012 Share Posted June 18, 2012 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 Quote Link to comment Share on other sites More sharing options...
skooda Posted June 18, 2012 Author Share Posted June 18, 2012 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.