I don't have experience as a web designer, but in effort to learn more about CSS, I'm doing the stylesheet for my own page. I am aware the way I'm doing it now probably sucks, is not the recommended way, but please help me understand why this isn't working.
I have this form:
<form action="/register" method="POST" id="registration_form">
<p>
<label for="username">Username</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">Password</label>
<input type="password" id="password" name="password"/>
</p>
</form>
I have included Eric Meyer's CSS reset, before including my own stylesheet, and I have this rule in my CSS:
#registration_form label {
width: 100px;
}
I also tried to put:
label {
width:100px;
}
I tried changing the value to more than 100px, but still it doesn't get applied. If it helps, I have a layout, which contains something like this:
<body>
<div id="navigation">
...
</div>
<div id="pagebox">
{% block body %}{% endblock %}
</div>
</body>
This is a jinja2 template, and the content of body is added by some different view, when it's rendered. Here are the styles for these id's:
#navigation {
text-align:center;
}
#navigation ul li {
display:inline;
margin-left:50px;
}
#pagebox {
margin-left:50px;
margin-right:50px;
height:600px;
background-color: #20f000;
}
Why isn't my label style getting applied?
I believe that <label> has the display:inline by default, so width and height do not affect it. Try adding display: inline-block to it.
Added: As member Geoff Adams noted in the comments, there are some browser compatibility issues with display: inline-block. In this specific scenarion it should work, but see here for more information.
The label element is an inline element, so the width style doesn't apply to it.
You could make the label and input element float inside the p elements. Applying overflow to the p element makes it work as a container for the floating elements:
#registration_form p {
overflow: hidden;
}
#registration_form p label {
float: left;
width: 100px;
}
#registration_form p input {
float: left;
}
Related
This just seems so simple, but I'm not even sure it's possible. I've posted on this project here before, but after coming up against this issue, I'd abandoned it for about a month. So it goes without saying, I think, that I would deeply appreciate any advice I can get. Thank you all in advance; I know questions like this are generally beneath the skill-level of folks here, but I've yet to find somewhere to find more reliable advice as I try to learn CSS.
Essentially: I need to integrate a relatively simple checkbox hack into a CMS, but the CMS strips id selectors. Hence, code that ought to look something like this:
<input type="checkbox" name="thisisaname" id="thisisanid"><label class="thisisanid" for="thisisanid">Type 1</label>
...ends up like this:
<input type="checkbox" name="thisisaname"><label class="thisisanid" for="thisisanid">Type 1</label>
Predictably, this breaks everything, and ostensibly any adaptation appears to be impossible. There is no CMS-specific alternative like ClientID=. Neither jQuery nor JavaScript are available to me (they're also stripped out by the CMS).
I am in a quandary. I'm not experienced in CSS, and this CMS (which I must use, unfortunately) is making everything ten times harder than it ought to be. So, here's my question: Is there a recommended means of overcoming limitations like this that I've missed in my research?
And... is it maybe possible to mimic this behavior using [attribute|=value] selectors in lieu of id? Honestly, I'm not even sure if this is worth pursuing, so I haven't, but could there be something to this? Or am I just spinning my gears?
This is the pared down version of the code I've been trying to integrate, by the way:
.wrap { display:flex; width:50%; vertical-align:top;}
.wrap aside {vertical-align:top;}
.wrap label {white-space:nowrap; display: block;}
.checker {background: red; padding: 50px; vertical-align:top;}
.checker {margin: 10px; display: inline-block; position: relative;}
.wrap input { display: none; }
input:checked ~ main .checker { display: none; }
#check1cont:checked ~ aside .check1cont,
#check2cont:checked ~ aside .check2cont { color: blue; }
#check1cont:checked ~ main .check1,
#check2cont:checked ~ main .check2 {display: inline-block;}
<div class="wrap">
<input type="checkbox" name="cont" id="check1cont">
<input type="checkbox" name="controllers" id="check2cont">
<aside>
<label class="check1cont" for="check1cont">Check 1</label>
<label class="check2cont" for="check2cont">Check 2</label>
</aside>
<main>
<figure class="checker check1">CHECK 1</figure>
<figure class="checker check2">CHECK 2</figure>
</main>
</div>
If the structure is known and will not change, you can rely on nth-child / nth-of-type to select your elements without even using classes. The other trick is to make the input positioned above the labels so you can trigger the checked without the need of the for.
.wrap { display:flex; width:50%; vertical-align:top;position:relative;}
.wrap aside {vertical-align:top;}
.wrap label {white-space:nowrap; display: block;}
.checker {background: red; padding: 50px; vertical-align:top;}
.checker {margin: 10px; display: inline-block; position: relative;}
.wrap input { position:absolute;width:50px;opacity:0;z-index:1; }
.wrap input:nth-of-type(2) {top:17px;}
input:checked ~ main figure { display: none; }
input:nth-of-type(1):checked ~ aside label:nth-of-type(1),
input:nth-of-type(2):checked ~ aside label:nth-of-type(2) { color: blue; }
input:nth-of-type(1):checked ~ main figure:nth-of-type(1),
input:nth-of-type(2):checked ~ main figure:nth-of-type(2) {display: inline-block;}
<div class="wrap">
<input type="checkbox" name="cont">
<input type="checkbox" name="controllers">
<aside>
<label class="check1cont" for="check1cont">Check 1</label>
<label class="check2cont" for="check2cont">Check 2</label>
</aside>
<main>
<figure class="checker check1">CHECK 1</figure>
<figure class="checker check2">CHECK 2</figure>
</main>
</div>
style:
.airport-selections {
margin-top: 10px;
.airport-input {
width: 200px;
}
}
html:
<div class="airport-selections">
<label class="airport-label" for="airport-from">
Departure:
</label>
<input type="text" class="airport-input">
</div>
If I don't nest them, the width of the input is set to 200. This also happens with all of the styles on the page.
Your CSS is invalid, there is no such thing as nesting in CSS. Only Less or Sass, but you have a long way until then.
If you want to select elements from inside others, use
.father .child{
yourstyle
}
All elements with class child from inside all elements with class father will get the style applied to them.
.airport-selections {
margin-top: 10px;
}
.airport-input {
width: 200px;
}
/*or
.airport-selections .airport-input {
width: 200px;
}
*/
<div class="airport-selections">
<label class="airport-label" for="airport-from">Departure:</label>
<input type="text" class="airport-input">
</div>
Without a CSS precompiler, there's no such thing as nested CSS styles.
Check out SASS, or LESS for nesting and other options. But what you have there doesn't do what you think it does.
I'm attempting to add a search field to a responsive sidebar, and want the field to responsively scale to the width of the sidebar, while keeping the 'submit' button at a set width, on the same line as the search field.
I've been able to mock up the effect with divs, but when applying the same styles to the form elements, the search field will always fill the full width of the form element:
http://dabblet.com/gist/5618200
I am aware that I can get this to work with percentages:
http://dabblet.com/gist/5618209
But I really would like the 'submit' button to have a set width.
What can I do to make the form behave -exactly- like the div mockup in my first example?
Not getting your question well, but do you want the text box to be width 100% and a fixed button like this?
Demo
<input type="submit" value="Search" />
<div>
<input type="text" />
</div>
input[type=submit] {
float: right;
}
input[type=text] {
width: 100%;
}
div {
overflow: hidden;
padding-right: .5em;
}
Here is a fully functional solution.
<form>
<div class="form-element textfield">
<input type="text">
</div>
<div class="form-element submit-btn">
<input type="submit" value="Search">
</div>
</form>
And the styles:
.form-element {
display: table-cell;
box-sizing: border-box;
}
.textfield {
width:100%
}
.textfield > input {
width:100%
}
Here is the example:
http://codepen.io/capynet/pen/vJBnL
This question already has answers here:
How to align input forms in HTML
(17 answers)
Closed 2 years ago.
I have a HTML form like:
<html>
Name:<input type="text"/></br>
Email Address:<input type="text"/></br>
Description of the input value:<input type="text"/></br>
</html>
Now the labels all begin in the same column but the text boxes are beginning in different positions as per the label's text length.
Is there a way to align the input fields such that, all the ":" and the text boxes, will begin in the same position, and the preceding text will be right aligned until the ":" ?
I am okay with using CSS if that can help achieving this.
Working JS Fiddle
HTML:
<div>
<label>Name:</label><input type="text">
<label>Email Address:</label><input type = "text">
<label>Description of the input value:</label><input type="text">
</div>
CSS:
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
You could use a label (see JsFiddle)
CSS
label { display: inline-block; width: 210px; text-align: right; }
HTML
<html>
<label for="name">Name:</label><input id="name" type="text"><br />
<label for="email">Email Address:</label><input id="email" type="text"><br />
<label for="desc">Description of the input value:</label><input id="desc" type="text"><br />
</html>
Or you could use those labels in a table (JsFiddle)
<html>
<table>
<tbody>
<tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr>
<tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr>
<tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr>
</tbody>
</table>
</html>
http://jsfiddle.net/T6zhj/1/
Using display table-cell/row will do the job without any width needed.
The html :
<html>
<div>
<div class="row"><label>Name:</label><input type="text"></div>
<div class="row"><label>Email Address:</label><input type = "text"></div>
<div class="row"><label>Description of the input value:</label><input type="text"></div>
</div>
</html>
The Css :
label{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
Set a width on the form element (which should exist in your example! ) and float (and clear) the input elements. Also, drop the br elements.
I know that this approach has been taken before, But I believe that using tables, the layout can be generated easily, Though this may not be the best practice.
JSFiddle
HTML
<table>
<tr><td>Name:</td><td><input type="text"/></td></tr>
<tr><td>Age:</td><td><input type="text"/></td></tr>
</table>
<!--You can add the fields as you want-->
CSS
td{
text-align:right;
}
in my case i always put these stuffs in a p tag like
<p>
name : < input type=text />
</p>
and so on and then applying the css like
p {
text-align:left;
}
p input {
float:right;
}
You need to specify the width of the p tag.because the input tags will float all the way right.
This css will also affect the submit button. You need to override the rule for this tag.
I have just given width to Label and input type were aligned automatically.
input[type="text"] {
width:100px;
height:30px;
border-radius:5px;
background-color: lightblue;
margin-left:2px;
position:relative;
}
label{
position:relative;
width:300px;
border:2px dotted black;
margin:20px;
padding:5px;
font-family:AR CENA;
font-size:20px;
}
<label>First Name:</label><input type="text" name="fname"><br>
<label>Last Name:</label><input type="text" name="lname"><br>
Eventually, our team would like to move away from tables, but it seems like div tags are so much harder to use. In the above image, the layout was created using a table, but I cant figure out how to get a basic column structure working using div tags. How can I get those buttons on the same line? HTML newbie here.
Not too difficult:
HTML:
<form id="login">
<div>
<label for="user">Username:</label>
<input id="user" type="text" size="20">
</div>
<div>
<label for="pass">Password:</label>
<input id="pass" type="password" size="20">
</div>
<div>
<input id="cancel" type="reset" value="Cancel">
<input id="submit" type="submit" value="Login">
</div>
</form>
CSS:
#login {
background-color: #FEFEDD;
border: 3px solid #7F7F7F;
display: inline-block;
padding: 20px;
text-align: right;
}
#login div {
padding: 5px;
}
#login label {
font-weight: bold;
margin-right: 5px;
}
#login #cancel {
float: left;
}
Live Demo
To be short, if you want to put many elements with div tags in the same line you should give for each div a left float and a width. For example:
<div style="width:50px; float:left;"> Element 1</div>
<div style="width:50px; float:left;"> Element 2</div>
...
As bad as it is to use tables for positioning elements on a page, forms is one exception I often make. Sure you can float your DIVs, but you're going to write a lot more code to do that than using tables. Plus we're talking about a tabular format with rows and columns. If you're not supposed to use tables for a tabular format, then why have the tags in the HTML at all?
If you give the elements a position:absolute then you can set the left: value and the top:value to align the buttons.
div#cancelbutton {
position: absolute;
top:50px;
left:30px;
}
div#loginbutton {
position:absolute;
top:50px;
left:300px;
}
This will place the element quote: relative to the first parent element that has a position other than static.
Check out http://www.w3schools.com/Css/css_positioning.asp
Maybee is better to use float:let then display: inline-block; because IE9 could display textboxes in two rows.
Check http://interestingwebs.blogspot.com/2012/10/div-side-by-side-in-one-line.html for examples.