473,326 Members | 2,182 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

How to get the content to be position left and right inside of the border-radius?

74 64KB
I am working on a web development project which consists of a login desktop screen that let's students at Tri-C (this is just for practice) enter their user name and password if they already have an existing account, but for the students who don't have an account, they can create an account. Also, I have not started to create any functionality on any of the buttons (that's coming later). I have been having trouble with trying to position the username and password labels and username and password textboxes to the right hand. I know I can use text-align property to get them to be on the right hand, but it doesn't do what I am trying to do in the picture. Here is my code so far and picture of what I am trying to accomplish.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3.     <head>
  4.         <link href="~/Styles/Home.css" rel="stylesheet" />
  5.         <title>Final Project</title>
  6.     </head>
  7.  
  8.     <body>
  9.         <script src="~/Scripts/jquery-2.1.1.min.js"></script>
  10.         <script src="~/Scripts/jquery-ui.min.js"></script>
  11.         <script src="~/Scripts/Home.js"></script>
  12.  
  13.         <div class="intro">
  14.  
  15.           <h1>Welcome to Cuyahoga Community College Student Services Online</h1>
  16.             <p>Cuyahoga Community College recognizes students' rights to access personal and academic records
  17.               in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
  18.         </div>
  19.         <div class="content">
  20.         <p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
  21.          <div class="username-label">Username: </div>
  22.             <div class="username-textbox">
  23.                 <input class="existing username-input-textbox" type="text" value="" />
  24.             </div>
  25.  
  26.             <div class="password-label">Password:</div>
  27.             <div class="password-textbox">
  28.                 <input class="existing password-input-textbox" type="text" value="" />
  29.             </div>
  30.             <button id="button1">Log in</button>
  31.             <hr />
  32.  
  33.             <p id="para2">New Users, please create a new account by providing us with some basic information.</p>
  34.             <div class="Username-label1">Username: </div>
  35.             <div class="username-textbox1">
  36.                 <input class="username-new-input-textbox" type="text" value="" />
  37.             </div>
  38.             <div class="Password-label2">Password:</div>
  39.             <div class="password-textbox2">
  40.                 <input class="password-new-input-textbox" type="text" value="" />
  41.             </div>
  42.             <div class="Email-label3">Email:</div>
  43.             <div class="email-textbox3">
  44.                 <input class="email-new-input-textbox" type="text" value="" />
  45.             </div>
  46.             <div class="Repeat-Email-label4">Repeat Email Address:</div>
  47.             <div class="repeat-email-textbox4">
  48.                 <input class="reenter-new-input-textbox" type="text" value="" />
  49.             </div>
  50.             <button id="button2">Create Account</button>
  51.  
  52.         </div>
  53.  
  54.         <footer>Cuyahoga Community College</footer>
  55.         <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
  56.     </body>
  57.  
  58. </html>
Expand|Select|Wrap|Line Numbers
  1. .intro h1{
  2.     font-family: 'Cambria';
  3.         font-size: 16pt; 
  4.         font: bold;
  5.         text-align: left;
  6. }
  7.  
  8. .intro p{ 
  9.  
  10.     font-family: 'Calibri';  
  11.     font:italic;
  12.     font-size: 12pt; 
  13.     padding: 0px 690px 0px 20px;
  14.     text-align: left;
  15.  
  16. }
  17. .content{ 
  18.     border: 2px solid; 
  19.      -webkit-border-radius: 10px;
  20.      -moz-border-radius: 10px;
  21.      border-radius: 10px; 
  22. }
  23. #para1{
  24.     padding: 0px 1050px 0px 20px; 
  25.  
  26. }
  27. #para2{
  28.     padding: 0px 1099px 0px 20px;
  29. }
  30.  
  31. .username-label, .username-textbox, .password-label, .password-textbox {
  32.    text-align:right; 
  33. }
Attached Images
File Type: jpg Login Desktop.jpg (54.5 KB, 154 views)
Apr 5 '17 #1
1 31760
If you use "tables" you should be able to get your Username and Password stuff on the right side of the screen. I am not good at explaining in detail on how to use the tables but I can give you a link that can give you some examples https://www.w3schools.com/html/html_tables.asp. I hope this was useful.
May 1 '17 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

3
by: mitsura | last post by:
Hi, I have included a small listing. The test program opens a panel and show a bitmap. What I want is to when the mouse is over the bitmap panel, I want to trap the left mouse click. The...
8
by: A.M | last post by:
Hi, Using C#, what is the equivalent of functions Left, Right and Mid that we had in vb6? Thanks, Alan
11
by: Bruce A. Julseth | last post by:
I have: If (Microsoft.VisualBasic.Left(TextBox1.Text, 1) = "$") Then TextBox1.Text = Microsoft.VisualBasic.Right(TextBox1.Text, TextBox1.Text.Length - 1) End If Adding: Imports...
6
by: James Brown [MVP] | last post by:
Hi, I am having trouble understanding how the 'const' modifier affects the 'left-right' rule when deciphering c-declarations: const int *x; // x is a pointer to a 'const int' int const *x; ...
8
by: Chaitanya | last post by:
Hello, In my Application i want to know when user clicks both the "Left" and "Right" buttons of the Mouse. I am getting a number like this "3145728". But the MouseButtons Enum contains only Left,...
5
by: | last post by:
What are the equivalant to left, right, etc. in C#. How can I extract strings from a string without them? For instance, I have a string like so: ...
14
TheServant
by: TheServant | last post by:
Hi guys, I have done this before, but I can't figure out why it won't work. If any of you can see my problem, please let me know. Here are the relavent pieces of code. <!-- Main Content --> <div...
1
by: samz | last post by:
Hello, A. CONTEXT My album is generated by a batch script, but DOS cannot get the size of an image file. So, the a unique picture size is defined in the script....
2
by: Suzie Harmon | last post by:
HI, Is there a way to force the left/right position of a horizontal scroll bar on a subform datasheet? I.e. Position the scroll bar to be mid-way centered on the form between the left and right...
0
by: Daliasun | last post by:
visit http://jsfiddle.net/ghAkB/4/ Can someone please help me,I can't finish with the website until this is done, is a suprise for my family :( I got an error in IE8.This function is working...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.