I have an issue where my style sheet isn't applying equally to all objects of the same type. Here is my HTML:
<form method="post" action="FILLTHISINLATER" name="NewFeaturesRequest" target="_blank">
<fieldset id="CustInfo">
<legend>Customer Information</legend>
<ol>
<p>Please provide the name of the person requesting this new feature.</p>
<li>
<label id="lblFName" for="txtFName">First Name:</label>
<input type="text" name="FName" tabindex="1" id="txtFName" />
</li>
<li>
<label id="lblLName" for="txtLName">Last Name:</label>
<input type="text" name="LName" tabindex="2" id="txtLName" />
</li>
</fieldset>
<fieldset id="FeatureInfo">
<legend>New Feature Information</legend>
<p align="left">What category does this feature fit into?</p>
<div id="radios" align="left">
<ol>
<li>
<input name="fType" type="radio" value="iPhone" />iPhone</li>
<li>
<input name="fType" type="radio" value="Messaging" />Messaging</li>
<li>
<input name="fType" type="radio" value="Contacts" />Contacts</li>
</ol>
</div>
</fieldset>
<fieldset id="AgentInfo">
<legend>Support Agent</legend>
<p>Your Name: <select id="ddbxAGENT" name="ddbxAGENT" onchange="display_unlisted_agent()">
<option selected="selected">Select Your Name</option>
<option value="Allen">Allen</option>
<option value="Ash">Ash</option>
<option value="Beau">Beau</option>
</select>
</p>
</fieldset>
I cut it down quite a bit. Next, my CSS for legend and fieldset (EDITED to include suggestion from misterManSam:
fieldset {
margin:0;
padding:0;
border-top: Green 2px solid;
border-left: none;
border-right: none;
border-bottom:none;
}
legend {
font-weight: bold;
color: Navy;
padding:0;
margin:0;
}
And finally, what it actually looks like:
Why, oh why, is that green border on the second fieldset sticking out so far? The same style is used as on the other two, so what the heck is going on here? It happens in Chrome, IE, and Firefox. It's purely cosmetic, but having an error like that is unprofessional.
There is a width on #infoboxes you need to remove.
#infoboxes {
/*width:650px;*/
float:left;
padding:10px;
}
Here is a Jsfiddle!
The fieldset borders are expanding to the width of the container, whatever that may be. You didn't show the code that's drawing the blue border around the whole form. If I correct the HTML validation errors and put a width on the body tag, I get this, which appears to display correctly, i.e. all the fieldset top borders are the same width:
<head>
<style type="text/css">
body {width: 500px;}
fieldset {
margin:0px;
border-top: Green 2px solid;
border-left: none;
border-right: none;
border-bottom:none;
}
legend {
font-weight: bold;
color: Navy;
}
</style>
</head>
<body>
<form method="post" action="FILLTHISINLATER" name="NewFeaturesRequest" target="_blank">
<fieldset id="CustInfo">
<legend>Customer Information</legend>
<p>Please provide the name of the person requesting this new feature.</p>
<ol>
<li>
<label id="lblFName" for="txtFName">First Name:</label>
<input type="text" name="FName" tabindex="1" id="txtFName" />
</li>
<li>
<label id="lblLName" for="txtLName">Last Name:</label>
<input type="text" name="LName" tabindex="2" id="txtLName" />
</li></ol>
</fieldset>
<fieldset id="FeatureInfo">
<legend>New Feature Information</legend>
<p align="left">What category does this feature fit into?</p>
<div id="radios" align="left">
<ol>
<li>
<input name="fType" type="radio" value="iPhone" />iPhone</li>
<li>
<input name="fType" type="radio" value="Messaging" />Messaging</li>
<li>
<input name="fType" type="radio" value="Contacts" />Contacts</li>
</ol>
</div>
</fieldset>
<fieldset id="AgentInfo">
<legend>Support Agent</legend>
<p>Your Name: <select id="ddbxAGENT" name="ddbxAGENT" onchange="display_unlisted_agent()">
<option selected="selected">Select Your Name</option>
<option value="Allen">Allen</option>
<option value="Ash">Ash</option>
<option value="Beau">Beau</option>
</select>
</p>
</fieldset>
I note some align="left" attributes which should be replaced with CSS, but they do not appear to be the cause of the problem.
Related
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
<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 have a login form on the JSP page.
It is almost perfect except that the text field is not align up correctly. I want my text field to look like Facebook's login page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div.ex
{
width:300px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<div class="ex">
<h1>Login Page</h1>
<hr>
<form>
<p>
<label>
ID
<input type="text" name="id"/>
</label>
</p>
<p>
<label>
password
<input type="password" name="password"/>
</label>
</p>
<p>
<label><input type="checkbox" name="rememberMe">Keep me logged in</label>
<input type="submit" value="login"/>
</p>
</form>
</div>
</body>
</html>
The above is my JSP script and I appreciate someone could help me.
Start by taking the input tag out of the label. This will align the label on the left of the input field. To make the label appear above the input field give it a style of display: block;
Not sure if this is what you mean, but you can give the form elements id's and then control them with css like any other element. For example:
<style>
div.ex
{
width:300px;
padding:10px;
border:5px solid gray;
margin:0px;
}
#idBox {
margin-left: 45px;
}
#lastRow {
margin-left: 65px;
}
</Style>
<div class="ex">
<h1>Login Page</h1>
<hr>
<form>
<p>
<label>
ID
<input type="text" name="id" id="idBox"/>
</label>
</p>
<p>
<label>
password
<input type="password" name="password"/>
</label>
</p>
<p>
<div id="lastRow">
<label><input type="checkbox" name="rememberMe">Keep me logged in</label>
<input type="submit" value="login"/>
</div>
</p>
</form>
</div>
jsFiddle
do this in HTML:
<p>
<label for="id">
ID
</label>
<input type="text" name="id"/>
</p>
<p>
<label for="password">
password
</label>
<input type="password" name="password"/>
</p>
and this in CSS:
label{
display:block;
}
My css isn't the greatest but i adapted this from the visual quickstart html5 and css book
latest edition. All you do is change text-align to left or right to align the label down the right hand side or the left. If that makes sense. Hope this helps.
<form>
<ul id="about_me">
<li><label>My Height</label>
<select class="about" name="height">
option value="">Choose from list</option>
</select>
</li>
</ul>
</form>
ul#about_me label
{
display:inline-block;
padding:3px 6px;
text-align:left;
width:170px;
vertical-align:top;
}
I have the following form in a html5 document.I am a newbie as far as html and css goes.Basically,I am trying to learn with experimenting.
<form>
<ol style="list-style:none">
<li style="display: inline">
<label for="fname">First Name</label>
<input id="fname" type="text">
</li>
<li style="display: inline">
<label for="lname">Last Name</label>
<input id="lname" type="text">
</li>
<li>
<label for="dept">Department</label>
<input id="dept" type="text">
</li>
</ol>
</form>
Coming to the challenge I am facing,
1)I need to know how I can control the spacing between the label and the input field.
2)Also the space between the two li(first name and last names).
PS:I also have a CSS file which control the font,color,input width etc.
Try the following code.
For "ol li label" (in css code) you can also use margin instead of width, to control the distance between label and input items.
<head>
<style>
ol{
margin:0;
padding:0;
}
ol li{
margin:0 0 10px 0;
}
ol li label{
width:150px;
float:left;
}
ol li input{
float:left;
}
</style>
</head>
<body>
<form>
<ol>
<li>
<label for="fname">First Name</label>
<input name="fname" type="text">
</li>
<li>
<label for="lname">Last Name</label>
<input name="lname" type="text">
</li>
<li>
<label for="dept">Department</label>
<input id="dept" type="text">
</li>
</ol>
</form>
</body>
Try using margin-bottom and margin-top on your input elements.
See here for more info on margins in css.
I have the following code:
<fieldset>
<legend>
<strong>Personal Information</strong>
</legend>
<ul>
<li>
<label for="first_name">First Name</label><br />
<input type="text" id="first_name" name="first_name" value="" maxlength="30" />
</li>
...
</ul>
</fieldset>
<fieldset>
<legend>
<strong>Car Information</strong>
</legend>
<ul>
<li>
<label for="car_make">Make</label><br />
<input type="text" id="car_make" name="car_make" value="" maxlength="30" />
</li>
...
</ul>
</fieldset>
Right now everything is on the left hand side where the second fieldset (car information) is right below the first fieldset (personal information).
I would like the car information fieldset to be on the right hand side of the personal information fieldset so they are side by side. Using css, how would I do this?
Since fieldsets are considered blocks, you need to use
fieldset {
width: 200px;
float: left;
}
Or whatever you want for the width of the fieldsets.
What you can do is float both fieldsets to the left. The css would look like this:
fieldset {
float: left;
width: 200px;
}
This is going to effect every fieldset on the page, so if you want to isolate only specific fieldsets use css classes:
<style>
.FloatLeft { float: left; width: 200px;}
</style>
<fieldset class="FloatLeft">
What they said, but you can also float the car information right, which gives you the advantage of always being flush against that edge no matter the width, if that's important.
fieldset {
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px;
width: 200px;
float: left;
}
If you assign a width to your fieldsets and float the to the left, something like this:
HTML:
<fieldset class="myFieldSet">
<legend>
<strong>Personal Information</strong>
</legend>
<ul>
<li>
<label for="first_name">First Name</label><br />
<input type="text" id="first_name" name="first_name" value="" maxlength="30" />
</li>
...
</ul>
</fieldset>
<fieldset class="myFieldSet">
<legend>
<strong>Car Information</strong>
</legend>
<ul>
<li>
<label for="car_make">Make</label><br />
<input type="text" id="car_make" name="car_make" value="" maxlength="30" />
</li>
...
</ul>
</fieldset>
CSS:
.myFieldSet
{
width:300px;
float:left;
}