Place an image on top of all elements
I made a horizontal selection bar for my newsletter on my website.
The points are that I replaced the submit image button with CSS:
#mc_embed_signup input.button {
background: url(http://urltotheimg.com/image.jpg);
background-repeat: no-repeat;
border: none;
position: absolute!important;
left: 720px;
top: -15px;
width: 120px!important;
height: 120px!important;
}
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form class="validate" id="mc-embedded-subscribe-form" action="**here I put the action to suscribe**" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div class="mc-field-group">
<font color="white" size="4">¡Empieza a triunfar en Internet!</font><input class="required" id="mce-FNAME" type="text" name="FNAME" placeholder="Tu nombre (sin apellidos)" value="" />
<input class="required email" id="mce-EMAIL" type="email" name="EMAIL" placeholder="Tu email" value="" />
<input type="submit" value="" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form></div>
<!--End mc_embed_signup-->
But for some reason, the button is clipped at the top.
Do you know how I can fix this? Thank you very much.
EDIT: Since I can't post images, you can see how it looks on the site itself: http://javierferrandez.com
source to share
The problem is with the .container div element that completes the form.
overflow:hidden
leads to this problem.
just remove it ..!
change the rules below, the page will be set ..!
//reduced width & min-width to make things nice.!
.mc-field-group {
background-color: #F68D31;
padding: 10px;
width: 1000px;
min-width: 1000px;
}
//removed overflow property below
.container {
position: relative;
margin: 0px auto;
max-width: 1140px;
}
Casting an element to its overall width and center
Add this css!
selector {
margin:0 auto;
width:100%;
}
Please note the style below
.layout-boxed .outer-container, .container {
max-width: 1000px; /*Remove this property*/
}
.container {
position: relative;
margin: 0 auto;
max-width: 1140px; /* Remove this property too */
overflow: hidden;
}
Add properties below
#mc_embed_signup {
background-color: #F68D31; /*Added background-color*/
}
.mc-field-group {
background-color: #F68D31; /*You can remove the background here */
padding: 10px;
margin: 0 auto;
width: 850px; /*This should be fixed one, but value can be of your own */
}
#mc_embed_signup input.button {
background: url(http://javierferrandez.com/wp-content/uploads/2014/10/equis-e1415619436433.png);
background-repeat: no-repeat;
top: -15px;
border: none;
position: absolute !important;
/* right: 250px; */ /*Removed it */
width: 120px!important;
height: 120px!important;
margin-left: 20px; /*Newly added property */
}
source to share
I can't see what's going on in your example, but top: -15px
combined with absolute position is going to chop off part of your button at the top of the screen. change to top: 0;
to make it top right, or a positive value to move it.
#mc_embed_signup input.button {
background: url(http://urltotheimg.com/image.jpg);
background-repeat: no-repeat;
border: none;
position: absolute!important;
left: 720px;
top: 0;
width: 120px!important;
height: 120px!important;
}
source to share
try the following code below and let me know if it works for you.
In css, remove position: absolute and top: -15px-attributes and add margin-top: 20px;
<div class="mc-field-group">
<div><input class="required" id="mce-FNAME" type="text" name="FNAME" value="" />
<input class="required email" id="mce-EMAIL" type="email" name="EMAIL" value="" /></div>
<input type="submit" value="" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
Hope it helps
thank
source to share