I have to design a newsletter, however my button doesn't get responsive. It is probably because of the class. If I create another outside the class it gets better. The class has no css so why can it change my button.
HTML-Code:
<!DOCTYPE html\>
Title
<!-- stylesheet für das Sende-Button-icon hinzugefügt-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<form action="https://adra.us6.list-manage.com/subscribe/post?u=e2d5faa9b94a0d751d430e84b&id=28f961ba01" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group input-group">
<ul><li><input type="checkbox" value="Herr" name="MMERGE3" id="mce-MMERGE3-0"><label for="mce-MMERGE3-0">Herr</label></li>
<li><input type="checkbox" value="Frau" name="MMERGE3" id="mce-MMERGE3-1"><label for="mce-MMERGE3-1">Frau</label></li>
<li><input type="checkbox" value="Anders" name="MMERGE3" id="mce-MMERGE3-2"><label for="mce-MMERGE3-2">Keine Angaben</label></li>
</ul>
</div>
<div class="mc-field-group">
<input type="text" value="" name="VNAME" class="required" id="mce-VNAME" placeholder="Vorname" required>
</div>
<div class="mc-field-group">
<input type="text" value="" name="LNAME" class="required" id="mce-LNAME" placeholder="Familienname" required>
</div>
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="eMail" required>
</div>
<div id="mce-responses" class="clear foot">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e2d5faa9b94a0d751d430e84b_28f961ba01" tabindex="-1" value=""></div>
<div class="optionalParent">
<div class="clear foot">
<button name="subscribe" id="mc-embedded-subscribe" class="button"><i class="far fa-paper-plane"></i> Senden</button>
</div>
</div>
</div>
</form>
CSS-Code:
#mc_embed_signup .input-group ul {
font-weight: 400;
line-height: 1.5;
font: 16px Zilla;
display: flex;
justify-content: space-between;
width: 50%;
box-sizing: border-box;
height: 20px;
text-align: left;
}
#mc_embed_signup .mc-field-group input[type="text"], #mc_embed_signup .mc-field-group input[type="email"] {
background: #ffffff;
border-color: #D9D9D6;
border-width: 1px;
border-radius: 3px;
padding: 4px 6px;
min-height: 33px;
max-width: 100%;
-basis: 100%;
font: 13px Zilla;
margin: 10px 0;
}
#mc_embed_signup .optionalParent #mc-embedded-subscribe {
background: #007960;
color: #ffffff;
width: 100%;
padding: 0 24px;
font: 15px Zilla;
border-radius: 3px;
flex-basis: 100%;
cursor: pointer;
vertical-align: middle;
margin-top: 10px;
min-height: 35px;
overflow: hidden;
}
#mc_embed_signup .optionalParent #mc-embedded-subscribe:hover {
background-color: #007960;`
}
I expectet the button to get up to 100%, where the inputs end.
If I remove all the css-code excluding the button:
enter image description here
I noticed you wrote an incorrect ID name in the CSS. You wrote #mc_embed_signup but correct is #mc_embed_signup_scroll as per your HTML.
For making button width full just need to add width:100% in the second group of classes in your CSS.
You can simply replace your CSS with the below one for a quick solution.
#mc_embed_signup_scroll .input-group ul { font-weight: 400; line-height: 1.5; font: 16px ; display: flex; justify-content: space-between; width: 50%; box-sizing: border-box; height: 20px; text-align: left;}
#mc_embed_signup_scroll .mc-field-group input[type="text"], #mc_embed_signup_scroll .mc-field-group input[type="email"] { background: #ffffff; border-color: #D9D9D6; border-width: 1px; border-radius: 3px; padding: 4px 6px; min-height: 33px; max-width: 100%; flex-basis: 100%; font: 13px ; margin: 10px 0; width: 100%; }
#mc_embed_signup_scroll .optionalParent #mc-embedded-subscribe { background: #007960; color: #ffffff; width: 100%; padding: 0 24px; font: 15px ; border-radius: 3px; flex-basis: 100%; cursor: pointer; vertical-align: middle; margin-top: 10px; min-height: 35px; overflow: hidden; }
#mc_embed_signup_scroll .optionalParent #mc-embedded-subscribe:hover { background-color: #007960; }
Related
I am doing a vue project,but I want to create a form to log in and put an image behind the form.
I tried, but when I put the image behind the form, it did not appear on the page.
What should I do to add a picture behind the form?
Html:Here in this section I wrote HTML code.
<template>
<div>
<div class="signup-form">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Bootstrap Simple Login Form with Blue Background</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form action="/examples/actions/confirmation.php" method="post">
<h2>Sign Up</h2>
<p>Please fill in this form to create an account!</p>
<hr>
<div class="form-group">
<div class="row">
<div class="col-xs-6"><input type="text" class="form-control" name="first_name"
placeholder="First Name" required="required"></div>
<div class="col-xs-6"><input type="text" class="form-control" name="last_name"
placeholder="Last Name" required="required"></div>
</div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email"
required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" `
required="required">`
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm
Password" required="required">
</div>
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" required="required"> I accept the
Terms of Use & Privacy Policy</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
</div>
</form>
<div class="hint-text">Already have an account? Login here</div>
</div> </div>
</template>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
export default {
data: {
counter: 0
}
};
</script>
Css:Here in this section i wrote Css Code.
<style scoped>
body {
color: #fff;
background: #3598dc;
font-family: 'Roboto', sans-serif;
}
.form-control{
height: 41px;
background: #f2f2f2;
box-shadow: none !important;
border: none;
}
.form-control:focus{
background: #e2e2e2;
}
.form-control, .btn{
border-radius: 3px;
}
.signup-form{
width: 390px;
margin: 30px auto;
}
.signup-form form{
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #fff;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form h2 {
color: #333;
font-weight: bold;
margin-top: 0;
}
.signup-form hr {
margin: 0 -30px 20px;
}
.signup-form .form-group{
margin-bottom: 20px;
}
.signup-form input[type="checkbox"]{
margin-top: 3px;
}
.signup-form .row div:first-child{
padding-right: 10px;
}
.signup-form .row div:last-child{
padding-left: 10px;
}
.signup-form .btn{
font-size: 16px;
font-weight: bold;
background: #3598dc;
border: none;
min-width: 140px;
}
.signup-form .btn:hover, .signup-form .btn:focus{
background: #2389cd !important;
outline: none;
}
.signup-form a{
color: #fff;
text-decoration: underline;
}
.signup-form a:hover{
text-decoration: none;
}
.signup-form form a{
color: #3598dc;
text-decoration: none;
}
.signup-form form a:hover{
text-decoration: underline;
}
.signup-form .hint-text {
padding-bottom: 15px;
text-align: center;
}</style>
You can use CSS' position property to stack an element on top of another. Here is an example.
/** GENERAL STYLES **/
* {
box-sizing: border-box;
}
form {
width: 300px;
margin: 1em auto;
border: 1px solid #eee;
}
form .form-group label,
form .form-group input {
width: 100%;
}
form h2 {
margin: 0 0 1em;
}
/** THE FIXES **/
.relative {
position: relative;
}
form .form-content {
padding: 1em;
position: relative;
}
form .behind-form {
position: absolute;
bottom: 0;
width: 100%;
}
form .behind-form img {
width: 100%;
display: block;
}
<form class="relative">
<div class="behind-form">
<img src="https://pixabay.com/get/52e8d3454e56a914f1dc8460da29317e173edce7545972_640.jpg" />
</div>
<div class="form-content">
<h2>Sign Up</h2>
<p>Please fill in this form to create an account!</p>
<div class="form-group">
<label>Name</label>
<input type="text" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" />
</div>
</div>
</form>
I have a contact form that has a width of 45% of the parent div. Instead of white space next to it, I'd like to add a coloured div (a square grid) and add some relevant info within said coloured div. However, with my current code, I'm, unable to get the form and div inline.
I've read some SO posts this one, but they are unable to assist (maybe it's the way I have my current CSS code)
#contact {
width: 90%;
height: 700px;
margin-left: 5%;
background-color: #fff;
border-radius: 10px;
color: #000 !important;
margin: 0 auto;
clear: none;
}
#contact #header {
padding: 10px 0px;
width: 100%;
font-size: 36px;
float: left;
}
#contact-text {
font-size: 16px;
width: 45%;
}
textarea, input, #contact-text {
font-family: Quicksand;
font-size: 16px;
}
label {
display: block;
padding: 1rem 0 .5rem;
text-transform: uppercase;
font-size: 22px;
}
input, textarea {
display: block;
width: 45%;
border: 1px solid black;
padding: .5rem;
}
textarea {
height: auto;
resize: none;
}
button {
font-family: Quicksand;
font-size: 18px;
border: 1px solid black;
padding:.5rem;
width: auto;
text-transform: uppercase;
}
button:hover {
cursor: pointer;
}
#contact #grid {
height: 100%
width: 50%;
background-color: #bbc6cb;
float: right;
overflow: hidden;
display: inline;
}
<div id = "contact">
<div id = "header">
<h3>Contact.</h3>
</div>
<div id = "contact-text">
<p>Please fill out the quick form below and we will get in touch as soon as we can</p>
</div>
<form action="/" id="contact-form" method="post" role="form">
<div class = "label">
<label for="name" class="formText">Name:</label>
</div>
<input id="name" name="name" type="text" placeholder="Your name" required="required">
<div class = "label">
<label for="email" class="formText">Email:</label>
</div>
<input id="email" name="email" type="text" placeholder="Your email" required="required">
<div class = "label">
<label for="message" class="formText">Message:</label>
</div>
<textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
<div>
<button type="submit">Send</button>
</div>
</form>
<div id = "grid">
</div>
</div>
Use this below code:
#contact {
height: 700px;
background-color: #fff;
border-radius: 10px;
color: #000 !important;
margin: 0 auto;
clear: none;
max-width: 1140px;
}
.left-gird, .right-grid {
width: 49%;
float: left;
}
.left-gird {
margin-right: 1%;
}
.right-gird {
margin-left: 1%;
}
.color-box {
height: 400px;
background-color: gray;
}
#contact #header {
padding: 10px 0px;
width: 100%;
font-size: 36px;
float: left;
}
#contact-text {
font-size: 16px;
width: 45%;
}
textarea, input, #contact-text {
font-family: Quicksand;
font-size: 16px;
}
label {
display: block;
padding: 1rem 0 .5rem;
text-transform: uppercase;
font-size: 22px;
}
input, textarea {
display: block;
width: 100%;
border: 1px solid black;
padding: .5rem;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
textarea {
height: auto;
resize: none;
}
button {
font-family: Quicksand;
font-size: 18px;
border: 1px solid black;
padding:.5rem;
width: auto;
text-transform: uppercase;
}
button:hover {
cursor: pointer;
}
#contact #grid {
height: 100%;
width: 50%;
background-color: #bbc6cb;
float: right;
overflow: hidden;
display: inline;
}
h3 {
margin-top: 0;
}
<div id = "contact">
<div class="left-gird">
<div id = "header">
<h3>Contact.</h3>
</div>
<div id = "contact-text">
<p>Please fill out the quick form below and we will get in touch as soon as we can</p>
</div>
<form action="/" id="contact-form" method="post" role="form">
<div class = "label">
<label for="name" class="formText">Name:</label>
</div>
<input id="name" name="name" type="text" placeholder="Your name" required="required">
<div class = "label">
<label for="email" class="formText">Email:</label>
</div>
<input id="email" name="email" type="text" placeholder="Your email" required="required">
<div class = "label">
<label for="message" class="formText">Message:</label>
</div>
<textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
<div>
<button type="submit">Send</button>
</div>
</form>
</div>
<div class="right-grid">
<div class="color-box"> color box here</div>
</div>
</div>
Use float:left for form and next div for inline
#contact {
width: 90%;
height: 700px;
margin-left: 5%;
background-color: #fff;
border-radius: 10px;
color: #000 !important;
margin: 0 auto;
clear: none;
}
#contact #header {
padding: 10px 0px;
width: 100%;
font-size: 36px;
float: left;
}
#contact-text {
font-size: 16px;
width: 45%;
}
textarea, input, #contact-text {
font-family: Quicksand;
font-size: 16px;
}
label {
display: block;
padding: 1rem 0 .5rem;
text-transform: uppercase;
font-size: 22px;
}
input, textarea {
display: block;
width: 90%;
border: 1px solid black;
padding: .5rem;
}
textarea {
height: auto;
resize: none;
}
button {
font-family: Quicksand;
font-size: 18px;
border: 1px solid black;
padding:.5rem;
width: auto;
text-transform: uppercase;
}
button:hover {
cursor: pointer;
}
form{
float:left;
width:50%;
}
#contact #grid {
height: 100%;
width: 50%;
background-color: #bbc6cb;
float: right;
overflow: hidden;
float:left;
}
<div id = "contact">
<div id = "header">
<h3>Contact.</h3>
</div>
<div id = "contact-text">
<p>Please fill out the quick form below and we will get in touch as soon as we can</p>
</div>
<form action="/" id="contact-form" method="post" role="form">
<div class = "label">
<label for="name" class="formText">Name:</label>
</div>
<input id="name" name="name" type="text" placeholder="Your name" required="required">
<div class = "label">
<label for="email" class="formText">Email:</label>
</div>
<input id="email" name="email" type="text" placeholder="Your email" required="required">
<div class = "label">
<label for="message" class="formText">Message:</label>
</div>
<textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
<div>
<button type="submit">Send</button>
</div>
</form>
<div id = "grid">
</div>
</div>
I'm trying to put those two buttons at the bottom but the vertical-align:bottom don't seem to have any effects.
Both blocks are in a class "login-card" and the blue stuff are buttons/submit inside this class.
Here is my css :
.login-card {
padding: 40px;
width: 400px;
height: auto;
background-color: #F7F7F7;
margin: 20px;
border-radius: 2px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.login-card input[type=text], input[type=password], input[type=email], inputs {
height: 44px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.login-card input[type=submit], input[type=button] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
display: table-cell;
vertical-align: bottom;
}
Am i missing something obvious ?
EDIT, added Html :
<div class="col-sm-6">
<div class="login-card" id="firstCard">
<h1>Fill the Wheel</h1>
<form action="javascript:void(0);" name="members" onsubmit="rollIt()">
<div id="dynamicInput">
<input class="inputs" type="text" name="input1" placeholder='Type name' required>
<input class="inputs" type="text" name="input2" placeholder='Type name' required>
<input class="inputs" type="text" name="input3" placeholder='Type name' required>
</div>
<input type="button" id="addInput" class="login login-submit" value="Add a member">
<input type="submit" id="rollWheel" name="login" class="login login-submit" value="Roll the wheel!">
</form>
</div>
</div>
Your buttons are at the bottom of the form, their parent. You need to take the padding-bottom off of login-card or something like that to give the buttons room to move down.
Also, here is an answer to your problem with the right box
<div class="wrapper">
<button></button>
<button></button>
</div>
.logincard:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: bottom;
}
.wrapper {
display: inline-block;
vertical-align: bottom;
}
I've found this q&a on stack but both solutions did not work..
How do I center a mailchimp embed form in a twitter bootstrap page?
centering input in form mailchimp
What I think these questions lack is both the code for the form and style code included (see below). How can I center both the content (text) and the div itself as a whole so it's responsively centered on the page?
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<center>
<div class="display:block margin:auto "id="mc_embed_signup">
<form action="//twitter.us11.list-manage.com/subscribe/post?u=b59cd34816a376a0c58945aee&id=2e74fec4e5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Subscribe to our mailing list</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- 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_b59cd34816a376a0c58945aee_2e74fec4e5" tabindex="-1" value="">
</div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</div>
</form>
</div>
</center>
You can see I've attempted the tags as well as altering the class within the form..
Any help is greatly appreciated :3
First - remove center tags and this "class":
class="display:block margin:auto"
Second - you can set input width to 100% and block width to 58%:
#mc_embed_signup input.email {
...
width: 100%;
...
}
#mc_embed_signup form {
...
width: 58%;
margin: auto;
}
Example:
<link href="https://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
#mc_embed_signup label {
text-align: center;
}
#mc_embed_signup input.email {
width: 100%;
}
#mc_embed_signup input.button {
margin: auto;
}
#mc_embed_signup form {
width: 58%;
margin: auto;
}
</style>
<div class="display:block margin:auto" id="mc_embed_signup">
<form action="//twitter.us11.list-manage.com/subscribe/post?u=b59cd34816a376a0c58945aee&id=2e74fec4e5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Subscribe to our mailing list</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- 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_b59cd34816a376a0c58945aee_2e74fec4e5" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</form>
</div>
Also, this looks like ugly hack:
style="position: absolute; left: -5000px;"
Why u don't use hidden input or "display: none"? :)
You are using bootstrap. So how about wrapping that code inside the bootstrap's grid system.
#mc_embed_signup {
background: #fff;
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<center>
<div class="display:block margin:auto " id="mc_embed_signup">
<form action="//twitter.us11.list-manage.com/subscribe/post?u=b59cd34816a376a0c58945aee&id=2e74fec4e5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Subscribe to our mailing list</label><br />
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- 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_b59cd34816a376a0c58945aee_2e74fec4e5" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</form>
</div>
</center>
</div>
<div class="col-md-3"></div>
</div>
</div>
This article may help: Customize Your Own MailChimp E-Mail Newsletter Signup Form.
/** MailChimp Styles **/
#mc_embed_signup {
background: #fff;
clear: left;
font: 14px Helvetica, Arial, sans-serif;
text-align: center;
width: 350px;
margin: 0 auto;
}
/* MailChimp Form Embed Code - Slim - 08/17/2011 */
#mc_embed_signup form {
display: block;
position: relative;
text-align: center;
padding: 10px 0 10px 3%;
}
#mc_embed_signup h2 {
font-weight: bold;
padding: 0;
margin: 15px 0;
font-size: 1.4em;
}
#mc_embed_signup input {
border: 1px solid #ababab;
-webkit-appearance: none;
}
#mc_embed_signup input[type=checkbox] {
-webkit-appearance: checkbox;
}
#mc_embed_signup input[type=radio] {
-webkit-appearance: radio;
}
#mc_embed_signup input:focus {
border-color: #799877;
}
#mc_embed_signup .button {
display: block;
position: relative;
background-color: #266080;
padding: 0;
margin: 0 auto;
border: 0 none;
border-radius: 6px;
color: #fff;
cursor: pointer;
font-size: 14px;
width: 140px;
height: 36px;
line-height: 36px;
font-weight: bold;
text-align: center;
text-decoration: none;
vertical-align: top;
}
#mc_embed_signup .button:hover {
background-color: #f00;
}
#mc_embed_signup .button:active {
top: 2px;
border-bottom-width: 1px;
}
#mc_embed_signup .small-meta {
font-size: 11px;
}
#mc_embed_signup .nowrap {
white-space: nowrap;
}
#mc_embed_signup .clear {
clear: none;
display: inline;
}
#mc_embed_signup label {
display: block;
font-size: 13px;
text-transform: uppercase;
padding-bottom: 7px;
color: #616161;
font-weight: bold;
}
#mc_embed_signup input.email {
display: block;
padding: 8px 4px;
margin: 0 4% 10px 0;
text-indent: 5px;
color: #818181;
font-size: 1.0em;
background: #fff;
font-weight: bold;
width: 100%;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#mc_embed_signup input.email:focus {
color: #666;
}
#mc_embed_signup div#mce-responses {
float: left;
top: -1.4em;
padding: 0em .5em 0em .5em;
overflow: hidden;
width: 90%;
margin: 0 5%;
clear: both;
}
#mc_embed_signup div.response {
margin: 1em 0;
padding: 1em .5em .5em 0;
font-weight: bold;
float: left;
top: -1.5em;
z-index: 1;
width: 80%;
}
#mc_embed_signup #mce-error-response {
display: none;
}
#mc_embed_signup #mce-success-response {
color: #529214;
display: none;
}
#mc_embed_signup label.error {
display: block;
float: none;
width: auto;
margin-left: 1.05em;
text-align: left;
padding: .5em 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="mc_embed_signup">
<form action="//twitter.us11.list-manage.com/subscribe/post?u=b59cd34816a376a0c58945aee&id=2e74fec4e5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Subscribe to our mailing list</label>
<input type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<!-- 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_b59cd34816a376a0c58945aee_2e74fec4e5" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</form>
</div>
</div>
I only got it to work when I changed your code in the CSS stylesheet to:
#mc_embed_signup {
border-radius: 12%;
margin: auto;
padding: 15px;
text-align: center;
width: 58%;
}
I require 2 text input boxes side by side in one page using css3. I have everything ready except that the second box is coming below the first input box. How can i correct this in css.
html:
<div class="main">
<div class="one">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form">
<div>
<div>
<label for="username">Username</label>
<input type="text" id="username" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" />
</div>
<div>
<label></label>
<input type="submit" value="Shop Login" id="create-account" class="button"/>
</div>
</form>
</div>
</div>
<div class="two">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form1">
<div>
<label for="name1">Name</label>
<input type="text" id="name1" spellcheck="false" placeholder="Enter Your Name"/>
</div>
<div>
<label for="email1">Email</label>
<input type="text" id="email1" spellcheck="false" placeholder="mymail#mail.com"/>
</div>
<div>
<label for="username1">Username</label>
<input type="text" id="username1" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password1">Password</label>
<input type="password" id="password1" />
</div>
<div>
<label for="password-again1">Password Again</label>
<input type="password" id="password-again1" />
</div>
<div>
<label></label>
<input type="submit" value="Create Account" id="create-account1" class="button"/>
</div>
</form>
</div>
</div>
</div>
CSS
.main > div {
display: inline-block;
width: 49%;
margin-top: 10px;
}
.two .register {
border: none;
}
.two .register h3 {
border-bottom-color: #909090;
}
.two .register .sep {
border-color: #909090;
}
.register {
width: 400px;
margin: 10px auto;
padding: 10px;
border: 7px solid #ADD8E6;
border-radius: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
background-color: #f0f0f0;
box-shadow: 0 0 20px 0 #000000;
}
.register h3 {
margin: 0 15px 20px;
border-bottom: 2px solid #72b372;
padding: 5px 10px 5px 0;
font-size: 1.1em;
}
.register div {
margin: 0 0 15px 0;
border: none;
}
.register label {
display: inline-block;
width: 25%;
text-align: right;
margin: 10px;
}
.register input[type=text], .register input[type=password] {
width: 65%;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
padding: 5px;
font-size: 0.9em;
border-radius: 5px;
background: rgba(0, 0, 0, 0.07);
}
.register input[type=text]:focus, .register input[type=password]:focus {
background: #FFFFFF;
}
.register .button {
font-size: 1em;
border-radius: 8px;
padding: 10px;
border: 1px solid #ADD8E6;
box-shadow: 0 1px 0 0 #05B8CC inset;
background: #05B8CC;
background: -webkit-linear-gradient(#ADD8E6, #05B8CC);
background: -moz-linear-gradient(#ADD8E6, #05B8CC);
background: -o-linear-gradient(#ADD8E6, #05B8CC);
background: linear-gradient(#ADD8E6, #05B8CC);
}
.register .button:hover {
background: #51db1c;
background: -webkit-linear-gradient(#51db1c, #6ba061);
background: -moz-linear-gradient(#51db1c, #6ba061);
background: -o-linear-gradient(#51db1c, #6ba061);
background: linear-gradient(#51db1c, #6ba061);
}
.register .sep {
border: 1px solid #72b372;
position: relative;
margin: 35px 20px;
}
.register .or {
position: absolute;
width: 50px;
left: 50%;
background: #f0f0f0;
text-align: center;
margin: -10px 0 0 -25px;
line-height: 20px;
}
.register .connect {
width: 400px;
margin: 0 auto;
text-align: center;
}
I have provided a jsFiddle Demo
I require it aligned side by side rather than top bottom as in demo. Thanks in advance
You have missed a closing div before <div class="two">.
Adding the closing div will make both forms next to each other.
Then you need to add a little CSS rule to make both forms perfectly aligned vertically:
div.one {
position: relative;
top: -165px
}
See the demo here: http://jsfiddle.net/t5SNE/7/