Hello i'm having trouble aligning labels, input field and drop box in my html page. I want the labels aligned at the left and input right next to it. But it's allover the place and having trouble aligning it. I would like my form to look like this
But my page currently looks like this:
Below is my html and css code:
<!Doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Assignment 3 using Ajax" />
<!-- Title -->
<title>Assignment 3</title>
<!--CSS Styling -->
<link type="text/css" href="style.css" rel="stylesheet" />
<!-- script -->
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<header><h1> Registration </h1></header>
<form name="myForm" action="#" method="post" onsubmit="return validate()">
<fieldset>
<label for="username">Username: </label>
<input type="text" id="username" name="user" placeholder="Enter username" />
<label for="password">Password: </label>
<input type="password" id="password" name="user_p" />
<progress id="progress" value='0' max="100"></progress><span id="text"></span>
<label for="re_password">Verify Password: </label>
<input type="password" id="re_password" name="user_pass" placeholder="Re-enter password" />
<label for="email">Email: </label>
<input type="email" id="email" name="user_email" placeholder="Enter email" />
<label for="email">Verify Email: </label>
<input type="email" id="email" name="user_email2" />
<label for="question1">Security Question </label>
<select id="question1" name="question1">
<option value="none"> --- Select a question --- </option>
<option value="a">What's your favorite color?</option>
<option value="b">What's the make of your first car?</option>
<option value="c">What's your mother's maiden name?</option>
<option value="d">What city were you born?</option>
<option value="e">What high school did you attend?</option>
</select>
<label for="answer">Security Answer: </label>
<input type="text" name="user_answer1" />
<label for="question2">Security Question </label>
<select id="question2" name="question2">
<option value="none"> --- Select a question --- </option>
<option value="a">What's your favorite color?</option>
<option value="b">What's the make of your first car?</option>
<option value="c">What's your mother's maiden name?</option>
<option value="d">What city were you born?</option>
<option value="e">What high school did you attend?</option>
</select>
<label for="answer2"> Security Answer: </label>
<input type="text" id="answer2" name="user_answer2" />
<label for="mobile">Phone: </label>
<input type="text" id="mobile" name="user_mobile" />
<label for="address">Address: </label>
<textarea id="t1" rows="8" cols="40"name="user_address" style="vertical-align: top;"></textarea>
<label for="interests">Areas you may be interested in, please select one or more: </label>
<textarea id="interests" rows="10" cols="40" name="user_extra" style="vertical-align: top;"></textarea>
<div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="Red_Apple.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="110" height="40" />
</div>
<div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="Banana.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="110" height="40" />
</div>
<div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</fieldset>
<input type="button" name="submit" value="Register" onclick="return validate()" />
<input type="button" value="Clear" />
</form>
</body>
CSS:
form {
max-width: 750px;
margin-left: 50px;
background: #f4f7f8;
border-radius: 8px;
}
label {
display:block;
text-align: right;
width:145px;
float: left;
padding-top: 5px;
}
input {
display: inline-block;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 20px;
vertical-align: middle;
}
fieldset {
margin-bottom: 30px;
border: none;
}
#box1, #box2 {
float:right;
width: 112px;
height: 42px;
border: 1px solid;
}
div#box3{
width:112px;
height:42px;
border: 1px solid;
}
Please could some lead me in the right directions of how to currently aligning the labels and input like in the first pic.
If you put each 'line' of input and label inside a wrapper div, you can easily solve the problems you're getting. The wrapper acts like a full width wrapper around the label and input of that row. Every new label & input will go onto the next line.
I also did some adjustments to your label styling, as it needs to be display: inline-block; and no float: left; is needed.
See my JSFiddle demo.
I know that you want a native css solution but I've done a bootstrap version for fun. You can check it here.
The equivalent of my solution would be to make specific width for label and input :
input,label{
display:inline-block;
width:60%;
}
label{
width:30%;
}
And make sure that the sum will be 100% or use container div as I do in bootstrap.
Related
I'm trying to find a way to line up the input boxes for Name, Email, Age. The boxes are lined up for name and email. However, how do I change the width or margin to line up the input box to match that of name and email.
Also, how do I make the option value box bigger that accompany "Which option best describes your current role" label?
I have tried to adjust the width, margin to try to get the box to line up to email/age however it does not work. It seems that when I do margin-left it moves the label further away from the input box.
#Title{
text-align: center;
}
#description{
text-align: center;
}
body{
background-color: #a9d7d1;
margin: 50px 200px 20px 200px;
}
#Survey-form{
background-color: #f0f0f0;
text-align: center;
}
#Name{
text-align: left;
width: 200px;
height: 25px;
display:inline-block;
}
#Email{
text-align: left;
width: 200px;
height: 25px;
display:inline-block;
}
#Age{
text-align: left;
width: 200px;
height: 25px;
display:inline-block;
}
label[for=role]{
margin-left: -345px;
width: 40px;
select required {
width: 450px;
margin: 10px;
}
div{
}
<html>
<head>
<title>Survey Form </title>
<!-- Survey Form. -->
<link href="SurveyForm.css" rel=stylesheet>
</head>
<body>
<h1 id="Title"> Survey Form </h1>
<form id="Survey-form">
<p id="description">Let us know how we can improve freeCodeCamp </p>
<!-- <p> -->
<div>
<br /> <label>Name:</label>
<input type="text" name="Name" id="Name" placeholder="Enter your name">
</div>
<div>
<br /> <label>Email:</label>
<input type="email" name="Email" id="Email" placeholder="Enter your email"><br>
</div>
<div>
<br /> <label> Age:</label>
<input type="number" min = "18" max="110" name="Age" id="Age" placeholder="Age">
</div>
<div>
<br /> <label for="role">Which option best describes your current role?</label>
<select required>
<option value="selected disabled">Select an option </option>
<option value="Student">Student</option>
<option value="FullTimeJob">Full Time Job</option>
<option value="FullTimeLearner">Full Time Learner</option>
<option value="NotToSay">Prefer Not to Say</option>
<option value="Other">Other</option>
</select>
</div>
<p>How likely is that you would recommend
<br>freeCodeCamp to a friend?
<br><input type="radio" name="recommend" class="recommend" value="Definetly"> Definetly
<br> <input type="radio" name="recommend" class="recommend" value="Maybe"> Maybe
<br> <input type="radio" name="recommend" class="recommend" value="NotSure"> Not Sure
<p> <label for="FCC">What do you like most in FCC: </label>
<select required>
<option value="selected disabled">Select an option </option>
<option value="Challenges">Challenges</option>
<option value="Projects">Projects</option>
<option value="Community">Community</option>
<option value="Open Source">Open Source</option>
</select>
<p>Things that should be improved in the future.<br />(Check all that apply):
<br /> Front-end Projects: <input type="checkbox" name="sports" value="Front-end Projects">
<br /> Back-end Projects: <input type="checkbox" name="sports" value="Back-end Projects" >
<br /> Challenges: <input type="checkbox" name="sports" value="Challenges">
<br /> Open Source Community: <input type="checkbox" name="sports" value="Open Source Community">
<br /> Gitter help rooms: <input type="checkbox" name="sports" value="Gitter help rooms" >
<br /> Videos: <input type="checkbox" name="sports" value="Videos" >
<br /> City Meetups: <input type="checkbox" name="sports" value="City Meetups" >
<br /> Wiki: <input type="checkbox" name="sports" value="Wiki" >
<br /> Forum: <input type="checkbox" name="sports" value="Forum" >
<br /> Additional Courses: <input type="checkbox" name="sports" value="Additional Courses" >
<p>
Any Comments or Suggestions?
<textarea rows="4" cols="44" name="comment" form="usrform">
Enter your comment here...</textarea>
</p><input type="submit" value="Submit">
</form>
</body>
</html>
The boxes should line up and I want to make the select an option box bigger for the label Which option best describes your current role?
Here you go, Wrap your input elements using wrapper .row then divide into two columns .right, .left set relevent widths accordingly and use display: inline-block; to create grid.
You can use ul to create radio and checkbox list like I did below and get rid of <br/>
.form {
max-width: 900px;
width: 75%;
padding: 10px;
background: #fff;
}
div.row {
display: block;
margin-bottom: 10px;
}
div.right {
width: 45%;
display: inline-block;
text-align: left;
vertical-align: middle;
}
div.left {
width: 30%;
display: inline-block;
text-align: right;
vertical-align: top;
}
.input-list {
display: block;
list-style: none;
padding: 0;
}
.radio-li, .checkbox-li {
display: block;
padding-bottom: 10px;
}
.radio, .checkbox {
float: left;
margin-right: 5px;
background: #000;
}
<div class="row">
<div class="left">
<label>Name:</label>
</div>
<div class="right">
<input type="text" name="name" class="input" placeholder="Enter your name">
</div>
</div>
<div class="row">
<div class="left">
<label for="role">Which option best describes your current role?</label>
</div>
<div class="right">
<select>
<option value="selected disabled">Select an option </option>
<option value="Student">Student</option>
<option value="FullTimeJob">Full Time Job</option>
<option value="FullTimeLearner">Full Time Learner</option>
<option value="NotToSay">Prefer Not to Say</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="left">
<label for="role">How likely is that you would recommend freeCodeCamp to a friend?</label>
</div>
<div class="right">
<ul class="input-list">
<li class="radio-li"><label>Definetly<input type="radio" name="recommend" class="recommend radio" value="Definetly"></label></li>
<li class="radio-li"><label>Maybe <input type="radio" name="recommend" class="recommend radio" value="Maybe"></label></li>
<li class="radio-li"><label>Not Sure <input type="radio" name="recommend" class="recommend radio" value="NotSure"></label></li>
</ul>
</div>
</div>
<div class="row">
<div class="left">
<label for="role">Things that should be improved in the future.(Check all that apply):</label>
</div>
<div class="right">
<ul class="input-list">
<li class="checkbox-li"><label>Front-end Projects: <input type="checkbox" name="sports" class="checkbox" value="Front-end Projects"></label></li>
<li class="checkbox-li"><label>Back-end Projects: <input type="checkbox" name="sports" class="checkbox" value="Back-end Projects" ></li>
<li class="checkbox-li"><label>Challenges: <input type="checkbox" name="sports" class="checkbox" value="Challenges"></label></li>
</ul>
</div>
</div>
<div class="row">
<div class="left">
<label for="role"> Any Comments or Suggestions?</label>
</div>
<div class="right">
<textarea rows="4" cols="30" name="comment" form="usrform">Enter your comment here...</textarea>
</div>
</div>
I'm getting an error as I tried using compturnon as the label for, but it didn't work can anyone let me know what it should be? If I put yes it works but I'm not sure if that's totally correct.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fix This - Computer Repair Reporting</title>
<meta content="width=device-width, maximum-scale=1, initial-scale=1" name="viewport">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/assets/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png" />
</head>
<body>
<div id="container">
<header><h1>Computer Repair Reporting</h1></header>
<form action="http://webdevbasics.net/scripts/demo.php" method="post">
<div>
<p>There are several methods for reporting a problem at problem to ITS, the easiest way
is the fill out the form below and submit it to ITS. If you need immediate assistance or are not able to describe the issue, please call <i>1-888-FIX-THIS.</i></p>
</div>
<div>
<fieldset>
<legend><strong>Personal Information</strong></legend>
<div class="spacings">
<label for="fullname">Full Name:</label>
<input id="fullname" name="fullname" type="text" placeholder="First and last name" required>
</div>
<div class="spacings">
<label for="email">Email:</label>
<input id="email" name="email" type="email" placeholder="jsmith#gmail.com" required>
</div>
<div>
<label for="phone">Phone Number:</label>
<input id="phone" name="phone" type="tel" placeholder="(###) ###-####" required>
</div>
</fieldset>
</div>
<div>
<fieldset>
<legend><strong>Fix It Information</strong></legend>
<div class="spacings">
<label for="room">Select Your Room:</label>
<select id="room" name="room" required>
<option disabled selected value="">
Choose a room
</option>
<option value="S308">
S308
</option>
<option value="S324">
S324
</option>
<option value="L2">
L2
</option>
<option value="ME201">
ME201
</option>
<option value="ME208">
ME208
</option>
</select><br>
</div>
<div class="spacings">
<label for="machinenum">Select Your Machine Number (1 - 15): </label>
<input id="machinenum" name="machinenum" type="number" min="1" max="15" value="" placeholder="#" required><br>
</div>
<div class="spacings">
<p>Does the computer turn on?</p>
<input id="yes" name="compturnon" type="radio" value="yes" required>
<label for="yes">Yes </label>
<input id="no" name="compturnon" type="radio" value="no">
<label for="no">No </label>
</div>
<div class="spacings">
<label for="reportdate">Reporting Date:</label>
<input id="reportdate" name="reportdate" type="date" required>
</div>
<div>
<label for="message">Brief Description of Problem(s):</label><br>
<textarea id="message" name="message" cols="50" rows="5" placeholder="Please indicate the problem(s) you are experiencing" required></textarea>
</div>
</fieldset>
</div>
<div>
<p>Please submit this form and we will attempt to get the issue fixed within 12 hours.</p>
</div>
<input type="submit" value="Fix me">
<input type="reset" value="Reset">
</form>
</div>
<footer>
<small>© 2016 Michael Manieri</small>
</footer>
</body>
</html>
CSS
body, input[type=submit], input[type=reset] {
background-color: #333333;
color: #fff;
font-family: Arial,Helvetica,sans-serif;
font-size:16px;
}
h1 {
color:#E60957;
font-size:35px;
margin-bottom:30px;
letter-spacing:1px;
text-align: center;
}
input[type=submit], input[type=reset]{
background:#E60957;
border:2px solid #E60957;
border-radius:15px;
font-size:14px;
padding:5px 15px;
}
input[type=submit]:hover, input[type=reset]:hover {
background-color:#B73F69;
border:none;
}
fieldset {
border-color:#E60957;
margin-bottom:25px;
width:545px;
}
legend {
color:#E60957;
font-size:20px;
margin-bottom:5px;
}
#container, footer {
margin:25px auto;
width:575px;
}
.spacings {
margin-bottom:15px;
}
First off, change the second input's value to no.
Second, replace the first label with a fieldset/legend, and since you used a fieldset already, this one does not have a border and set your legend color back to black
fieldset.borderless {
border: none;
margin: 0;
padding: 0;
}
fieldset.borderless legend {
color: black;
padding: 0;
}
<fieldset class="borderless">
<legend>Does the computer turn on</legend>
<input id="yes" name="compturnon" type="radio" value="yes" required>
<label for="yes">Yes </label>
<input id="no" name="compturnon" type="radio" value="no">
<label for="no">No </label>
</fieldset>
Here is you original code, updated
body,
input[type=submit],
input[type=reset] {
background-color: #333333;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
h1 {
color: #E60957;
font-size: 35px;
margin-bottom: 30px;
letter-spacing: 1px;
text-align: center;
}
input[type=submit],
input[type=reset] {
background: #E60957;
border: 2px solid #E60957;
border-radius: 15px;
font-size: 14px;
padding: 5px 15px;
}
input[type=submit]:hover,
input[type=reset]:hover {
background-color: #B73F69;
border: none;
}
fieldset {
border-color: #E60957;
margin-bottom: 25px;
width: 545px;
}
legend {
color: #E60957;
font-size: 20px;
margin-bottom: 5px;
}
#container,
footer {
margin: 25px auto;
width: 575px;
}
.spacings {
margin-bottom: 15px;
}
fieldset.borderless {
border: none;
margin: 0 0 15px 0;
padding: 0;
}
fieldset.borderless legend {
color: white;
padding: 0;
font-size: 16px;
}
<div id="container">
<header>
<h1>Computer Repair Reporting</h1>
</header>
<form action="http://webdevbasics.net/scripts/demo.php" method="post">
<div>
<p>There are several methods for reporting a problem at problem to ITS, the easiest way is the fill out the form below and submit it to ITS. If you need immediate assistance or are not able to describe the issue, please call <i>1-888-FIX-THIS.</i>
</p>
</div>
<div>
<fieldset>
<legend><strong>Personal Information</strong>
</legend>
<div class="spacings">
<label for="fullname">Full Name:</label>
<input id="fullname" name="fullname" type="text" placeholder="First and last name" required>
</div>
<div class="spacings">
<label for="email">Email:</label>
<input id="email" name="email" type="email" placeholder="jsmith#gmail.com" required>
</div>
<div>
<label for="phone">Phone Number:</label>
<input id="phone" name="phone" type="tel" placeholder="(###) ###-####" required>
</div>
</fieldset>
</div>
<div>
<fieldset>
<legend><strong>Fix It Information</strong>
</legend>
<div class="spacings">
<label for="room">Select Your Room:</label>
<select id="room" name="room" required>
<option disabled selected value="">
Choose a room
</option>
<option value="S308">
S308
</option>
<option value="S324">
S324
</option>
<option value="L2">
L2
</option>
<option value="ME201">
ME201
</option>
<option value="ME208">
ME208
</option>
</select>
<br>
</div>
<div class="spacings">
<label for="machinenum">Select Your Machine Number (1 - 15):</label>
<input id="machinenum" name="machinenum" type="number" min="1" max="15" value="" placeholder="#" required>
<br>
</div>
<fieldset class="spacings borderless">
<legend>Does the computer turn on</legend>
<input id="yes" name="compturnon" type="radio" value="yes" required>
<label for="yes">Yes </label>
<input id="no" name="compturnon" type="radio" value="no">
<label for="no">No </label>
</fieldset>
<div class="spacings">
<label for="reportdate">Reporting Date:</label>
<input id="reportdate" name="reportdate" type="date" required>
</div>
<div>
<label for="message">Brief Description of Problem(s):</label>
<br>
<textarea id="message" name="message" cols="50" rows="5" placeholder="Please indicate the problem(s) you are experiencing" required></textarea>
</div>
</fieldset>
</div>
<div>
<p>Please submit this form and we will attempt to get the issue fixed within 12 hours.</p>
</div>
<input type="submit" value="Fix me">
<input type="reset" value="Reset">
</form>
</div>
<footer>
<small>© 2016 Michael Manieri</small>
</footer>
Per MDN’s <label> docs:
for
The ID of a labelable form-related element in the same document as the label element. The first such element in the document with an ID matching the value of the for attribute is the labeled control for this label element.
A label element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.
Though if you want to “label” more than one field, you should wrap them in a <fieldset> and use a <legend>. E.g.
<fieldset class="spacings">
<legend>Does the computer turn on</legend>
<input id="yes" name="compturnon" type="radio" value="yes" required>
<label for="yes">Yes</label>
<input id="no" name="compturnon" type="radio" value="yes">
<label for="no">No</label>
</fieldset>
<div class="spacings">
<span>Does the computer turn on?</span>
<input id="compturnon_yes" name="compturnon" type="radio" value="yes" />
<label for="computernon_yes">Yes </label>
<input id="computernon_no" name="compturnon" type="radio" value="yes" />
<label for="computernon_no" name="compturnon" type="radio" value="no">No</label>
</div>
Would be an example of correct usage of the "label" tag and its "for" attribute -- The "for" attribute is used to specify the ID of the element to which the label applies; each "for" attribute make must reference a unique form element.
In your case you have not defined such an element.
For more information, see: https://www.w3.org/wiki/HTML/Elements/label
I have made a form website that is supposed to look somewhat like this photo:
So far I have had trouble with the second rows sections and the aside as well. Here is a photo for example:
As you can see the photo shows the second row having my "Credit Check" aside at the bottom for some reason, and my "Reserved" properly at the right.
Now what is even more strange that I don't know how to fix is when I snap the page to the side (ignore the code on the other side, the code will be provided):
As you can see the second row looks somewhat as it should as it should be side by side to each other, however it isn't all the way to the left when the second row starts, but to the center?
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>int222_162d16 - Assignment 3 - Home Page</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" />
</head>
<body>
<form action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/cardApplication.cgi" method="post" id="application" name="application">
<fieldset>
<legend class="t"><img src="https://zenit.senecac.on.ca/~emile.ohan/int222/bank-logo.png"alt="Assignment #3" />Seneca Bank - Credit Card Application</legend>
<aside class="l">
<fieldset>
<legend>Primary Applicant's Information</legend>
First Name* <input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus"> <br />
Surname* <input type="text" name="sName" id="sName" size="20" maxlength="30"> <br />
Date of Birth* <input type="text" name="dob" id="dob" size="10" maxlength="9" placeholder="MMMDDYYYY"> <br />
Email Address* <input type="text" name="email" id="email" size="20" maxlength="60"> <br />
Phone No.* <input type="text" name="phone" id="phone" size="20" maxlength="12"> <br />
</fieldset>
</aside>
<section class="s">
<fieldset>
<legend>Primary Applicant's Address</legend>
Home Address* <input type="text" name="address" id="address" size="30" maxlength="60">
Apt. <input type="text" name="apt" id="apt" size="5" maxlength="4"> <br />
City* <input type="text" name="city" id="city" size="20" maxlength="40"> <br />
Province* <select id="province" name="province" size="2">
<optgroup label="Province">
<option value="">(Select a Province)</option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland & Labrador">Newfoundland & Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">PE</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
</optgroup>
<optgroup label="Territory">
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</optgroup>
</select>
Postal Code* <input type="text" name="postal" id="postal" size="8" maxlength="7" placeholder="ANA NAN"> <br />
</fieldset>
</section>
<aside class="r">
<fieldset>
<legend>Housing Status</legend>
Do you <input type="checkbox" name="hStatus" id="s01" value="Own" />Own the property
<input type="checkbox" name="hStatus" id="s02" value="Rent" />Rent the property
$Monthly Payment* <input type="text" name="payment" id="payment" size="8" maxlength="6"> <br />
Monthly Income* <input type="text" name="income" id="income" size="8" maxlength="6"> <br />
Years at current location* <input type="text" name="currYears" id="currYears" size="3" maxlength="2"> <br />
Pre-authorized Code* <input type="text" name="preCode" id="preCode" size="8"> <br />
</fieldset>
</aside>
<section class="s">
<fieldset>
<legend>Reserved - See below</legend>
<p><b>If you submit your application with errors and/or omissions, a list of errors and/or omissions will
show here. Make the corrections and re-submit.</b></p>
<p><b>If you continue to have a problem submitting your application, make a note of the Reference No.
and call us at 1-800-010-2000.</b></p>
</fieldset>
</section>
<aside class="l">
<fieldset>
<legend>Credit Check / Email Consent</legend>
I consent to have a credit check performed<br />
<input type="checkbox" name="creditCheck" id="c01" value="Yes" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" />No
<br />
I consent to have email messages sent to me<br />
<input type="radio" name="emailConsent" id="m01" value="Yes" />Yes
<input type="radio" name="emailConsent" id="m02" value="No" />No
<br />
Submitted on : CURRENT Date
Ref. # <input type="text" name="refNo" id="refNo" size="8" readonly="readonly"> <br />
<!--Submit Application--> <input type="submit" value="Submit Application">
<!--Start Over--> <input type="reset" value="Start Over">
<input type="hidden" name="hName" id="hName" value="Mahmood"> <br />
<input type="hidden" name="hId" id="hId" value="int222_162d16"> <br />
</fieldset>
</aside>
</fieldset>
</form>
<footer class=f>
My zenit Account My JavaScript My CSS My Honesty
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>
</body>
</html>
My CSS:
footer.f
{
text-align: center;
}
legend
{
border: 4px groove #ff0000;
background-color: #9999ff;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
padding: 15px;
text-shadow:0.1em 0.1em 0.01em #333;
}
legend.t
{
vertical-align: top;
}
fieldset
{
border-color:#F00;
border-style: solid;
}
html, body
{
max-width: 100%;
/*overflow-x: hidden;*/
margin:0;
}
aside.r
{
float: right;
width: 31%;
margin: 1%;
}
aside.l
{
float: left;
width: 31%;
margin: 1%;
}
section.s /*shadow on sections*/
{
width: 31%;
margin: 1%;
display: inline-block;
}
The problem you are experiencing is due to floats - your boxes in the top row are uneven in height, so the boxes in the second row are affected.
The answer is to wrap each row of elements in a div, then apply clearfix - a CSS method for ensuring sets of floated elements do not affect the rest of the page.
Brief HTML example:
<div class="clearfix">
<div>floated element</div>
<div>floated element</div>
<div>floated element</div>
</div>
CSS for clearfix:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
Note: It seems you are combining display: inline-block and float: left or float: right to achieve the layout you are looking for - I would strongly recommend using one method to create your basic grid, in this case probably floats. Furthermore, you might benefit from switching to Bootstrap or another responsive grid framework for this kind of layout.
See for more working example: http://jsbin.com/pegopir/edit?html,css,output
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<meta charset="utf-8">
<title> Contact page </title>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li> Index </li>
<li> Learning Log </li>
<li> Contact </li>
</ul>
</nav>
</header>
<h1> Contact page </h1>
<form>
<fieldset>
<legend>Contact Information</legend>
<p><label >first_name*: <input type="text" name="first_name*" required></label></p>
<p><label >last_name*: <input type="text" name="last_name*" required></label></p>
<p><label >phone_number*: <input type="number" name="number*" required></label></p>
</fieldset>
<fieldset>
<legend>Radio</legend>
<label > contact_permission* </label><br>
<input type="radio" name="rating" required value="1 hour"> Yes <br/>
<input type="radio" name="rating" value="2 hours"> No <br/>
</fieldset>
<fieldset>
<legend>Dropdown List</legend>
<label>best_time_to_contact*: </label>
<select required>
<option value="">Please Select</option>
<option value="1"> Morning</option>
<option value="2"> Afternoon</option>
<option value="3"> Evening</option>
</select>
</fieldset>
<fieldset>
<legend>Check box</legend>
<label > how_can_i_contact_you </label><br>
<input type="checkbox" name="Phone" value="Phone"> Phone<br>
<input type="checkbox" name="Email" value="Email"> Email <br>
</fieldset>
<br>
<input type="submit" name="Submit" value="Submit">
</form>
</div>
</body>
</html>
Not quite sure how to go about this, i have tried to do text-align: left and text-align: right within the style section but no changes occur when I add this. I don't know any other way to do it. https://jsfiddle.net/tyvx60zc/ here is a jsfiddle of the code with my external css. any help would be greatly appreciated
label {
display: block;
text-align: initial;
}
label>input {
float: right;
}
Remove text-align: center; from the wrapper, and instead use:
input {
display: inline-block;
position: relative;
}
label {
display: inline-block;
width: 200px;
text-align: right;
}
https://jsfiddle.net/abalter/tyvx60zc/1/
FWIW, I also prefer using <label for="...
Add the following CSS into your CSS file:
p label{
width: 35%;
display: inline-block;
text-align: left;
}
p label input{
float: right;
}
I was given a homework assignment to re-create a site that he made Here.
I have gotten it to look almost similar but cant seem to find out how to get the radio bubbles to the right of the checkbox items.
I did some research and have tried verticle-align but that has not worked out.
This is the HTML that I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type= "text" name="corpName" id="corpName" size="40" /></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40" /></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40" /></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15" /></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15"</label>
</fieldset>
<fieldset>
<legend>Service Information</legend>
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount" />Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice" />Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod" />Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form" /> <input type="reset" />
<br>
<form>
</div>
</body>
And here is my CSS:
/*CSS Document*/
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
vertical-align: middle;
}
Any help would be great.
Here try this fiddle
http://jsfiddle.net/Lsh3rqLj/3/
I just wrapped the checkboxes in a div and set both the checkboxes and radiobuttons div's float to left.
#radioButtons{
vertical-align: middle;
float: left;
}
#first{
float:left;
}
The float is what you need here. you can play with it some more to get a perfect positioning.
EDIT: IF you wanted to make it EXACTLY like you are instructed in your assignment add padding-top: 10px; to your checkboxes. I have updated the fiddle to give you the exact effect as you'd see in the img you posted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type="text" name="corpName" id="corpName" size="40"></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40"></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40"></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15"></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15" <="" label="">
</label></fieldset>
<fieldset style="
">
<legend>Service Information</legend>
<div id="checkBox"><input type="checkbox" name="Delivery" id="Delivery" value="yes"> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes">Confirmation<br>
</div>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount">Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice">Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod">Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form"> <input type="reset">
<br>
</form>
</div>
</body>
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
float:left;
}
#checkBox{
float:left;
}
please remember that always wrap the content with a div tag. so you will not face such problems.
here is the working demo: Working Demo
wrap the check boxes with a div tag, later give float left for both div id
i hop this will be helpful to you...
You can get the <input type="radio"> elements to align properly by adding a div element around the checkboxes and then floating the checkboxes and radio elements left. You should also add padding to the checkboxes for consistency.
HTML:
<div id="checkboxes"> <!-- add this div -->
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
</div>
CSS:
#checkboxes {
float: left;
padding-top: 10px;
}
#radioButtons {
float: left;
}
Try it Online!