Reduce padding of div - html

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

Related

Using div style cannot make border display

I have this code on my WordPress site for a MailChimp optin, but for some reason the border all of a sudden disappeared, can you please see what I may be missing?
<div style="border-style: solid thin #FFFFFF">
<p style="float:left; padding: 0px 5px 0px 0px;"><img src="http://www.xxxx.com/wp-content/uploads/2017/06/photo.jpg" style="width:115px; height:auto;" class="border"></p>
<p><text
</p>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#FFFFFF; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
/* 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>
<div id="mc_embed_signup">
<form action="//xxxxxxx.us14.list-manage.com/subscribe/post?u=2b24d9a7eb0e64eed113ca92c&id=6444b29c17" 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;" aria-hidden="true"><input type="text" name="b_2b24d9a7eb0e64eed113ca92c_6444b29c17" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
Border style does not accept color, nor "thin" as a value.
You want to use "border" in the context you're attempting to:
<div style="border: solid thin #FFFFFF">
hello
</div>
https://jsfiddle.net/4tm3d1jm/
Your div element might be overridden by other styles applying borders (or border: none) to all div elements in your document, though.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/border-style?v=control
Use:
<div style= 'border: 2px solid #fff'>
Instead of your div
I hope that:
#mc_embed_signup{background:#FFFFFF; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
Is between style tags
<style>#mc_embed_signup{background:#FFFFFF; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}</style>
If not, it won't work. Styles have to be applied in a css file, or between tags.
Additionally I want you to remember about css hierarchy (CSS Selector Hierarchy?)

If html content is not enough to overflow y, stick to bottom

This image probably explains best.
I have this chat functionality, very basic at the moment. When there's is enough text to overflow the page, it gives the behavior I want. The most recent message is just above the message input at the bottom. However, when there is only a few messages, the messages that exist are at the top and it leaves a big empty space between it and the message input.
Here is the relevant HTML. The text input is just position: fixed at the bottom of the screen and there's a bottom-margin on #message_outer_parent to keep it above it.
<div id="message_outer_parent">
<div id="message_content_parent"><div class="message_parent">
<span class="message_icon glyphicon glyphicon-user" style="color: #e21bcb" "=""></span>
<span class="message_username">whatever</span>
<span class="message_message">test text</span>
</div>
<div id="message_input_parent">
<form id="new_message" onsubmit="return submit_new_message()">
<input type="text" name="message_input" class="form-control" id="message_input" autocomplete="off" value="" placeholder="">
<!-- submit button positioned off screen -->
<input name="submit_message" type="submit" id="submit_message" value="true" style="position: absolute; left: -9999px">
</form>
</div>
</div>
I would like to have the messages just above the message input, even when there's only a few messages. How can I accomplish this?
Fixed position on the other div.
#message_input_parent {
position: fixed;
bottom: 5px;
}
#message_outer_parent {
position: fixed;
left: 0;
bottom: 30px;
max-height: calc(100vh - 30px);
overflow: auto;
width: 100vw;
padding: 5px;
box-sizing: border-box; /*padding and border won't increase height and width*/
}
<div id="message_outer_parent">
<div id="message_content_parent"><div class="message_parent">
<span class="message_icon glyphicon glyphicon-user" style="color: #e21bcb"></span>
<span class="message_username">whatever</span>
<span class="message_message">test text</span>
</div>
<div id="message_input_parent">
<form id="new_message" onsubmit="return submit_new_message()">
<input type="text" name="message_input" class="form-control" id="message_input" autocomplete="off" value="" placeholder="">
<!-- submit button positioned off screen -->
<input name="submit_message" type="submit" id="submit_message" value="true" style="position: absolute; left: -9999px">
</form>
</div>
</div>
Using flexbox
#message_input_parent {
position: fixed;
bottom: 5px;
}
#message_outer_parent {
height: 100vh;
width: 100vw;
padding: 5px 5px 30px 5px;
box-sizing: border-box;
display: flex;
align-items: flex-end;
}
*{margin: 0;}
<div id="message_outer_parent">
<div id="message_content_parent"><div class="message_parent">
<span class="message_icon glyphicon glyphicon-user" style="color: #e21bcb"></span>
<span class="message_username">whatever</span>
<span class="message_message">test text</span>
</div>
<div id="message_input_parent">
<form id="new_message" onsubmit="return submit_new_message()">
<input type="text" name="message_input" class="form-control" id="message_input" autocomplete="off" value="" placeholder="">
<!-- submit button positioned off screen -->
<input name="submit_message" type="submit" id="submit_message" value="true" style="position: absolute; left: -9999px">
</form>
</div>
</div>

