.intro h1{ font-family: 'cambria'; font-size: 16pt; font: bold; text-align: left; } .intro p{ font-family: 'calibri'; font:italic; font-size: 12pt; padding: 0px 690px 0px 20px; text-align: left; } .content{ border: 2px solid; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #para1{ padding: 0px 1050px 0px 20px; } #para2{ padding: 0px 1099px 0px 20px; } .username-label, .username-textbox, .password-label, .password-textbox { text-align:right; }<html> <head> <link href="~/styles/home.css" rel="stylesheet" /> <title>final project</title> </head> <body> <script src="~/scripts/jquery-2.1.1.min.js"></script> <script src="~/scripts/jquery-ui.min.js"></script> <script src="~/scripts/home.js"></script> <div class="intro"> <h1>welcome cuyahoga community college student services online</h1> <p>cuyahoga community college recognizes students' rights access personal , academic records in accordance family educational rights , privacy act of 1974 (ferpa) amended public law 93-568.</p> </div> <div class="content"> <p id="para1">already have account us? returning users may log in entering site username , password. </p> <div class="username-label">username: </div> <div class="username-textbox"> <input class="existing username-input-textbox" type="text" value="" /> </div> <div class="password-label">password:</div> <div class="password-textbox"> <input class="existing password-input-textbox" type="text" value="" /> </div> <button id="button1">log in</button> <hr /> <p id="para2">new users, please create new account providing basic information.</p> <div class="username-label1">username: </div> <div class="username-textbox1"> <input class="username-new-input-textbox" type="text" value="" /> </div> <div class="password-label2">password:</div> <div class="password-textbox2"> <input class="password-new-input-textbox" type="text" value="" /> </div> <div class="email-label3">email:</div> <div class="email-textbox3"> <input class="email-new-input-textbox" type="text" value="" /> </div> <div class="repeat-email-label4">repeat email address:</div> <div class="repeat-email-textbox4"> <input class="reenter-new-input-textbox" type="text" value="" /> </div> <button id="button2">create account</button> </div> <footer>cuyahoga community college</footer> <footer>700 carnegie avenue, cleveland, ohio, 44115</footer> </body> </html>i working on web development project consists of login desktop screen let's students @ tri-c (this practice) enter user name , password if have existing account, students don't have account, can create account. also, have not started create functionality on of buttons (that's coming later). have been having trouble trying position username , password labels , username , password textboxes right hand. know can use text-align property them on right hand, doesn't trying in picture. here code far , picture of trying accomplish.
create new div elements inside content div, 1 left side , 1 right side. set display: table-cell; , width: 50%. should take care of it.
see fiddle here
edit: , rid of crazy padding!
Comments
Post a Comment