I have this structure for fill out forms in html
<fieldset class="signup">
<div>
<label>First Name:</label>
<asp:TextBox ID="txtFirstName" runat="server"/>
</div>
<div>
<label>Last Name:</label>
<asp:TextBox ID="txtLastName" runat="server"/>
</div>
</fieldset>
And I defined this CSS
form fieldset
{
clear: both;
border-width: 0px;
border-style: none none none none;
padding: 0px;
margin: 0px;
}
form fieldset div
{
clear: left;
display: block;
margin: 10px 0px 10px 0px;
padding: 0px;
vertical-align: central;
}
form fieldset div label {
display: block;
float: left;
/*width: 150px;*/
padding: 1px 20px 0px 0px;
text-align: left;
vertical-align: central;
}
The appareance is clean but I commented the width attribute in the last style for labels in order to make it generic in the future. So I added a new style for my specific form and added this class to the fieldset but it's not working. I lost the width of my labels so how can I fix this mistake?
form fieldset div label .signup {
width: 150px;
}
Your selector is incorrect. What you want is likely:
form fieldset.signup div label {
width: 150px;
}
On a side note, I suggest reading up on CSS Selectors to understand the syntax a bit more. See:
Selectors Level 3
MDN (Selectors)
MSDN (Understanding CSS Selectors)
This should work:
fieldset.signup div label {
width: 150px;
}
Have you tried
min-width: 150px !important;
You are using a long chain of descendant CSS selectors and there is no such hierarchy in your Document. Use comma to group selectors. White space means descendant. also, Use > to indicate direct child its more efficient than descendant.
Related
i got quite simple thing to do, but i can't find way out for that.
let's say i got form, i want to add inputs one below another, however next to one of them there will be label (only next to one of them).
I would like to make it, so all the classes are equal size (but to make it responsive). However, i would like to make that input with label next to it, to share the space with label, so it will be next to each other, not one under another if user would open that in little screen.
hope you guys got what i mean. :P
Thank you!
EDIT
<div class="mainbox-form">
<form>
<div class="mainbox-input">
<input type="text" name="store-name" placeholder="Name"><br>
</div>
<div class="mainbox-input">
<input type="text" name="store-subdomain" placeholder="Subdomain">
<label name="store-subdomain">.label.here</label><br>
</div>
<div class="mainbox-input">
<input type="email" name="store-email" placeholder="Email"><br>
</div>
<div class="mainbox-input">
<input type="password" name="store-password" placeholder="Password"><br>
</div>
</form>
</div>
.mainbox-form
{
text-align: center;
max-width: 50%;
min-width: 350px;
margin: 0 auto 0 auto;
}
.mainbox-input label
{
font-weight: bold;
color: #606060;
}
.mainbox-input
{
max-height: 57px;
}
.mainbox-input input
{
background: #f3f3f3;
width: 80%;
border: none;
color: #606060;
margin: 3px auto 3px auto;
padding: 15px 40px;
font-size: 18px;
}
.mainbox-input input[name=store-subdomain]
{
max-width: 59%;
}
.mainbox-input input:focus
{
outline: none;
}
.mainbox-input input:active
{
outline: none;
}
http://jsfiddle.net/twjw113w/
Here's the code I've got as for now. The problem I have with it is that, the labeled input is not sticked to the left, and is behaving differently. i bet you can see it yourself better there, than I would explain it.
You need to add display: inline-block and width to the label and input element that you want on the same line.
.mainbox-input label
{
font-weight: bold;
color: #606060;
display:inline-block;
width:35%;
}
.mainbox-input input[name=store-subdomain]
{
max-width: 40%;
display:inline-block;
}
Is this how you wanted it?
jsfiddle
Please remove the css property below:
.mainbox-input{
max-height: 57px;
}
Modify the css below:
.mainbox-input input[name=store-subdomain]{
max-width:100%;
}
.mainbox-input input{
width:auto;
display:table
}
.mainbox-input label{
display: table;
padding: 0px 40px;
}
Visit this url:
http://jsfiddle.net/sarowerj/e41653o4/
My fiddle pretty much shows the problem. Trying to get the labels to be on the left side of each text box if anyone could help. http://jsfiddle.net/HC64Y/
<div id="boxalign2" class="boxalign2" >
<label>Hospital*:</label><input class="rounded2" required title="Hospital is required!" name="MainHospital" type="text" />
<label>Title*:</label><input class="rounded2" name="MainTitle" type="text"/>
<label>Department*:</label> <input class="rounded2" name="MainDept" type="text"/>
</div>
css
input.rounded2 {
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 20px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
float: left;
display: inline-block;
clear: left;
width: 150px;
text-align: right;
}
You are making your inputs inline-block, but you are also floating them to the left.
If you remove the float: left and add <br> after each input, you will get the correct behavior.
http://jsfiddle.net/A8es3/
To align the boxes, add a div wrapper around each label/input, make your label inline-block with a fixed width. There are other ways to do this as well, but this is one way.
http://jsfiddle.net/A8es3/1/
As stolli mentioned, you can also simply use the label element as the wrapper:
http://jsfiddle.net/A8es3/2/
You can give to your div .boxalign2 and label fixed widths.
View the demo http://jsfiddle.net/HC64Y/11/
.boxalign2 {
width:400px;
}
label {
text-align:right;
padding-right:20px;
display:inline-block;
min-width:150px;
}
To ammend Jeff B's answer to get your result, simply give the elements a width in your css
label {width: 100px} where '100' is whatever value looks best for your layout.
Also, remember that the primary purpose of labels (as opposed to just div's or span's for labeling) is that labels act as a secondary click target for the control they are associated with. Therefore, you can wrap your elements in the label tag (<label><input /></label>) or associate them by id (<label for="foo"><input id="foo"/>) and give the user much more to click, simply by clicking the label, they can toggle the control, focus the text input, whatever. A big boon in usability for touch devices.
<!DOCTYPE html>
<html>
<head>
<title>Centering a form</title>
</head>
<body>
<div class="form">
<label>Name</label>
<input type="text" name="name">
<label>Email</label>
<input type="text" name="email">
<label>Phone</label>
<input type="text" name="phone">
</div>
</body>
</html>
<style type="text/css">
.form {
margin: 0 auto;
width: 210px;
}
.form label{
display: inline-block;
text-align: right;
float: left;
}
.form input{
display: inline-block;
text-align: left;
float: right;
}
</style>
Demo here: https://jsfiddle.net/durtpwvx/
I've tried to align the button submit and the search input but I doesn't work and I don't get to understand why.
I have this styling code:
input[type=search]
border: none
cursor: text
padding: 0
border: 1px solid #cfcfcf
.search-main input, .search-main button
height: 30px
display: inline-block
.search-main button
background: #55e0a8
border: none
width: 18%
margin-left: -7px
display:inline-block
.search-main input
width: 80%
and this html:
<form method="get" class="search-main">
<input name="q" type="search">
<button type="submit"></button>
</form>
and here's what I get:
Here's the online version
So, pretty silly question, but since I've been trying for more than 40+ minutes, thought I would try to post it here. I've been playing with firebug, padding, margins, and I don't get where the problem comes from.
You can try -
.search-main > button {
float: right;
}
Add vertical-align: middle to your inline-block elements:
.search-main input, .search-main button {
height: 29px;
display: inline-block;
vertical-align: middle;
}
Problems arise when you use height on inline elements.
You can simply remove the height and replace with padding on both elements :
.search-main input, .search-main button {
padding: 10px 0;
display: inline-block;
}
.search-main button {
background: #55e0a8
border: none
width: 18%
margin-left: -7px
display:inline-block
padding: 11px 0; // +1px for border on the input
}
It was easy, I hope the following code suffices what you needed.
.search-main button {
background: #55e0a8;
border: none;
width: 18%;
margin-left: -7px;
display: inline-block; //additional code
float: left; //additional code
vertical-align: middle; //additional code
height: 32px; //additional code
}
and this for the input:
<input name="q" type="search" style=" display: inline-block;float: left;">
So, I have a simple login page that has a light green background, and would like to change the background color to a light red when the 'loginbox' div with id = 'loginbox' also has a class 'error'. My page looks as follows:
VALID HTML http://i1154.photobucket.com/albums/p525/covertcj/ScreenShot2012-01-16at20759PM.png
with the relavent HTML looking like:
HTML (Before adding error class):
<div id="loginbox">
<span>Username:</span>
<input>
<span>Password:</span>
<input>
<button>Submit</button>
</div>
With the CSS given below, I feel that this should work; however, when adding the error class to the div, nothing happens.
CSS:
#loginbox {
margin: auto;
padding: 25px 50px;
width: 300px;
height: 100px;
border: 1px solid #e9e9e9;
background: #EBFFEF;
}
#loginbox .error {
background: #FFEBEB;
}
#loginbox input {
height: 15px;
margin: 3px 0px;
width: 190px;
float: right;
}
#loginbox span {
height: 15px;
width: 60px;
margin: 3px 0px;
padding: 3px 0px;
float: left;
}
#loginbox button {
margin-top: 30px;
float: right;
}
HTML (After after error class):
<div class="error" id="loginbox">
<span>Username:</span>
<input>
<span>Password:</span>
<input>
<button>Submit</button>
</div>
Am I possibly misusing this technique? Any help in this matter would be greatly appreciated.
Thanks,
Chris Covert
Your selector is incorrect: #loginbox .error is selecting all elements with class error contained within the element selected by #loginbox. This works exactly the same way that #loginbox input works - You're selecting input elements within the #loginbox div.
To refine a selector with additional class/attribute selectors, you need to chain them together without whitespace. In your specific example, remove the space and use:
#loginbox.error { ... }
Always remember, seperating your selectors by whitespace means you're selecting nested tags.
the problem is here:
#loginbox .error {
The #loginbox has class .error, so you need to target that with no space between:
#loginbox.error {
HTML:
<div id="loginbox" class="error">
<span>Username:</span>
<input>
<span>Password:</span>
<input>
<button>Submit</button>
</div>
Should work just fine if you change
#loginbox .error
to
#loginbox.error
Adding a space means you are styling a sub-element of #loginbox. With no space, we are selecting the <div /> with id loginbox AND having the class error
My problem is with the below html
<div class="editor-container">
<div class="editor-row curFocus">
<div class="editor-label">
<label for="FirstName">First Name</label>
</div>
<div class="editor-field">
<input class="text-box single-line valid" id="FirstName"
name="FirstName" type="text" value="Nancy" maxlength="20">
</div>
</div>
</div>
When the user selects the input field, I add class "curFocus" to the outer div via some javascript to highlight both label and the input field.
My css is -
.editor-container {
border: thin solid #444444;
display: table; width: 100%;
}
.editor-row {
width: 100%; display: table-row;
}
.editor-label {
padding-left: .4em; width: 40%;
}
.editor-label, .editor-field {
padding-right: .4em; padding-bottom: .2em; padding-top: .2em;
display: table-cell;
}
.curFocus {
border: 2px solid #05365b;
background-color: #d3e5f2;
margin: 3px; padding: 3px;
}
My problem is that while using debuggers in Chrome 12 and IE9, they both show the border settings being applied to the outer div. But, when viewing the form, neither browser display's the specified border. All other css settings work correctly. I also tried changing definition of ".curFocus" to ".curFocus div". But this applied the style to each of the nested div's also, but did display borders on all of the divs.
While I'm not a CSS expert, it is not obvious why this shouldn't work.
Edit
Here is jsfiddle link - http://jsfiddle.net/photo_tom/KmsF5/1/. While testing this it does work correctly in IE9 if in IE7 compatibly mode. Otherwise, it does not display correctly.
Sorry about not including link, still getting use to fact that jsfiddle even exists.
Well, I can tell you what's causing it, but I can't tell you why. Elements with display: table-row; can't have a border applied to them. You can apply the border to the table-cell children of the .curFocus element, but not the table-row itself.
Again, no idea why this silly rule exists, but you can fix your problem with some CSS:
.curFocus {
background-color: #d3e5f2;
margin: 3px; padding: 3px;
}
.curFocus>div {
border: 2px solid #05365b;
border-width: 2px 0px; /* top and bottom border for all the table-row's immediate children (table-cells) */
}
.curFocus>div:first-child {
border-width: 2px 0px 2px 2px; /* left border for the leftmost table-cell */
}
.curFocus>div:last-child {
border-width: 2px 2px 2px 0px; /* right border for the rightmost table-cell */
}
See http://jsfiddle.net/d772N/
I think your problem is your display type on the .editor-row. display: table-row; Remove that and the problem will go away. Plus I don't think that all browsers support display: table-row; very well.
You might need a higher CSS specificity, as it is ambiguous which CSS styles will apply with the current definitions.
Try div.curFocus rather than .curFocus div for the class definition to apply the style to the div with that class name rather than its div children.