With style sheets I float name, email left and nickname and school right but I would like their text boxes to start at the same point. How can I achieve this with CSS?
<div id="container" align="center">
<div id="name">Name:
<input id="name_text" type="text">
</div>
<div id="nickname">Nickname:
<input id="nickname_text" type="text">
</div>
<div id="email">Email Address:
<input id="email_text" type="text">
</div>
<div id="school">School:
<input id="school_text" type="text">
</div>
</div>
You have to use this way:
There should be <label> to make sure when the user clicks on the label text, it focuses on the respective input.
The <strong> tag has a display: inline-block making it easy to set the width.
You don't need so many ids.
You need to give name attribute to all the <input /> fields.
label strong {display: inline-block; width: 150px; text-align: left; margin: 0 0 10px;}
<div id="container" align="center">
<div id="name">
<label>
<strong>Name:</strong>
<input id="name_text" type="text" />
</label>
</div>
<div id="nickname">
<label>
<strong>Nickname:</strong>
<input id="nickname_text" type="text" />
</label>
</div>
<div id="email">
<label>
<strong>Email Address:</strong>
<input id="email_text" type="text" />
</label>
</div>
<div id="school">
<label>
<strong>School:</strong>
<input id="school_text" type="text" />
</label>
</div>
</div>
li {
list-style-type: none;
}
li p {
display: inline-block;
width: 120px;
text-align: left;
font-family: "Times New Roman";
font-style: oblique;
font-size: 14px;
}
<div id="container" align="center">
<ul>
<li>
<p>Name:</p>
<input type="text">
</li>
<li>
<p>Nickname:</p>
<input type="text">
</li>
<li>
<p>Email Address:</p>
<input type="text">
</li>
<li>
<p>School:</p>
<input type="text">
</li>
</ul>
</div>
Codepen
A little modification,copy this code and check it.
<html>
<head>
<style>
label strong {display: inline-block; width: 150px; text-align: left; margin: 0 0 10px;}
</style>
</head>
<body>
<center>
<div id="Holder" style="width:50%;">
<div id="L_div" style="float:left;">
<div id="container" align="center">
<div id="name">
<label>
<strong>Name:</strong>
<input id="name_text" type="text" />
</label>
</div>
<div id="email">
<label>
<strong>Email Address:</strong>
<input id="email_text" type="text" />
</label>
</div>
</div>
</div>
<div id="R_div" style="float:right;">
<div id="nickname">
<label>
<strong>Nickname:</strong>
<input id="nickname_text" type="text" />
</label>
</div>
<div id="school">
<label>
<strong>School:</strong>
<input id="school_text" type="text" />
</label>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
If you are a fresher in css use this site W3school for guidence
Regds
Related
I want to create three rows. In each row I want to have two textboxes with labels above them. Right now, I have this html code:
.firstRow, .secondRow, .thirdRow {
display: inline-block;
}
label, .textBox {
display: block;
}
<div class="firstRow">
<label for="name1">Name1</label>
<input class="textBox" formControlName="name1" />
<label for="name2">Name2</label>
<input class="textBox" formControlName="name2" />
</div>
<div class="secondRow">
<label for="name3">Name3</label>
<input class="textBox" formControlName="name3" />
<label for="name4">Name4</label>
<input class="textBox" formControlName="name4" />
</div>
<div class="thirdRow">
<label for="name5">Name5</label>
<input class="textBox" formControlName="name5" />
<label for="name6">Name6</label>
<input class="textBox" formControlName="name6" />
</div>
The outcome is in this link:
https://jsfiddle.net/Lcav5xje/
What should I change?
Here is the snippet using simple display:flex;
also no need to add separate class for every row
.row {
display: flex;
}
.form-grp {
margin: 10px
}
.form-grp label {
display:block;
}
<div class="row">
<div class="form-grp">
<label for="name1">Name1</label>
<input class="textBox" formControlName="name1" />
</div>
<div class="form-grp">
<label for="name2">Name2</label>
<input class="textBox" formControlName="name2" />
</div>
</div>
<div class="row">
<div class="form-grp">
<label for="name3">Name3</label>
<input class="textBox" formControlName="name3" />
</div>
<div class="form-grp">
<label for="name4">Name4</label>
<input class="textBox" formControlName="name4" />
</div>
</div>
<div class="row">
<div class="form-grp">
<label for="name5">Name5</label>
<input class="textBox" formControlName="name5" />
</div>
<div class="form-grp">
<label for="name6">Name6</label>
<input class="textBox" formControlName="name6" />
</div>
</div>
You can use grid to align the items.
example:
.row {
display: block;
}
.grid {
display: grid;
grid-template-rows: 1fr 1fr; /*Two columns*/
grid-auto-flow: column /*to align the input under the label*/;
justify-content: start; /*sticked to the left*/
grid-gap: 0 10px; /*horizontal space between inputs*/
}
<div class="row">
<div class="grid">
<label for="name1">Name1</label>
<input class="textBox" formControlName="name1" />
<label for="name2">Name2</label>
<input class="textBox" formControlName="name2" />
</div>
<div class="row">
<div class="grid">
<label for="name3">Name3</label>
<input class="textBox" formControlName="name3" />
<label for="name4">Name4</label>
<input class="textBox" formControlName="name4" />
</div>
</div>
<div class="row">
<div class="grid">
<label for="name5">Name5</label>
<input class="textBox" formControlName="name5" />
<label for="name6">Name6</label>
<input class="textBox" formControlName="name6" />
</div>
</div>
Try this code..
Demo
.firstRow,
.secondRow,
.thirdRow {
display: inherit;
}
.inner {
display: inline-block;
vertical-align: top;
}
<div class="firstRow">
<div class="inner">
<label for="name1">Name1</label>
<input class="textBox" formcontrolname="name1">
</div>
<div class="inner">
<label for="name2">Name2</label>
<input class="textBox" formcontrolname="name2">
</div>
</div>
I am currently trying to get two forms next to each other and then two more forms under it all aligned. If anyone has any suggestions to help me out that would be great. Here is my source code in a jsfiddle.
I am trying to get the name and company input next to each other and then the phone and email below it with the comment textbox at the base. I was trying the 40% width and it sort of helped to get the first row. I was thinking of going the table route as I could probably get that working fine for the forms being aligned but I know tables is not the correct route for coding this.
https://jsfiddle.net/xtwistedmetal/two7hgtm/1/
or
<style type="text/css">
#mc_embed_signup {
background: #fff;
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
.mc-field-group1 {
display: inline-block;
width: 40%;
}
.mc-field-group2 {
display: inline-block;
}
</style>
<div id="mc_embed_signup">
<form method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="" action="websitehere">
<div id="mc_embed_signup_scroll">
<div align="center">
<h2> Wholesale Contact Form</h2>
</div>
<div class="mc-field-group1">
<label for="mce-FNAME">Name </label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME" />
</div>
<div class="mc-field-group1">
<label for="mce-MMERGE3">Company Name </label>
<input type="text" value="" name="MMERGE3" class="required" id="mce-MMERGE3" />
</div>
<div class="mc-field-group2">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" />
</div>
<br>
<div class="mc-field-group2">
<label for="mce-MMERGE2">Phone Number </label>
<input type="text" name="MMERGE2" class="" value="" id="mce-MMERGE2" />
</div>
<div class="mc-field-group">
<label for="mce-COMMENTS">Comments </label>
<!-- <input type="text" value="" name="COMMENTS" class="required" id="mce-COMMENTS" /> -->
<textarea id="mce-COMMENTS" name="COMMENTS" cols="47" rows="3"> </textarea>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display: none;"></div>
<div class="response" id="mce-success-response" style="display: none;"></div>
</div>
<div class="clear" align="center">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
</div>
</div>
</form>
</div>
You can try an approach like below
.form-group:after{
content: "";
display:table;
clear:both;
}
.form-group-half{
width:44%;
padding:0 3%;
float:left;
}
.form-group-half > label{
display:block;
}
.form-group-half > input,
.form-group-half > select,
.form-group-half > textarea {
width:100%;
}
<div class="form-group">
<div class="form-group-half">
<label>Field 1</label>
<input type="text" name="field1">
</div>
<div class="form-group-half">
<label>Field 2</label>
<input type="text" name="field2">
</div>
</div>
<div class="form-group">
<div class="form-group-half">
<label>Field 3</label>
<input type="text" name="field3">
</div>
<div class="form-group-half">
<label>Field 4</label>
<input type="text" name="field4">
</div>
</div>
HTML ;
<div id="mc_embed_signup">
<form method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="" action="websitehere">
<div id="mc_embed_signup_scroll">
<div align="center">
<h2> Wholesale Contact Form</h2>
</div>
<div class="mc-field-group1" style=>
<div style="width:40%">
<label for="mce-FNAME">Name </label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME" />
</div>
<div style="width:40%">
<label for="mce-MMERGE3">Company Name </label>
<input type="text" value="" name="MMERGE3" class="required" id="mce-MMERGE3" />
</div>
</div>
<div class="mc-field-group2">
<div style="width:40%">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" />
</div>
<div style="width:40%">
<label for="mce-MMERGE2">Phone Number </label>
<input type="text" name="MMERGE2" class="" value="" id="mce-MMERGE2" />
</div>
</div>
<br>
<div class="mc-field-group">
<label for="mce-COMMENTS">Comments </label>
<!-- <input type="text" value="" name="COMMENTS" class="required" id="mce-COMMENTS" /> -->
<textarea id="mce-COMMENTS" name="COMMENTS" cols="47" rows="3"> </textarea>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display: none;"></div>
<div class="response" id="mce-success-response" style="display: none;"></div>
</div>
<div class="clear" align="center">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
</div>
</div>
</form>
</div>
CSS
<style type="text/css">
#mc_embed_signup {
background: #fff;
clear: left;
font: 12px Helvetica, Arial, sans-serif;
}
.mc-field-group1 {
width: 100%;
display: inline-flex;
}
.mc-field-group2 {
display: inline-flex;
width: 100%;
}
label{
color:red;
width:40px !important;
}
Sorry if the title isn't clear, I couldn't think of a shorter way of stating it without taking away to much.
Now, I have made a simple contact form (currently doesn't submit etc) with 4 labels and 4 text inputs. Each pair is contained inside it's own div and then styled by class.
Everything lines up and is where I want it, except the 4th div is off. The text field is one pixel wider than the rest, which also bumps the label out of alignment.
Here's what I've got...
HTML:
<div id="contact-form">
<div id="form-title">
<h3>Contact Form</h3>
<h5>Enter your details below to contact me</h5>
</div>
<form id="contact">
<div class="input">
<label>First name:
<input class="txt-box" type="text" />
</label>
</div>
<div class="input">
As above, "Surname"
</div>
<div class="input">
As above, "Phone"
</div>
<div class="input">
As above, "Email"
</div>
</form>
</div>
CSS:
.input {
width:100%;
display:inline-block;
}
.input label {
display:inline-block;
vertical-align:left;
text-align:right;
padding:0;
}
.input input {
width:60%;
margin:0 5px 0 3px;
display:inline-block;
vertical-align:right;
}
Here's how it displays
Title...
First name: [text]
Surname: [text]
Phone: [text]
Email: [text ]
I've been through all the other code and nothing should be interacting with this section at all.
Any ideas would be greatly appreciated, also please note that I've searched and tried and tested so the way that it's styled may not be the best or most efficient.
EDIT:
Here's the full code of the section.
HTML:
<div id="contact-form">
<div id="form-title">
<h3>Contact Form</h3>
<h5>Enter your details below to contact me.</h5>
</div>
<form id="contact">
<div class="input">
<label>First name
<input class="txt-box" type="text" placeholder="John" />
</label>
</div>
<div class="input">
<label>Surname:
<input class="txt-box" type="text" placeholder="Smith />
</label>
</div>
<div class="input">
<label>Phone
<input class="txt-box" type="text" placeholder="0412345678" />
</label>
</div>
<div class="input">
<label>Email
<input class="txt-box" type="text" placeholder="j.smith#example.com" />
</label>
</div>
</form>
</div>
try this css
.input {
width:100%;
display:inline-block;
}
.input label {
display:inline-block;
vertical-align:left;
text-align:right;
padding:0;
width:45%;
}
.input input {
width:55%;
margin:0 5px 0 3px;
display:inline-block;
vertical-align:left;
}
<div id="contact-form">
<div id="form-title">
<h3>Contact Form</h3>
<h5>Enter your details below to contact me.</h5>
</div>
<form id="contact">
<div class="input">
<label>First name:
<input class="txt-box" type="text" placeholder="John" />
</label>
</div>
<div class="input">
<label>Surname:
<input class="txt-box" type="text" placeholder="Smith" />
</label>
</div>
<div class="input">
<label>Phone:
<input class="txt-box" type="text" placeholder="0412345678" />
</label>
</div>
<div class="input">
<label>Email:
<input class="txt-box" type="text" placeholder="j.smith#example.com" />
</label>
</div>
</form>
</div>
jsfiddle output
Through trial and error I have found a way to make it work properly.
Here's the updated html:
<div id="contact-form">
<div id="form-title">
<h3>Contact Form</h3>
<h5>Enter your details below to contact me.</h5>
</div>
<form id="contact">
<div class="input">
<label>First name:</label>
<input class="txt-box" type="text" placeholder="John" />
</div>
<div class="input">
<label>Surname:</label>
<input class="txt-box" type="text" placeholder="Smith" />
</div>
<div class="input">
<label>Phone:</label>
<input class="txt-box" type="text" placeholder="0412345678" />
</div>
<div class="input">
<label>Email:</label>
<input class="txt-box" type="text" placeholder="j.smith#example.com" />
</div>
</form>
</div>
And the update css:
.input {
width:100%;
}
.input label {
width:35%;
display:inline-block;
vertical-align:left;
text-align:right;
padding:0;
padding-top:5px;
}
.txt-box {
width:50%;
margin:0;
margin-left:3px;
display:inline-block;
vertical-align:right;
}
I am trying to achieve the following:
A list of text on the left and text input on the right.
This is my attempt, but it is neither working very well or is rather elegant:
.textbox {
width: 400px;
border: solid black 2px;
}
ul {
padding: 5px;
display: inline-block;
list-style-type: none;
}
<div class="textbox">
<h4>Info section</h4>
<ul>
<li>General</li>
<li>Board name</li>
<li>Board image</li>
<li>Short domains</li>
<li>Use short domains?</li>
<li>Get in touch</li>
<li>Add short domain</li>
<li>Delete board</li>
</ul>
<ul>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
<li>
<input type="text">
</li>
</ul>
</div>
Can I do, what I want to achieve in another more elegant way?
Using Flexbox you can easily achieve what you want.There are many light weight frameworks which help for such use cases.One small example using such a framework,
Fiddle
<div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
<div class="row around-xs">
<div class="col-xs-6 start-xs">
General
</div>
<div class="col-xs-6">
<input type="text">
</div>
</div>
</div>
I recommend a framework because you can be more productive in short time.
This is how I would do it :
<div class="container">
<h3 class="container-heading">heading</h3>
<div class="form-item">
<p class="form-item-name">General</p>
<p class="form-item-field"><input type="text"></p>
</div>
</div>
css :
.form-item{width:100%;}
.form-item-name{width:50%; float:left;}
.form-item-field{width:50%; float:left;}
For UI like the one in your OP you can use table:
.textbox {
width: 400px;
border: solid black 2px;
}
.textbox h4 {
margin: 0;
}
table tr td:first-child {
width: 50%;
}
table tr td input {
width: 200px;
}
.textbox table {
padding: 10px;
}
<div class="textbox">
<h4>Info section</h4>
<table>
<tr>
<td>General</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Board image</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Board name</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Board name</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>Add short domain</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>
Change HTML structure a bit and with Flexbox you can do this
.info {
width: 80%;
margin: 0 auto;
padding: 25px;
border: 1px solid black;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
margin: 5px;
}
input {
flex: 0 1 60%;
margin-left: auto;
}
<div class="info">
<h3>Info Section</h3>
<ul>
<li><label for="">Lorem ipsum dolor</label> <input type="text"> </li>
<li><label for="">Lorem ipsum dolor amet</label> <input type="text"> </li>
<li><label for="">Lorem </label> <input type="text"> </li>
<li><label for="">Lorem ipsum dolor</label> <input type="text"> </li>
<li><label for="">Lorem ipsum or</label> <input type="text"> </li>
<li><label for="">Lorem ipsum</label> <input type="text"> </li>
</ul>
</div>
First of all use semantic HTML: if you need improve a form on your site, use tags <form> <input> <label> etc.
<form>
<fieldset>
<h4>Info section</h4>
<div>
<label for="general">General</label>
<input id="general" type="text" placeholder="General">
</div>
<div>
<label for="name">Board name</label>
<input id="name" type="text" placeholder="Board name">
</div>
<div>
<label for="image">Board image</label>
<input id="image" type="image" placeholder="Board image">
</div>
<div>
<label for="domains">Short domains</label>
<input id="domains" type="text" placeholder="Short domains">
</div>
<div>
<label for="foo">Use short domains?</label>
<input id="foo" type="text" placeholder="Use short domains?">
</div>
<div>
<label for="touch">Get in touch</label>
<input id="touch" type="text" placeholder="Get in touch">
</div>
<div>
<label for="short_domain">Add short domain</label>
<input id="short_domain" type="text" placeholder="Add short domain">
</div>
<div>
<label for="bar">Delete board</label>
<input id="bar" type="text" placeholder="Delete board">
</div>
</fieldset>
</form>
jsfiddle-link
and I think in the last div instead label and input Delete board should be <button type="submit">Delete board</button> but I don't know clearly, maybe you need this input
I am trying to format a two-column form so that:
the labels are above each input field or text area
everything in class col1 is in the column on the left
everything in class col2 is in the column on the right
everything in class col12 spans both columns
Here is the HTML code I need this to work with:
<div id="contactForm">
<form method="post" action="">
<h3>Contact us</h3>
<p>To send us a work order, fill in the form below.<br /><strong>All the (*) fields are mandatory.</strong></p>
<fieldset>
<div class="col1">
<label for="form_firstname">Firstname <span class="required">*</span></label>
<input type="text" id="form_firstname" name="form_firstname" value="" />
</div>
<div class="col2">
<label for="form_lastname">Lastname <span class="required">*</span></label>
<input type="text" id="form_lastname" name="form_lastname" value="" />
</div>
<div class="col1">
<label for="form_address">Address</label>
<input type="text" id="form_address" name="form_address" value="" />
</div>
<div class="col2">
<label for="form_city">City</label>
<input type="text" id="form_city" name="form_city" value="" />
</div>
<div class="col1">
<label for="form_email">Email <span class="required">*</span></label>
<input type="text" id="form_email" name="form_email" value="" />
</div>
<div class="col2">
<label for="form_phone">Phone <span class="required">*</span></label>
<input type="text" id="form_phone" name="form_phone" value="" />
</div>
<div class="col12">
<label for="form_attachment">Add Attachment <span class="form_attachment">*</span></label>
<textarea id="form_attachment" name="form_attachment" rows="5"></textarea>
</div>
<div class="col12">
<label for="form_message">Message <span class="required">*</span></label>
<textarea id="form_message" name="form_message" rows="5"></textarea>
</div>
<div class="col12">
<label for="form_message">Message <span class="required">*</span></label>
<input type="submit" value="Send" formnovalidate="formnovalidate" />
</div>
</fieldset>
</form>
</div>
How do I code the CSS to style this HTML as required?
Here is the code on JSFiddle.
Try this CSS:
#contactForm{
width: 80%;
}
label,.col1,.col2,.col12{display: block;}
.col1{ float:right;}
.col2{float:left;}
.col12{clear:both;}
textarea{
display: block;
width: 100%;
}
http://jsfiddle.net/rx2gjpdw/3/