I've a template for a register mask. I use the <p> because my input boxes does not have a id only class.
It should look like in the illustration with 2 rows. I do not like extra div's, no table. Is it possible ?
HTML (elements can be in a different order)
<div id="parent">
<p class="Useraccount-Email-Repeat-Label"></p>
<input class="Useraccount-Email-Repeat" type="text" />
<p class="Useraccount-Password-Repeat-Label"></p>
<input class="Useraccount-Password-Repeat" type="text" />
<p class="Useraccount-Email-Label"></p>
<input class="Useraccount-Email" type="text" />
<p class="Useraccount-Password-Label"></p>
<input class="Useraccount-Password" type="text" />
</div>
try this:
HTML:
<div id="parent">
<p class="Useraccount-Email-Repeat-Label"></p>
<input class="Useraccount-Email-Repeat" type="text" />
<p class="Useraccount-Email-Label"></p>
<input class="Useraccount-Email" type="text" />
<p class="Useraccount-Password-Label"></p>
<input class="Useraccount-Password" type="text" />
<p class="Useraccount-Password-Repeat-Label"></p>
<input class="Useraccount-Password-Repeat" type="text" />
</div>
CSS:
#parent p,
#parent input{margin:0 2% 2%;float:left;width:48%;display:block}
#parent input{border:1px solid #ccc; border-radius:3px}
Related
I'm trying to do some simple HTML and CSS to get a page to layout something like the image below, but I'm way out of my element and not even sure how to get it started. Right now, my biggest problem is I can't get the Client Birth Date, and Spouse First Name to appear on its own line. I feel like I could add divs, but then I'd probably have divs everywhere (I'm assuming that's a bad thing.)
Here's a JSFiddle of what I have started.
<div>
<label for="WebName">Name</label>
<input type="text" id="WebName" />
</div>
<div>
<label for="WebEmail">Email</label>
<input type="text" id="WebEmail" />
</div>
<div>
<label for="WebPhone">Phone</label>
<input type="text" id="WebPhone" />
</div>
<hr />
<div style="border: 1px solid black; overflow: hidden;">
<!-- left -->
<div style="width: 500px; float:left; border: 1px solid red;">
<label for="ClientFirstName">Client First Name*</label>
<input type="text" id="ClientFirstName" />
<label for="ClientBirthDate">Client Birth Date</label>
<input type="text" id="ClientBirthDate" />
</div>
<!-- right -->
<div style="float:left; width: 500px; border: 1px solid green;">
<label for="ClientLastName">Client Last Name*</label>
<input type="text" id="ClientLastName" />
<label for="ClientAge">Client Age</label>
<input type="text" id="ClientAge" />
</div>
</div>
<hr />
<div>
<label for="AppointmentDate">Appointment Date</label>
<input type="text" id="AppointmentDate" />
<label for="Goals">Goals</label>
<textarea id="Goals" rows="4" cols="80">
</textarea>
</div>
I would add divs in those specific cases. Form elements can be messy when it comes to layout. I've found that wrapping a label + input inside a div is the best practice here. And since you've already done that in the first section you might as well follow the pattern.
<div class="inputWraper">
<label for="thisInputName">Some Text</label>
<input type="text" name="thisInputName" value="" placeholder="What displays />
</div>
You could technically also wrap everything in the label instead of a div. This has some pros and cons mostly in that it makes everything clickable and adds focus. It's especially good for checkboxes and radio buttons as the hit area is bigger.
<label for="thisInputName">
<span>Your label text</span>
<input type="text" name="thisInputName" value="" placeholder="What displays />
</label>
I want to prevent irregular gaps between my inputs and my text. How should I do this with a CSS property?
For example that my input will be placed all over that red line:
My HTML:
<body>
<div>
<p class ="LabelInput">Programme/CP/Ville
<input type="text" id="cp" name="cp"
placeholder="" />
</p>
</div>
<div class = "Typologie">
<p class ="LabelInput">Typologie
<input type="checkbox" id="Studio" name="Studio" checked />
<label for="Studio">Studio</label>
<input type="checkbox" id="T2" name="T2" checked />
<label for="T2">T2</label>
<input type="checkbox" id="T3" name="T3" checked />
<label for="T3">T3</label>
<input type="checkbox" id="T4" name="T4" checked />
<label for="T4">T4</label>
<input type="checkbox" id="T5P" name="T5P" checked />
<label for="T5P">T5P</label>
</p>
</div>
<div class = "Type">
<p class ="LabelInput">Type
<input type="checkbox" id="Appartement" name="Appartement" checked />
<label for="Appartement">Appartement</label>
<input type="checkbox" id="Maison" name="Maison" checked />
<label for="Maison">Maison</label>
<input type="checkbox" id="Commerce" name="Commerce" checked />
<label for="Commerce">Commerce</label>
<input type="checkbox" id="Parking" name="Parking" checked />
<label for="Parking">Parking</label>
</p>
</div>
<div class = "Budget">
<p class ="LabelInput">Budget
<div id="slider-range"></div>
</p>
</div>
<div class = "Livraison">
<p class ="LabelInput">Livraison
<input type="text" id="cp" name="cp"
placeholder="" />
</p>
</div>
<div class = "Annexes">
<p class ="LabelInput">Annexes
<input type="text" id="cp" name="cp"
placeholder="" />
</p>
</div>
I'm sure it is something you can do but I can't remember or find the property.
You will need to make some adjustments to your HTML for the best results.
As p is not allowed to contain block-level elements, you can not put divs in it as seen in your Budget section.
Form the w3 site:
The P element represents a paragraph. It cannot contain block-level elements (including P itself).
Instead, add two div wrappers around your label and your content for a clean solution:
.LabelInput {
width: 30%;
display: inline-block;
}
.LabelContent {
width: 69%;
display: inline-block;
}
<div class = "Type">
<div class="LabelInput">Type</div>
<div class="LabelContent">
<input type="checkbox" id="Appartement" name="Appartement" checked />
<label for="Appartement">Appartement</label>
<input type="checkbox" id="Maison" name="Maison" checked />
<label for="Maison">Maison</label>
<input type="checkbox" id="Commerce" name="Commerce" checked />
<label for="Commerce">Commerce</label>
<input type="checkbox" id="Parking" name="Parking" checked />
<label for="Parking">Parking</label>
</div>
</div>
If you do not want to change your html, add a wrapper element like span around your label and set min-width on it. That is an easy, albeit dirty solution.
<div class="LabelInput"><span class="myLabel">Type</span></div>
.myLabel {
min-width: 200px //adjust as needed to size of biggest label
display: inline-block;
}
How can i get the element the "keys_values" div next to the text box..i.e, all the elements inside the div should be visible next to the text box
<div id="edata" class="edata" >
<input type="text" class="users_percentage" style="width:65px;" placeholder="% of users"/>
<div class="keys_values" style="float:'left';">
<span>
<input type="text" class="e_keys" style="width:65px;" placeholder="key"/>
<input type="text" class="e_values" style="width:65px;" placeholder="value"/>
</span>
</div>
</div>
I'd recommend using this:
<div id="edata" class="edata">
<input type="text" class="users_percentage" placeholder="% of users" />
<div class="keys_values">
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
</div>
</div>
CSS:
.users_percentage {
width:65px;
float:left;
margin-right:4px;
}
.keys_values {
float: left;
}
.e_keys, .e_values {
width: 65px;
}
Using the classes your elements already have allows you to separate the style and structure of the page.
Note: margin-right: 4px was only added to match the other input's style. If you're using normalize.css or similar then it might not be necessary.
Here it is working: http://jsfiddle.net/Fr3kD/1/
Update: To add extra span elements below each other use this HTML:
<div class="keys_values">
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
</div>
and add an extra CSS style:
.keys_values span{
display: block;
}
Here's a demo: http://jsfiddle.net/Fr3kD/3/
<div id="edata" class="edata" >
<div style="float:left; width:49%">
<input type="text" class="users_percentage" style="width:65px;" placeholder="% of users"/>
</div>
<div class="keys_values" style="float:left; width:49%">
<span>
<input type="text" class="e_keys" style="width:65px;" placeholder="key"/>
<input type="text" class="e_values" style="width:65px;" placeholder="value"/>
</span>
</div>
</div>
Try this
<div class="keys_values" style="float:'left';margin:-26px 0 0 70px">
DEMO
How do i move this to the right ?
<div class="contentcontainer med left">
<div class="headings alt">
<h2>Medium Width - Heading title here</h2>
</div>
<div class="contentbox">
<form action="#">
<p>
<label for="textfield"><strong>Text field:</strong></label>
<input type="text" id="textfield" class="inputbox" /> <br />
<span class="smltxt">(This is an example of a small descriptive text for input)</span>
</p>
<p>
<label for="errorbox"><span class="red"><strong>Missing field:</strong></span></label>
<input type="text" id="errorbox" class="inputbox errorbox" /> <img src="img/icons/icon_missing.png" alt="Error" /> <br />
<span class="smltxt red">(This is some warning text for the above field)</span>
</p>
<p>
<label for="correctbox"><span class="green"><strong>Correct field:</strong></span></label>
<input type="text" id="correctbox" class="inputbox correctbox" /> <img src="img/icons/icon_approve.png" alt="Approve" />
</p>
<p>
<label for="smallbox"><strong>Small Text field:</strong></label>
<input type="text" id="smallbox" class="inputbox smallbox" />
</p>
<select>
<option>Dropdown Menu Example</option>
</select> <br /> <br />
<input type="file" id="uploader" /> <img src="img/loading.gif" alt="Loading" /> Uploading...
<p> <br />
<input type="checkbox" name="checkboxexample"/> Checkbox
</p>
<p>
<input type="radio" name="radioexample" /> Radio select<br />
</p>
</form>
<textarea class="text-input textarea" id="wysiwyg" name="textfield" rows="10" cols="75"></textarea>
<p><br /><br />Buttons styles</p>
<input type="submit" value="Submit" class="btn" /> <input type="submit" value="Submit (Alternative)" class="btnalt" />
</div>
</div>
Try setting the css 'margin-left' property of the outer div to push it away from the left side of the screen.
<div class="contentcontainer med left" style="margin-left: 200px;">
(change 200 to an appropriate number).
Note: try not to use inline 'style' attribute in your final product - put it in an external stylesheet :)
if you want to move everything to right, use css "float: right".
For example:
<div class="contentcontainer med left" style="float: right">
You can offset by a set-amount with the CSS margin property:
<div class="contentcontainer med left" style="margin-left: 50px;">
I have a html form that is basically vertical but i really have no idea how to make two text fields on the same line. For example the following form below i want the First and Last name on the same line rather then one below the other.
<form action="/users" method="post"><div style="margin:0;padding:0">
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div>
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
<div>
<label for="email">Email</label>
<input id="user_email" name="user[email]" size="30" type="text" />
</div>
<div>
<label for="pass1">Password</label>
<input id="user_password" name="user[password]" size="30" type="password" />
</div>
<div>
<label for="pass2">Confirm Password</label>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
</div>
Put style="float:left" on each of your divs:
<div style="float:left;">...........
Example:
<div style="float:left;">
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div style="float:left;">
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
To put an element on new line, put this div below it:
<div style="clear:both;"> </div>
Of course, you can also create classes in the CSS file:
.left{
float:left;
}
.clear{
clear:both;
}
And then your html should look like this:
<div class="left">
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div class="left">
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
To put an element on new line, put this div below it:
<div class="clear"> </div>
More Info:
CSS Float Clear Tutorial
The default display style for a div is "block." This means that each new div will be under the prior one.
You can:
Override the flow style by using float as #Sarfraz suggests.
or
Change your html to use something other than divs for elements you want on the same line. I suggest that you just leave out the divs for the "last_name" field
<form action="/users" method="post"><div style="margin:0;padding:0">
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
... rest is same
For the sake of bandwidth saving, we shouldn't include <div> for each of <label> and <input> pair
This solution may serve you better and may increase readability
<div class="form">
<label for="product_name">Name</label>
<input id="product_name" name="product[name]" size="30" type="text" value="4">
<label for="product_stock">Stock</label>
<input id="product_stock" name="product[stock]" size="30" type="text" value="-1">
<label for="price_amount">Amount</label>
<input id="price_amount" name="price[amount]" size="30" type="text" value="6.0">
</div>
The css for above form would be
.form > label
{
float: left;
clear: right;
}
.form > input
{
float: right;
}
I believe the output would be as following:
I would go with Larry K's solution, but you can also set the display to inline-block if you want the benefits of both block and inline elements.
You can do this in the div tag by inserting:
style="display:inline-block;"
Or in a CSS stylesheet with this method:
div { display:inline-block; }
Hope it helps, but as earlier mentioned, I would personally go for Larry K's solution ;-)
You should put the input for the last name into the same div where you have the first name.
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
Then, in your CSS give your #user_first_name and #user_last_name height and float them both to the left. For example:
#user_first_name{
max-width:100px; /*max-width for responsiveness*/
float:left;
}
#user_lastname_name{
max-width:100px;
float:left;
}
You could use the {display: inline-flex;}
this would produce this:
inline-flex