Bootstrap input addon on right side

I have a header-div on my Site. Inside the header I want to have a login-form in-line on the right side.
css:
#header {
position: absolute;
top: 0;
width: 100%;
height: 45px;
padding: 5;
background: #fff;
border-bottom: 1pt solid #ccc;
text-align: right;
font-weight: bold;
}
#header div {
/*display: inline-block;*/
cursor: pointer;
/*padding: 4px;*/
float: right;
text-decoration: none;
font-size: 15px;
margin-right: 5px;
}
#submitButton {
float:right;
}
html:
<div id="header">
<div id="login">
<form class="form-inline" role="form">
<div class="row">
<button type="submit" class="btn btn-default" id="submitButton">Login</button>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="password" />
</div>
</div>
</div>
</form>
</div>
</div>
That's what I have so far:
http://jsfiddle.net/n5qmc/254/
But if I go in the password form and press TAB I don't get in the email input field. Because of the float:right thing. I need to do this somehow different.
What is the right way to do this? Thanks!
What you need is tabindex but as your html is not good and in bootstrap you have used your own style so tabindex got different behaviour.
I have updated your fiddle with changes in html and css. Please check and let me know if its ok for you..
I have removed float and also removed extra margin which were causing problem now if you will use tab then it will go one by one and also will work better in resizing. I have also changed html so email field will be first in both case.

line 3 divs on one line

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

Issues getting div to float right of another div

I am trying to get my registerbutton div to float right of the div - signinbutton. I do not think I can wrap the signin div around the register div to make it a parent because I have pop up code under the signinbutton div. I tried making a jsfiddle, but the effect did not result the same. To see a real view of this, my site is sundayfundayleague.com .
I need to get the register button to be inline with the Sign in one.
HTML
<div class="signinbutton">
<a class="signin" href="javascript:void(0)">Sign In</a>
</div>
<div class="registerbutton">
Register
</div>
CSS
.signinbutton {
padding: 10px;
font-size: 2.5em;
margin-top: 325px;
margin-left: 30%;
}
.registerbutton {
padding: 10px;
font-size: 2.5em;
margin-right: 30%;
float: right;
}
You can use span inside the 1st div
Demo
https://jsfiddle.net/knkvksdz/
Html
<div class="signinbutton"> <a class="signin" href="javascript:void(0)">Sign In</a>
<span class="registerbutton">
Register
</span>
</div>
Css
.signinbutton {
font-size: 2.5em;
margin-top: 325px;
margin-left: 30%;
}
.registerbutton {
float: right;
}
flip the divs around in the HTML code and use the float: left; attribute instead. Float right tends to be a bit more tricky I think and float left is the more complient one. You might have better luck doing it that way.
<div class="registerbutton">
Register
</div>
<div class="signinbutton">
<a class="signin" href="javascript:void(0)">Sign In</a>
</div>
CSS
.registerbutton {
padding: 10px;
font-size: 2.5em;
margin-right: 30%;
}
.signinbutton {
padding: 10px;
font-size: 2.5em;
margin-top: 325px;
margin-left: 30%;
float: left;
}
First of all. Try reducing your picture size. its too big. i takes time to load the page.
Here is my solution.
I will add wrapper outside those two.
<div class="wrapper">
<div class="signinbutton">
<a class="signin" href="javascript:void(0)">Sign In</a>
</div>
<div id="light" class="signInpopup">
<a class="close" href="javascript:void(0)">Close</a>
<form id="signInform" name="Sign In" action="" method="POST" autocomplete="on" accept-charset="utf-8">
<div class="center">
<input type="text" name="username" id="signInInput" placeholder="Username" autocomplete="on" required="">
<br>
<input type="password" name="password" id="signInPasswordInput" placeholder="Password" autocomplete="off" required="">
<br>
<br>
<br>
<label for="remember">
<input type="checkbox" name="remember" id="remember">Remember me</label>
<input type="hidden" name="token" value="687d55402565d69c55ab41c51eba5d76">
<label for="widebutton">
<input id="widebutton" type="submit" value="Sign In">
</label>
<br>
<br>
</div>
</form>
</div>
<div id="fade" class="black_overlay"></div>
<div class="registerbutton">
Register
</div>
</div>
and add this css to wrapper:
.wrapper{
display: inline-block;
width: 100%;
margin-top: 50px;
}
remove this from your #registerbutton
float:right
and remove from your .signinbutton
margin-top:352px;
and add .signinbutton
float:left