line 3 divs on one line - html

I am trying to get a mailchimp signup form to be on the same line instead of the default 3 lines.
I have tried to add display: inline-block; which made no difference and I have also tried to put a container around the divs but that didn't make a difference.
I do not have much experience of css but I do understand it. I was wondering if someone with a little more experience may be able to help.
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//digital-realms.us12.list-manage.com/subscribe/post?u=b3dcff09f16684d5f73852c78&id=af1750ad39" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div>Sign up to free e-Mail alerts for the latest news, offers & more: </div>
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</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> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_b3dcff09f16684d5f73852c78_af1750ad39" tabindex="-1" value=""></div>
<div class="clear opt-in" "><input type="submit" value="Sign Up" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Thank you.
ps: The code came from MailChimp and they set the classes so I do not have any css of my own to include.

Use the following html
.parent {
width: 100%;
}
.block1 {
width: 30%;
float: left;
padding-right: 10px;
}
.block2 {
width: 30%;
float: left;
padding-right: 10px;
}
.block3 {
width: 30%;
float: left;
}
<div class="parent">
<div class="block1">Content 1</div>
<div class="block2">Content 2</div>
<div class="block3">Content 3</div>
</div>
You may change the width. and insert your html into the content 1, content 2, content 3

Related

How to make Mailchimp embed form look not horrible

I'm so sorry in advance for this question as honestly I know NOTHING about code so I'm turning to the internet to help. Right now, I have it so the subscribe button and the field for inputting email are on separate lines and the button size is small with awkward spacing inbetween the field and the button. I'd like to fix these issues by having the button and the input field for email on the same line. If you could just add/remove whatever needs to be done to this I would REALLY appreciate it:
My code for this Mailchimp embed form is like this right now:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#ce3939; clear:left; font:14px Helvetica,Arial,sans-serif; width:600px; color: white}
h2 {color: white;}
#mc-embedded-subscribe { background-color: #930e0e !important; }
#mc-embedded-subscribe:hover { background-color:#ce3939 !important; }
</style>
<div id="mc_embed_signup">
<form action="https://pghcitypaper.us13.list-manage.com/subscribe/post?u=7bf7a7c4fa696150853fb01ba&id=36c5a7a88b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our newsletter (or else)!</h2>
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div hidden="true"><input type="hidden" name="tags" value="118"></div>
<div id="mce-responses">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_7bf7a7c4fa696150853fb01ba_36c5a7a88b" tabindex="-1" value=""></div>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

close up spaces in a bootstrap form

I have a bootstrap form with the following css code in it. I have tried to close up the blank spaces in the form by adding margin:0 attribute but still the spaces between the element is there.
css form code
<div class="row-fluid">
<form style="width: 90%; height: 100%; margin-top:1px;" method="post"novalidate="novalidate" class="form well">
<div class="row-fluid">
<div>
<label for="complaints">Message *</label>
<textarea style="width:100%;" name="complaints" rows="3" required></textarea>
</div>
</div>
<div class="form-actions">
<input style="width:100%; background-color:#da291c;" class="btn btn-primary" name="commit" type="submit" value="Send">
</div>
</form>
</div>
this is the picture of the above form
My challenge is to close the gaps on the areas pointed with arrows.
I am using this version of bootstrap
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
You can remove the margin-bottom that bootstrap adds to the class .control-group
.row-fluid div.control-group, div.form-actions {
margin-bottom: 0px;
}
div.my-form{
padding-bottom: 0px;
margin-top:0px;
padding-top:0px;
}
.control-group input,.control-group textarea{
margin-bottom: 0px;
}
form.form{
padding-bottom: 0;
padding-top:0;
}
UPDATED jsfiddle with your code
You can use this code:
input[type=text], .txtarea{
margin-bottom: 10px;
}
In bootstrap already they keep on the margin property always. we can overwrite that to solve your problem.
you need to add one class like this:
.splclass{
margin:0 !important;
padding:0 !important;
}
Add additionally in the form inline style like this:
<form style="width: 90%; height: 100%; margin-top:1px; padding-top:5px;" method="post"novalidate="novalidate" class="form well ">
i think it will helpful
Well if you don't want any space in between, you definitely don't want any margin. Move the CSS to it's own file:
.send {
width:100%;
background-color:#da291c;
}
.message {
width:100%;
}
.form {
width: 90%;
height: 100%;
margin: 0;
}
and html:
<div class="row-fluid">
<form class="form" method="post" novalidate="novalidate" class="form well">
<div class="row-fluid">
<div class="control-group span12">
<label for="name">Name *</label>
<input ng-model="name" name="name" type="text" class="input-block-level" required>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<label for="email">Email *</label>
<input name="email" placeholder="" type="email" class="input-block-level" ng-model="email"ng-change="id=email" required>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<label for="complaints">Message *</label>
<textarea class="message" name="complaints" rows="3" required></textarea>
</div>
</div>
<div class="form-actions">
<input class="btn btn-primary send" name="commit" type="submit" value="Send">
</div>
</form>
</div>
and you can see the fiddle here: https://jsfiddle.net/6j98311j/

