I am creating a form using css and having issues with alignment for certain fields. This layout consists of multiple columns
The issues are as follows
The two checkboxes are appearing next to each other , instead of one below the other
The second column should appear close to the first column, not able to remove the whitespace, should I set the col width for each column ?
the html code seems cumbersome, since each column needs to contain the fields based on the required fields, not sure if I am using correct approach , new to css
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
text-align: center;
}
.container1 {
display: flex;
flex-direction: row;
margin: 10px 50px 10px
}
.container2 {
display: flex;
justify-content: center;
}
.col1 {
flex: 1
}
.col2 {
flex: 1;
align-items: start
}
.button-basic {
border: 1px solid black;
border-radius: 5px;
margin: 10px;
padding: 10px
<body>
<h1> Employee information </h1>
<form>
<div class="container1">
<div class="col1">
<p> Employee id:</p>
<p> Employee Type:</p>
<p> Employee Status: </p>
<p> Promotion Flag:</p>
<p> Insurance Flag:</p>
</div>
<div class="col2">
<p id="employee-id"> 12345 </p>
<p id="employee-type"> HR </p>
<p id="employee-status"> Active </p>
<input type="checkbox" id="promotion-flag" name="promotion-flag">
<input type="checkbox" id="insurance-flag" name="insurance-flag">
</div>
<div class="col1">
<p> Employee First Name: </p>
<p> Description: </p>
<p> Description: </p>
<p> Promotion comments: </p>
</div>
<div class="col2">
<p id="employee-fname"> John </p>
<p id="employee-type-desc"> HR employee </p>
<p id="employee-status-desc"> Active employee </p>
<input type="text" id="promotion-reason" name="promotion-reason">
</div>
<div class="col1">
<p> Employee Last Name: </p>
<p> Employee Start Date: </p>
</div>
<div class="col2">
<p id="employee-lname"> Smith </p>
<p id="employee-start-date"> 01/01/2020 </p>
</div>
</div>
<div class="container2">
<input class="button-basic" type="submit" value="Search">
<input class="button-basic" type="submit" value="Save">
</div>
</form>
you need to give the page a purpose with design
try for getting rid of the spaces
.col1 {
flex: 1;
text-align: right;
}
.col2 {
flex: 1;
text-align: left;
}
also.. learn about the box model for getting the gaps prettier
with the checkboxes you just need to add a <br>
...
<div class="col2">
<p id="employee-id"> 12345 </p>
<p id="employee-type"> HR </p>
<p id="employee-status"> Active </p>
<input type="checkbox" id="promotion-flag" name="promotion-flag"><br>
<input type="checkbox" id="insurance-flag" name="insurance-flag">
</div>
...
consider to use a table instead of wiring a bunch of divs
Related
I have a three column box in css, I need it to center on the page for the desktop and then stack the columns on top of each other in 600px or less. I have everything working except having it centered on the desktop view.
I have tried adding justify-content: relative, adding a wrapper align: center and a couple other lines of code that did not work. Any help is greatly appreciated.
Here is the code I currently have:
* {
box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 178px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
<p align="center">
<font size="5" color="336699"><strong>Great American Song Contest</strong></font>
</p>
<p align="center">
<font size="3" color="a91e21"><strong>3 Easy Ways To Enter Your Songs</strong></font>
</p>
<div class="wrapper">
<div class="row">
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Form-Prepage.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-online.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Entry-Direct.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-email.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<img src="https://www.greatamericansong.com/newsite-backup/images/submit-mail.gif" alt="" width="178" height="158">
</p>
</div>
</div>
</div>
<div align="center"> <img src="//shield.sitelock.com/shield/greatamericansong.com" id="sl_shield_image" style="cursor: pointer;" alt="SiteLock" align="middle" />
<script id="sl_shield" type="text/javascript" src="//shield.sitelock.com/sitelock.js" language="javascript"></script>
</div>
<p align="center">
<p></p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
<p>
<font size="3" color="a91e21"><strong>2021 Rules & Entry:</strong></font>
</p>
<p>The Great American Song Contest is open to songwriters, lyricists & music composers worldwide.</p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
Apply a dedicated class to the parent of those columns (in my example: class="x"), use display: flex; and justify-content: center on that, and in the media query change it to flex-direction: column (t place them below each other) and align-items: center; (to center them). And forget the floats...
* {
box-sizing: border-box;
}
.column {
width: 178px;
}
.x {
display: flex;
justify-content: center;
}
#media screen and (max-width: 600px) {
.x {
flex-direction: column;
align-items: center;
}
}
<p align="center">
<font size="5" color="336699"><strong>Great American Song Contest</strong></font>
</p>
<p align="center">
<font size="3" color="a91e21"><strong>3 Easy Ways To Enter Your Songs</strong></font>
</p>
<div class="wrapper">
<div class="x">
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Form-Prepage.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-online.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Entry-Direct.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-email.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<img src="https://www.greatamericansong.com/newsite-backup/images/submit-mail.gif" alt="" width="178" height="158">
</p>
</div>
</div>
</div>
<div align="center"> <img src="//shield.sitelock.com/shield/greatamericansong.com" id="sl_shield_image" style="cursor: pointer;" alt="SiteLock" align="middle" />
<script id="sl_shield" type="text/javascript" src="//shield.sitelock.com/sitelock.js" language="javascript"></script>
</div>
<p align="center">
<p></p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
<p>
<font size="3" color="a91e21"><strong>2021 Rules & Entry:</strong></font>
</p>
<p>The Great American Song Contest is open to songwriters, lyricists & music composers worldwide.</p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
I use contact form 7.
The html code from form:
<div class="clearfix">
<div id="left">
First name [text first-name]<br/>
Last name [text last-name]<br/>
How Did You Find Us? [text text-find-us]
</div>
<div id="right">
Email [email* your-email] <br/>
Phone [text your-phone]
</div>
</div>
Subject [text* your-subject] <br/>
Message [textarea* your-message]<br/>
[submit "Send"]
How can I put the "First name" to be in the same line with the box of box text in which user type his/her first name?
Not sure how Contact Form 7 renders html with those tags which are inside brackets. You could possibly use CSS/HTML to position the items.
HTML:
<div class="clearfix">
<div id="left">
<span class="label">First name</span><span class="form-input">[text first-name]</span><br/>
<span class="label">Last name</span><span class="form-input">[text last-name]</span><br/>
<span class="label">How Did You Find Us?</span><span class="form-input">[text text-find-us]</span>
</div>
<div id="right">
<span class="label">Email</span><span class="form-input">[email* your-email]</span><br/>
<span class="label">Phone</span><span class="form-input">[text your-phone]</span>
</div>
</div>
CSS:
div#left {
float: left;
width: 400px;
}
div#right {
float:left;
width: 400px;
}
span.label {
float: left;
width: 180px;
}
span.form-input {
float: left;
width: 200px;
}
Fiddle: https://jsfiddle.net/mediaguru/f1e68999/
I have 4 columns of products with a header, description and image below and I want the text areas to at the top and the images to each line up at the bottom so they stay aligned when the screen is resized.
At the moment the images move up and down as the text wraps - which looks very untidy as they each have a different amount of text.
I have tried using tables and position absolute and they each cause problems and don't work properly.
Here is my code:
#product-landing .landing-row {
position: relative;
height: inherit;
}
.product-landing,
.product-landing-2,
.product-landing-3 {
margin-right: 2.0533%;
}
.product-landing,
.product-landing-2,
.product-landing-3,
.product-landing-4 {
margin-left: 0px;
display: inline-block;
position: relative;
height: 100%;
vertical-align: top;
width: 22.978%;
}
.product-landing-4 {
margin-right: 0px;
}
#product-landing p {
margin-top: 0px;
margin-bottom: 5px;
clear: both;
width: 100%;
}
.product-landing .land-image {
vertical-align: bottom;
}
.product-landing img,
.product-landing-2 img,
.product-landing-3 img,
.product-landing-4 img {
margin-top: 10px;
display: block;
max-width: 350px;
margin: 0 auto;
bottom: 0px;
width: 100%;
}
<div id="product-landing">
<div class="landing-row">
<div class="product-landing">
<div id="product-text">
<div id="offer-title">Product1</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image1.jpg">
</p>
</div>
<div class="product-landing-2">
<div id="product-text">
<div id="offer-title">Product2</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image2.jpg">
</p>
</div>
<div class="product-landing-3">
<div id="product-text">
<div id="offer-title">Product3</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image3.jpg">
</p>
</div>
<div class="product-landing-4">
<div id="product-text">
<div id="offer-title">Product4</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image4.jpg">
</p>
</div>
</div>
</div>
You can use flexbox for this
#product-landing .landing-row {
display:flex;
flex-direction:row;
justify-content:space-between;
flex-wrap:wrap;
}
#product-landing p {
margin-top: 0px;
margin-bottom: 5px;
}
.product-landing {
display:flex;
flex-direction:column;
width: 22.978%;
}
.product-landing img {
margin-top: 10px;
display: block;
max-width: 350px;
width: 100%;
}
.product-text {
flex-grow:1;
}
<div id="product-landing">
<div class="landing-row">
<div class="product-landing">
<div class="product-text">
<div class="offer-title">Product1</div>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://via.placeholder.com/350x150">
</p>
</div>
<div class="product-landing">
<div class="product-text">
<div class="offer-title">Product2</div>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://via.placeholder.com/350x150">
</p>
</div>
<div class="product-landing">
<div class="product-text">
<div class="offer-title">Product2</div>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://via.placeholder.com/350x150">
</p>
</div>
<div class="product-landing">
<div class="product-text">
<div class="offer-title">Product3</div>
<p><b><i>Product description Product description Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://via.placeholder.com/350x150">
</p>
</div>
<div class="product-landing">
<div class="product-text">
<div class="offer-title">Product4</div>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://via.placeholder.com/350x150">
</p>
</div>
</div>
Would've commented this if I could; Have you tried using flex-box? https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This has saved me on many occasions where relative/absolute combinations fail.
To be more specific;
.wrapper{
display:flex;
flex-direction:column;
}
.text-wrapper-div{
align-self:flex-start;
}
.image-wrapper-div{
align-self:flex-end;
}
.wrapper is your parent-container, which flexes from top to bottom (column).
Inside are the two div's for text and image, which align themselves to the top (flex-start) and bottom (flex-end).
Have a look at the link if you get stuck - it's pretty well documented I think! Good luck.
Hope this may help you,
Using flex is considered to be best practice. The table and table-cell are the old ways as we have came way far and new properties are being invented day by day. As using the flex will adjust the content itself as you resize the browser and has its own qualities.
#product-landing .landing-row {
display: flex;
flex-direction: row;
}
.product-landing,
.product-landing-2,
.product-landing-3 {
margin-right: 2.0533%;
}
.product-landing,
.product-landing-2,
.product-landing-3,
.product-landing-4 {
flex: 1;
text-align: center;
}
#product-landing p {
margin-top: 0px;
margin-bottom: 5px;
clear: both;
width: 100%;
}
.product-landing .land-image {
vertical-align: bottom;
}
.product-landing img,
.product-landing-2 img,
.product-landing-3 img,
.product-landing-4 img {
margin-top: 10px;
display: block;
max-width: 350px;
margin: 0 auto;
bottom: 0px;
width: 100%;
}
<div id="product-landing">
<div class="landing-row">
<div class="product-landing">
<div id="product-text">
<div id="offer-title">Product1</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image1.jpg">
</p>
</div>
<div class="product-landing-2">
<div id="product-text">
<div id="offer-title">Product2</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image2.jpg">
</p>
</div>
<div class="product-landing-3">
<div id="product-text">
<div id="offer-title">Product3</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image3.jpg">
</p>
</div>
<div class="product-landing-4">
<div id="product-text">
<div id="offer-title">Product4</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image4.jpg">
</p>
</div>
</div>
</div>
Trying to create a layout that has two columns, and text between those columns
Something like this:
But I am running into spacing issues with twitter bootstrap to make it actually work. On top of making these items the same width with the text between, they should all be vertically aligned.
You can do that using 3 columns
Live Demo jsfiddle
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">.col-sm-6</div>
<div class="col-xs-6">.col-sm-6</div>
</div>
<br/>
<p>Create an account...............................</p>
<div class="row">
<div class="col-xs-6 test" >
<form class="form-horizontal vmid" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password"/>
</div>
</div></form>
</div>
<div class="col-xs-1 test" >
<p class="asd"> ~OR~</p>
</div>
<div class="col-xs-5 test" >
<button type="submit" class="asd btn-primary btn-lg">Facebook</button>
</div>
</div>
</div>
Style
.vmid{
position:relative;
top:50%;
transform:translateY(-50%);
}
.asd{
position:relative;
top:50%;
transform:translateY(-35%);
}
This is not a bootstrap answer just a plain simple CSS one. Although you can adapt it to bootstrap easily because the basic underlying principle is the same. Instead of using width percentages that I have used in my example, bootstrap grid system columns can be used instead. Saying all that, you can achieve your desired effect by dividing the wrapper div into 3 columns and then using the display table for parent and table-cell and vertical align middle for the child to place the respective input elements and button elements in its place as needed.
The fiddle can be found here
The code snippet follows...
.wrapper {
height: 300px;
width: 100%;
background: pink;
}
.leftSide,
.rightSide,
.midPart {
box-sizing: border-box;
height: 100%;
display: table;
}
.leftSide {
width: 45%;
background: lightgray;
float: left;
}
.midPart {
width: 10%;
background: aqua;
}
.midPart p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.leftSide div,
.rightSide div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.rightSide {
width: 45%;
background: lightcyan;
float: right;
}
button {
height: 3em;
width: 100px;
background: blue;
color: white;
}
<div class="wrapper">
<div class="leftSide">
<div>
<input placeholder="Enter Username" />
<br/>
<br/>
<input placeholder="Enter password" />
</div>
</div>
<div class="rightSide">
<div>
<button>Hello</button>
</div>
</div>
<div class="midPart">
<p>-or-</p>
</div>
</div>
Hope this helps. Happy coding :)
Update::
***Another updated Fiddle without colors***
I have a couple of different issues.
I have a div with a couple of other divs and some controls in it. My biggest issue is that it does not look the same in Chrome as it does in other browsers. As it is right now, it looks as following:
And the biggest issue is with Chrome, where the textbox to the right of the "width:" text goes down onto the next line. The code for the box can be seen in this JSFiddle or as as following:
<div id="div_properties" class="redBorder left" style="clear: left; display:
<div class="right">
<a href="#" id="closePropertiesWindow">
<img src="close.png" title="Close window"></a>
</div>
<div class="centered noMargin whiteBackground">
<h3 class="noMargin">Properties</h3>
</div>
<hr class="noMargin noPadding">
<div id="div_properties_content" style="display: block;">
<div class="noMargin propertiesControl" prop="text" style="width:100%;">
text:
<input type="text" id="propertytextTextBox" class="right"></input>
</div>
<div class="noMargin propertiesControl" prop="width" style="width:100%;">
width:
<input type="number" id="propertywidthNumber" class="right"></input>
</div>
<div class="noMargin propertiesControl" prop="italic" style="width:100%;">
italic:
<input type="checkbox" id="propertyitalicCheckBox" class="right" checked="checked">
</div>
<div class="noMargin propertiesControl" prop="bold" style="width:100%;">
bold:
<input type="checkbox" id="propertyboldCheckBox" class="right">
</div>
<br>
<input type="button" id="savePropertiesButton" value="Save" class="right">
</div>
</div>
And the CSS is as following:
#div_properties {
margin-top: 5px;
background-color: #F0F0F0;
width: 300px;
float: left;
min-height: 75px;
}
.redBorder {
border: 1px solid red;
}
.noMargin {
margin: 0 0 0 0;
}
.left {
float: left;
}
.right {
float: right;
}
(Those are all the related classes in this scope, the other classes defined on the items have no styles, but are being used in the JavaScript.)
Also, another issue I'm having is the "box border" around the close-image in IE. This is not a big issue, but if anyone knows what is causing it, it would be fantastic.
Its the floating that's causing the issue. You need to clear them.
.propertiesControl {
clear:both;
}
http://jsfiddle.net/JWDkM/2/