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). Anyway, I have been having trouble with using the border-radius property in CSS for some reason because there is always a syntax error saying “border-radius is not a known css property”. How can implement this type of border I need to make it look like the picture you see that is attached? Finally, I need some help with positioning my paragraphs to the left and having the label with the input textboxes to the right of each of those paragraph. Again, the picture is most evident of what I am trying to do. I have attached my code I have created so far and picture of what I am trying to accomplish.
<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 to Cuyahoga Community College Student Services Online</h1>
<p>Cuyahoga Community College recognizes students' rights to access personal and academic records
in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
</div>
<div class="content">
<p id="para1">Already have an account with us? Returning users may log in by entering their site username and 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 a new account by providing us with some 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’m not familiar with Visual Studios, but how old is your version? I assure you border-radiusis a valid css property. You could just ignore the error and validate your css with Jigsaw. Some older IDEs don’t recognise some newer CSS3 and HTML5 things and mistakenly flag them as errors.
Looks like a two column layout. Display table/table-cell should be good for that, see my example here (with 3 cols).
I got the border-radius to work, but I am still having trouble with getting the content to be positioned the way the picture has it. Here is my updated CSS code.
I think the best way would be to start with the html you need for the job. Then apply class names for styling.
I suggest something like the code snippet below. From your image I guess there are two forms. I polulated them with label - input pairs and the submit below. Only necessary classes in place, change to what you need to have.
This html is all you need and it can be styled exactly as your image shows, using flex-box or table display or old fashion float. I kept the hr tag as it could fit semanticly in this case.
<div class="content">
<form class="login" action="/signin">
<p class="info" id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
<div class="exist account" >
<label class="" for="existuser">Username: </label>
<input class="" name="existuser" type="text" value="">
<label class="" for="existpass">Password:</label>
<input class="" name="existpass" type="text" value="">
<input class="button" type="submit" value="Log in">
</div>
</form>
<hr>
<form class="login" action="/signup">
<p class="info" id="para2">New Users, please create a new account by providing us with some basic information.</p>
<div class="create account">
<label class="" for="newuser">Username: </label>
<input class="" name="newuser" type="text" value="">
<label class="" for="newpass">Password:</label>
<input class="" name="newpass" type="text" value="">
<label class="" for="newemail">Email Address:</label>
<input class="" name="newemail" type="text" value="">
<label class="" for="newemail2">Repeat Email Address:</label>
<input class="" name="newemail2" type="text" value="">
<input class="button" type="submit" value="Create Account">
</div>
</form>
</div>
How to achieve the display like in the image depends on the css technique you prefer and your target devices.
Can you show me how to position the elements with the existing code that I already posted? I do appreciate you exploring a different way of dong it, but I don’t care to do with HTML forms. Later on when I create my second or third web page, I am going to have to use AJAX JQuery which basically is going to be when I don’t want to have to refresh the web page which HTML forms would then not be the most efficient way to do it.
Regardless of the method you use to process a form, a form is a form and you should use the correct semantic elements to build it if you want the form to be usable.
It could be done, awkwardly, but I don’t see the point.
The code you posted is a mess, imho.
The structure of the “content” div is confusing to me. Inputs are wrapped in divs and some form elements are substituted with divs and the form itself is omitted. Yet this is the whole page posted.
Please explain, how did you come up with the code you posted. I can’t imagine it is the editor that generated code like this.
I understand if your editor is dated and maybe difficult to edit code in, but surely you must be able to change the existing code some way to make it fit for the task?
@Erik_J,
How can I improve my existing code without dealing with HTML forms or even coming up with a third way of doing it? I understand that you think you structure is the best way to do it, but as I said before, I really don’t have any intention of doing it with HTML forms. Is there a third way to clean up my HTML page that’s more efficient? My way works but since you probably have more experience than me, let’s try to think about a third way of doing it. Again, NO HTML forms.
Ok, I guess you just want some random html to practice on. Please mind; this is not anything I recommend, whatever you practice on should be proper html for the job.
This is just some block and inline elements to mimic the real code. You could style it to look like the image, however I still can’t see the point.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Final Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Styles/Home.css">
</head>
<body>
<div class="wrapper">
<div class="intro">
<h1>Welcome to Cuyahoga Community College Student Services Online</h1>
<p>Cuyahoga Community College recognizes students' rights to access personal and academic records
in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
</div>
<div class="content">
<div class="exist account">
<p class="info">Already have an account with us? Returning users may log in by entering their site username and password. </p>
<div class="login signin">
<span class="">Username: </span>
<span class=""></span>
<span class="">Password:</span>
<span class=""></span>
<span class="button">Log in</span>
</div>
</div>
<hr>
<div class="create account">
<p class="info">New Users, please create a new account by providing us with some basic information.</p>
<div class="login signup">
<span class="">Username: </span>
<span class=""></span>
<span class="">Password:</span>
<span class=""></span>
<span class="">Email Address:</span>
<span class=""></span>
<span class="">Repeat Email Address:</span>
<span class=""></span>
<span class="button">Create Account</span>
</div>
</div>
</div>
<div class="footer">
Cuyahoga Community College<br>
700 Carnegie Avenue, Cleveland, Ohio, 44115
</div>
</div>
</body>
</html>