Reduce padding of div

I've created a div (greenpromobox) which an email form sits in.
There is a chunk of padding to the right, bottom and left of the div and I can't workout how to reduce it to slim down the div?
I believe it maybe in one of the pre-built Bootstrap styles.
Live example: http://185.123.96.102/~kidsdrum/moneynest.co.uk/
HTML
<div class="greenpromobox">
<div class="h2extrapadding hidden-xs hidden-sm"></div> <h2 class="boldme">Take our free <b class="jumpstarttext">Jumpstart Your Finances</b> class to<br /> quickly gain control over your finances</h2>
<p class="text-center">
<br>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//moneynest.us11.list-manage.com/subscribe/post?u=9ccf2d2219536b32eaae3c3d1&id=299de51b4e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/hand-drawn-arrow.png" id="handarrow" class="hidden-xs hidden-sm" alt="arrow"><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address" required autofocus>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ccf2d2219536b32eaae3c3d1_299de51b4e" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Start Class Now" name="subscribe" id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Just before the div with id #mc_embed_signup you have this code
<p class="text-center">
<br>
<!-- Begin MailChimp Signup Form -->
</p>
Which basically does nothing, but adds empty space. As I see you reduced this space by doing things like
#mc_embed_signup input.email {
position: relative;
top: -35px;
}
and
.btn-lg {
position: relative;
top: -37px;
}
And this is why you have "padding" at the bottom. It's not padding, it's the space where buttons located. So:
Remove html code we don't need (or display: none it, whatever)
Remove css I've placed here
Put normal bottom padding you want
The problem came from your CSS.
First, remove the width:70%; into your CSS File
After you can add this :
width:auto;
padding:0 15px 15px 15px;
display:table;
The result must be like this :
CSS
.greenpromobox {
display: table;
padding: 15px;
background-color: green;
padding-top: 1px;
margin-top: 25px;
width: auto;
border-radius: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Hope this answer will help you :)
Richie

How to fit two HTML forms in a box where one form has to be an L-shape

So, I've got a requirement to have two forms in a dialog, where there are four sections.
I'll attach an image.
I want the first form to contain the orange blocks, and the second form to contain only the green block.
Is there any way to achieve this?
Forms are natively blocks, so that means that if I try, the green block will be put below the bottom-left block, which is now what I want.
In short
.outer {
width: 224px;
}
.inset {
float: left;
margin: 6px;
padding: 6px;
background-color: green;
width: 200px;
}
.outset {
float: left;
margin: 6px;
padding: 6px;
background-color: orange;
width: 200px;
}
<div class="outer" style="width:448px;">
<form action="login.php" method="post">
<div class="outer" style="float: left;">
<div class="outset" style="height: 100px;">Top Left
<input type="text" name="user">
</div>
<div class="outset" style="height: 50px;">Bottom Left
<input type="password" name="password">
</div>
</div>
<div class="outer" style="float: left;">
<div class="outset" style="height: 50px;">Top Right
<input type="submit" value="Login">
</div>
</div>
</form>
<form action="register.php" method="post">
<div class="inset" style="height: 100px;">Bottom right
<input type="text" name="user">
<input type="password" name="password">
<input type="submit" value="Register">
</div>
</form>
</div>

HTML complex form layout using DIV's

