I have the following html code:
<div class="mdc-text-field steps_div" id="textfeild">
<input type="number" class="mdc-text-field__input" id="steps" name="name">
<label class="mdc-floating-label" for="steps">Steps</label>
<div class="mdc-line-ripple"></div>
</div>
This CSS centers the text box:
div#textfeild {
display: block;
margin: 0 auto;
width: 250px;
}
But this doesn't:
.steps_div {
display: block;
width: 250px;
margin: 0 auto;
}
Why does the first works and the second doesn't?
Using an id in CSS has higher priority than class.
In your case div#textfeild has more weight to css than .steps_div.
Even if you use .steps_div after div#textfeild - the first one will be leader, because of the weight and unique quality of id.
Related
I'm trying to help my mom out over break making a webform she can use in her office and I'm 100% self taught, so any help is incredibly appreciated. Basically, I'm trying to put an image fully left aligned on the page with a table directly under it, a larger table to the right of the image, and another table to the right of that. Right now, I can't get the first table to be directly under the image- it keeps going left aligned but under the second table (which is much larger than the first)
Here's the code I have so far:
<img src="{{logo}}" style="float:left; height: 80px; width: auto; cursor: pointer; padding: 5px;"><div>
<table style="float:right; background-color:#CCCCCC" border="1"><tbody><tr><td width="125px">#: <u>{{customerID}}</u><br>Sq Ft:<u><input type="text" style="width:50px"></u><br>Linear Ft:<u><input type="text" style="width:50px"></u><br><input type="checkbox">Live Infestation<br><input type="checkbox">Prevention<br><div style="padding-left:20px">Treatment</div><br><br><small><i></i></small><i></i><center><i><small>For Office Use Only</small></i></center></td></tr></tbody></table>
<table style="float:left; margin-left:100px" border="1"><tbody><tr><td style="text-align:center"><b>Termite Inspection Graph & Treatment Specifications</b></td></tr><tr><td style="line-height:1.4"><u>{{customerName}}</u><br><small>Name</small><br><u>{{customerAddress}} {{customerCity}} {{customerState}} {{customerZip}}</u><br><small>Address/Zip Code</small><br><u>{{customerPhone}}, {{customerEmail}}</u><br><small>Phone, Email</small><br><u>{{billingAddress}} {{billingCity}} {{billingState}} {{billingZip}}</u><br><small>Bill To Address</small><br><u><input type="text"></u><br><small>Agreement/Treatment is limited to the one structure listed above unless specified here</small></td></tr></tbody></table><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><table style="float:left; background-color:#D0F0C0" border="1"><tbody><tr><td><small><input type="checkbox"> Sentricon + Termidor <br><input type="checkbox"> Sentricon + Altriset<br><input type="checkbox"> Termidor Only<br><input type="checkbox"> Altriset Only<br><input type="checkbox"> Sentricon Only</small></td></tr></tbody></table></div>
For reference, it's the last chunk of code I'm having trouble with. Side note, the software she is using does not allow me to edit the CSS, so everything I do needs to be within the HTML code itself.
All help appreciated!!
If you have the ability to use css in the HTML page within tags this should work for you:
#media part of the CSS is to make the columns stack instead of sit next to each other on a narrow screen such as a phone; make sure to do testing and tweaking with the actual content to see if it behaves as intended.
<html>
<head>
<style>
body { /*display: inline-block;*/ }
#image { width: 25%; margin: 15px;}
#righttable { float: left; width: 20%; margin: 10px;}
#lefttable { float: left; width: 20%; margin: 10px;}
#midtable { float: left; width: 50%; margin: 10px;}
div.row { width: 100%; }
#media screen and (max-width: 600px) {
#image { width: 100%; }
#righttable { width: 100%; }
#lefttable { width: 100%; }
#midtable { width: 100%; }
}
</style>
</head>
<body>
<div class="row">
<img id="image" src="{{logo}}" style="height: 80px; width: auto; cursor: pointer; padding: 5px;"></div>
<div class="row">
<div id="lefttable">
<table style="background-color:#D0F0C0" border="1"><tbody><tr><td><small><input type="checkbox"> Sentricon + Termidor <br><input type="checkbox"> Sentricon + Altriset<br><input type="checkbox"> Termidor Only<br><input type="checkbox"> Altriset Only<br><input type="checkbox"> Sentricon Only</small></td></tr></tbody></table></div>
<div id="midtable"><table style=" /*margin-left:100px*/" border="1"><tbody><tr><td style="text-align:center"><b>Termite Inspection Graph & Treatment Specifications</b></td></tr><tr><td style="line-height:1.4"><u>{{customerName}}</u><br><small>Name</small><br><u>{{customerAddress}} {{customerCity}} {{customerState}} {{customerZip}}</u><br><small>Address/Zip Code</small><br><u>{{customerPhone}}, {{customerEmail}}</u><br><small>Phone, Email</small><br><u>{{billingAddress}} {{billingCity}} {{billingState}} {{billingZip}}</u><br><small>Bill To Address</small><br><u><input type="text"></u><br><small>Agreement/Treatment is limited to the one structure listed above unless specified here</small></td></tr></tbody></table><br></div>
</div>
<div id="righttable">
<table style=" background-color:#CCCCCC" border="1"><tbody><tr><td width="125px">#: <u>{{customerID}}</u><br>Sq Ft:<u><input type="text" style="width:50px"></u><br>Linear Ft:<u><input type="text" style="width:50px"></u><br><input type="checkbox">Live Infestation<br><input type="checkbox">Prevention<br><div style="padding-left:20px">Treatment</div><br><br><small><i></i></small><i></i><center><i><small>For Office Use Only</small></i></center></td></tr></tbody></table></div>
</body>
</html>
Update: this works by cheating the system and just putting the top image as the first row of the table that needs to be directly under it
I have a very simple form. The usual: a label and an input. The goal is to create a simple and responsive form. Everything works ok, except when the form contains a select input that is too large. For some reason, the select input does not shrink when the browser is resized. The other inputs (input, textarea) do shrink as the browser is resized.
I've tried using max-width: 100% on the select input, as other people suggested here, with no success.
I've created a jsfiddle that explains everything:
https://jsfiddle.net/ampr41po/3/
Here's the HTML
<div class="form-main">
<form action method>
<div class="controlUnit">
<div class="label">
<label for="firstname">First name</label>
</div>
<div class="control">
<input id="firstname" name="firstname" type="text" autofocus value="">
</div>
</div>
<div class="controlUnit">
<div class="label">
<label for="name">Name</label>
</div>
<div class="control">
<select id="name" name="name">
<option value="1">Name goes here</option>
<option value="2">Name</option>
<option value="3">This is a very very very very very long name. The name is mwpekng erter erter erter 4et erter 4ertye rwe 45y 43 rt rty rty rt rty rty </option>
<option value="4">Another name</option>
</select>
<span class="icon-item"></span>
<span class="icon-item"></span>
<span class="icon-item"></span>
</div>
</div>
</form>
</div>
CSS:
* {
box-sizing: border-box;
}
.form-main {
background-color: red;
max-width: 500px;
margin: 0 auto;
padding: 20px 15px;
}
.controlUnit {
display: flex;
}
.controlUnit .label {
flex: 0 0 100px;
text-align: right;
padding-right: 10px;
}
.controlUnit .control {
flex: 1 1 auto;
display: flex;
}
select {
max-width: 100%;
}
input#firstname {
width: 100%;
}
.icon-item {
width: 20px;
height: 20px;
background-color: yellow;
margin-left: 10px;
}
.icon-item ~ .icon-item {
margin-left: 5px;
}
Try using width: 100%, instead of max-width: 100% for select in your CSS code in order to have a responsive select element at all screen sizes.
Your approach to set max-width: 100% is wrong, because select elements are form control elements and thus have to follow some implicit rules. For instance, the width of a select element cannot be made narrower than its widest option when using max-width. That's made that way by the browser and there's nothing you can do to change it. So, unless you set the width explicitly, there is no other way to achieve a responsive design.
Check out the updated jsfiddle here.
I'm using a form like the following:
<form action="#" method="post">
<div class="row">
<label for="email">E-Mail</label>
<input type="text" name="email" id="email">
</div>
<div class="row">
<label for="password">Password</label>
<input type="password" name="password" id="password">
<br>
<label for="passwordRepeat">Repeat Password</label>
<input type="password" name="passwordRepeat" id="passwordRepeat">
</div>
<div class="row">
<label for="phonenumber">Phone Number</label>
<input type="text" name="phonenumber" id="phonenumber">
</div>
</form>
with the following styles:
.row {
background-color: #eee;
margin-bottom: 10px;
padding: 5px;
}
.row > * {
display: inline-block;
vertical-align: middle;
}
.row > label {
width: 200px;
}
Take a look at the JSFiddle.
I'm using a <br> tag to break the line between a bunch of elements with the property display: inline-block. I'm aware that it is of course bad practice to use <br> instead of margin and padding. That's the reason it became so unpopular.
As far as I know there is no good reason to not use a single <br> tag in an inline element as it is intended to be: As a line break in text without creating a new text section. With display: inline-block, you simulate the inline behaviour to your block elements. Spaces between elements appear as they would in an inline element.
In my case, the <br> is used instead of two wrapper <div>'s. I do like my HTML code clean, so I hesitate in using to many wrapper <div>'s. Is it bad practice to use a <br> in this exact case? I think it is very clear what happens here, if you just read the HTML flie. What do you think about that (without any prejudgments about <br> in general)?
I believe the answer is Yes. <br /> is for line breaks in text and not for positioning, But I will give you a situation where it would hurt you in the long run. Say you have a mobile layout for your fields, and you want them to be 100% width on small screens - with labels above... and then in another case you want them to vertically align next to another... and then in another situation land in a grid like setup. Those linebreaks are going to become cumbersome.
Here is a jsFiddle of that.
I did see someone using them in a clever way where they used display: none; on them at certain break points that rendered them inactive. I didn't expect that to work. I can only really imagine using them for:
Cosmo magazine
style - huge
text layouts
and even then I would use lettering.js to insert spans. But hey --- it's not that people will say you were wrong... it's what does the job best. And I don't think that <br /> ever really suits positioning.
With HTML5, it seems like everything has an element now, so div's are for positioning. That seems pretty semantic to me.
HTML
<div class="input-wrapper">
<label data-required="required">E-Mail</label>
<input type="email" name="email" />
</div>
CSS
.your-form .input-wrapper {
width: 100%;
float: left;
margin-bottom: 2em;
}
.your-form label {
display: block;
width: 100%;
float: left;
}
[data-required="required"]:after{
content: "*";
color: red;
font-size: .8em;
vertical-align: top;
padding: .2em;
}
.your-form input{
display: block;
width: 100%;
float: left;
}
#media screen and (min-width: 28em) {
.your-form label {
width: auto;
float: none;
display: inline-block;
vertical-align: middle;
min-width: 10em;
}
.your-form input{
width: auto; /* overide previous rule */
float: none; /* overide previous rule */
display: inline-block; /* center vertically */
vertical-align: middle; /* center vertically */
/* min-width: 20em; */
font-size: 1.4em; /* just to show vertical align */
}
} /* end break point */
Yes, as you are using a content element for styling.
It might be shorter, but that doesn't mean it's cleaner.
Adding elements just for styling purposes should be avoided if possible.
And in this case it's possible: Demo
HTML:
<form action="#" method="post">
<div class="row">
<label>E-Mail <input type="text" name="email" /></label>
</div>
<div class="row">
<label>Password <input type="password" name="password" /></label>
<label>Repeat Password <input type="password" name="passwordRepeat" /></label>
</div>
<div class="row">
<label>Phone Number <input type="text" name="phonenumber" /></label>
</div>
</form>
CSS:
.row {
background-color: #eee;
margin-bottom: 10px;
padding: 5px;
}
.row > label {
display: block;
overflow: hidden;
width: 350px;
}
.row > label > input {
float: right;
}
I would avoid it where possible. You may be able to achive what you want, and not use floats by adding a margin to the input element like:
.row > input
{
margin-right:50%;
}
http://jsfiddle.net/pwtA4/
You may need to add some media queries if you want for smaller view ports
I am designing a web page with multi line Label name & input type file. i tried very hard to arrange in same line sequence but failed to do. Is there any idea about it?
please take a look enter link description here , it looks very ugly and
I am not really sure what you are looking for, but check out the jsfiddle changes I had made. I modified both CSS classes a little bit.
Have a look at this tutorial: http://www.websiteoptimization.com/speed/tweak/forms/
You can check this fiddle with the following modifications:
removing deprecated attributes align from div and moving inlined CSS style (style attribute) to the CSS file
same for b element used for the text of the label: span is better, and it's already bold as its parent. Or font-weight: bold; would be added in CSS
display: inline-block; is used instead of floats. No need to clear them afterward. IE7 and 6 need a fix (in comment) if you support them. This allow you to give the element a width (like you could do with any block element) and still get them on the same horizontal line (like you could do with any inline element). You'll have 4px due to whitespace in your HTML code, because whitespace shows up in inline element like two span separated by a space but there's a fix.
HTML code
<div id="divid1">
<p>
<label class="labelname"> <span> select Image* :</span>
<input type="file" name="file1" class="hide-file" />
</label>
</p>
<p>
<label class="labelname"> <span>XML File* :</span>
<input type="file" name="file2" class="hide-file" />
</label>
</p>
</div>
CSS
#divid1 {
padding: 50px;
}
.labelname {
width: 100%; /* or at least approx. 380px */
min-height: 30px;
display: block;
background: lightgreen;
font-weight: bold;
margin-bottom: 2px;
}
/* Only for IE7 */
/*.labelname span,
.hide-file {
display: inline;
zoom: 1;
}
*/
.labelname span {
display: inline-block;
width: 140px;
text-align: right;
background-color: lightblue;
}
.hide-file {
display: inline-block;
opacity:0.5;
}
now it looks good :)
html
<div id="divid1" align="center" style="padding:50px;">
<div class="formrow">
<label class="labelname" for="hide-file">Select Image* :</label>
<input type="file" name="file1" class="hide-file" />
</div>
<div class="formrow">
<label class="labelname" for="hide-file">XML File* :</label>
<input type="file" name="file2" class="hide-file" />
</div>
</div>
css
.labelname {
background: green;
font: bold 2px;
margin-bottom: 2px;
font-weight: bold;
float: left
}
.hide-file {
position: relative;
opacity: 0.5;
float: right
}
.formrow {
width: 400px
}
Im trying to get away from using the html TABLE tag, but cant figure out how to build, what I want it to look like. I have made a screenshot of me using the table tag,
How would I do this with divs or/and spans etc, and still retain the vertical alignment of the labels (firstname, lastname in this example)?
(font size and color etc is of course irrelevant here)
alt text http://img522.imageshack.us/img522/7857/forme.jpg
thankful for any input,
modano
It's good that you don't want to use the table tag for layout. The thing to keep in mind when switching is to try to make the HTML as semantical as possible. What this means might vary, since there are no real strict rules, but it could look something along these lines:
<form [..]>
<ul>
<li class="hasError">
<em class="feedback">error message here</em>
<div class="attribute">
<label for="firstName">First name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="firstName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
<li>
<em class="feedback" />
<div class="attribute">
<label for="firstName">Last name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="lastName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
</ul>
</form>
This achieves the following:
By placing the error feedback message above the divs, you can make an arbitrarily long error message without losing alignment
Each input element (and label) is kept in a single list item, thus grouping them logically. It also reads something like the following in a screen reader: "Form. List of two items. Label [...]". This gives the user a hint of that the form contains two inputs.
By adding the hasError class to a list item, you can easily target the descendant elements with CSS for error specific styling.
A sample CSS file could look something like (note that this is untested):
form li {
width: 300px;
}
form li.hasErrors {
width: 298px;
border: 1px red;
background-color: #C55;
}
form .attribute {
float: left;
clear: left;
width: 60px;
}
form .input {
float: right;
clear: none;
width: 240px;
}
form .feedback {
display: block;
padding-left: 50px;
color: red;
}
form .description {
display: block;
clear: both;
color: #888;
}
.clearBoth { display: block; clear: both; }
A very very good tutorial on creating accessible HTML/CSS forms can be found on A list Apart: Prettier Accessible Forms
Generally a fantastic site for information on how to create good, clean and accessible websites.
Simply give your labels a specific width; this will ensure your fields line up. You can also float your labels and inputs to easily break them into rows. Here's a minimal example:
<style type="text/css">
form { overflow: auto; position: relative; }
input { float: left; }
label { clear: left; float: left; width: 10em; }
</style>
<form>
<label>Field 1</label><input/>
<label>Field 2</label><input/>
<label>Field 3</label><input/>
</form>
I am no CSS expert, but this should get you started. Of course the styles should be in an external style sheet.
<html>
<head>
<style>
html {
font-size: 76%;
}
body {
font-size: 1.0em;
font-family: verdana;
}
div.input {
border: 1px solid white;
clear: left;
width: 25em;
height: 5em;
padding: 2px;
margin-bottom: 1.0em;
}
div.error {
border: 1px solid red;
}
div.label {
float: left;
width: 7em;
}
div.field {
float: left;
}
div.errormessage {
color: red;
}
div.description {
color: #bbb;
}
input.text {
width: 13em;
}
</style>
</head>
<body>
<form>
<div class="input error">
<div class="label">
<div> </div>
<label>First name:<br>(required)</label>
</div>
<div class="field">
<div class="errormessage">error message here</div>
<input type="text" name="FirstName" class="text">
<div class="description">optional description here</div>
</div>
</div>
<div class="input">
<div class="label">
<div> </div>
<label>Last name:<br>(required)</label>
</div>
<div class="field">
<div class="errormessage"> </div>
<input type="text" name="LastName" class="text">
<div class="description">optional description here</div>
</div>
</div>
</form>
</body>
</html>