I need to make multi-column form layout, where each row can have different count of fields, like this:
First time I used table and td's colspan attribute for creating layout. But I read that laying out using tables is not good idea, so I want to improve my code to use div's.
So can anybody give me good example of how to make layout like above according to best practices? The most problem to me is that width of columns is different.
Thanks.
Don't kill me for not writing 100% valid input fields and not a clear layout with margins etc.
Sample
http://jsfiddle.net/hpmJ7/4/
HTML
<div>
<div class="w50">
<span class="label">Name</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Surname</span>
<input type="text" value="Test" />
</div>
<div class="w100">
<span class="label">Contact</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Age</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Email</span>
<input type="text" value="Test" />
</div>
<div class="w70">
<span class="label">Phone</span>
<input type="text" value="Test" />
</div>
<div class="w30">
<span class="label">Time</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Age</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Email</span>
<input type="text" value="Test" />
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.label {
width: 60px;
display: inline-block;
}
.w30, .w50, .w70, .w100 {
height: 20px;
float: left;
display: inline-block;
width: 100%;
}
.w30{
width: 30%;
}
.w50{
width: 50%;
}
.w70{
width: 70%;
}
.w100{
width: 100%;
}
The trick here is to come up with some sort of grid system. In my example, I've put together a 5% based grid system. You can see a basic example of some of your exact pieces in this fiddle.
#container { font-size: 12px; width: 700px; }
.row { float: left; margin: 5px 0; width: 100%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }
.item { box-sizing: border-box; float: left; }
input, select, option { margin: 0; }
And I've placed the items into rows to provide for a clean, grid-like look.
<div id="container">
<div class="row">
<div class="item w15">/* Entity Name</div>
<div class="item w35">Maricopa County Community College District</div>
<div class="item w50">*Domain: USPF, SLG, Special Districts, Community College</div>
</div>
<div class="row">
<div class="item w15">/* Doctype</div>
<div class="item w10">NLP?</div>
<div class="item w20">Filename/Keywords</div>
<div class="item w20">*Source Frequency</div>
<div class="item w35">
<input type="radio" name="freq" checked="checked" />
<label>Daily</label>
<input type="radio" name="freq" />
<label>Weekly</label>
<input type="radio" name="freq" />
<label>Monthly</label>
</div>
</div>
<div class="row">
<div class="item w15">
<input type="checkbox"/>
<label>Audit</label>
</div>
<div class="item w10">
<input type="checkbox"/>
</div>
<div class="item w20">
<input type="text"/>
</div>
<div class="item w20">*Every</div>
<div class="item w15">
<input type="text" class="w20" value="1"/>
<label>Days</label>
</div>
<div class="item w20">
<select>
<option value="utc-6">UTC -6</option>
</select>
</div>
</div>
</div>
Basically, a specific structure is what you're after, and a grid-like system placed in rows is a great way to do that.
Tables are not that bad.
The reason of why tables are not recomended for layout is that the table is loaded(content of it is shown) only when everything in the table has loaded in the page. But divs show their contents as soon as they are loaded.
Now in you case your form looks fairly complex to me and I think it is not desirable to show partial contents of this form while page is still loading. You definitly want to show all the fields of your form at the same time.
Also, when you want to represent tabular data (which I think applies to your case) then it is recomended to use tables.
So I would suggest(I may be wrong, please somebody correct me if I am) using table for this form of yours.
Also one more benefit that tables provide is you don't have to worry too much about the alignment of your contents.
You can basically create multiple css classes which will depict all those widths you want to depict. It will not be strictly flexible columns, but more like flexible rows, you will have to think in terms of rows instead of columns.
so for each row you would attach specific width classes
<div class="row">
<div class="left width-50"></div>
<div class="right width-50"></div>
</div>
<div class="row">
<div class="left width-70"></div>
<div class="right width-30"></div>
</div>
<div class="row">
<div class="left width-100"></div>
</div>
....
....
Hope it will help.
Check this out:
HTML
<html>
<head>
<link rel="stylesheet" href="contactForm.css"></link>
</head>
<body>
<div id="contactform">
<div id="first">
<div id="name">
<div id="description">Name</div>
<input type="text" name="textName">
</div>
<div id="surname">
<div id="description"> Surname</div>
<input type="text" name="textSurname">
</div>
</div>
<div id="second">
<div id="contact"><div id="description">Contact</div> <input type="text" name="textContact"></div>
</div>
<div id="third">
<div id="age">
<div id="description">Age</div>
<input type="text" name="textAge">
</div>
<div id="e-mail">
<div id="description">E-mail</div>
<input type="email" name="textEmail">
</div>
</div>
<div id="fourth">
<div id="phone">
<div id="description">Phone</div>
<input type="text" name="textPhone">
</div>
<div id="time">
<div id="description">Time</div>
<input type="date" name="textTime">
</div>
</div>
</div>
</body>
</html>
CSS
#contactform {width:500px; height:500px;}
#contactform div {float:left; padding-top:5px;}
#first, #second, #third, #fourth {width:100%;}
#first #description {width:30%;}
#name, #surname {width:50%;}
#surname #description {margin-left:11px;}
#first input {width:65%;}
#second #description {width:15%;}
#contact {width:100%;}
#second input {width:85%;}
#third #description {width:30%;}
#age, #e-mail {width:50%;}
#e-mail #description {margin-left:11px;}
#third input {width:65%;}
#fourth #description {width:30%;}
#phone, #time {width:50%;}
#time #description {margin-left:11px;}
#fourth input {width:65%;}
Output
HTH.