I'm trying to make this text align with the border. However, as of now what I have found are just mismatches.
Defect menu-button img
.subscribe-now {
position: absolute;
display: table-cell;
text-align: center;
background-color: #eb5e28;
line-height: 1em;
border-radius: 25px;
padding: 0.5rem 1rem;
vertical-align: center !important;
width: 200px !important;
height: 40px !important; // If I change this to auto then the size is so big and I need minus padding :(
padding-top: 0px;
padding-bottom: 0px;
border-image:
margin-left: 20px !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
}
You can try this approach. See if this works for you. Let me know
.subscribe-now {
text-align: center;
background-color: #eb5e28;
border-radius: 25px;
vertical-align: middle;
width: 200px;
height: 40px ;
color: white;
font-weight: bold;
border: 0px solid #eb5e28;
}
<button class="subscribe-now">Langganan Sekarang</button>
Related
I have this image that I'm trying to position to a certain spot, but no matter what I try the image stays a the bottom. I've been able to center the image horizontally but now I want to manipulate it vertically and get it to the top or near the top area. It baffles me how margin isn't working; how would I go by doing it?
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
background: linear-gradient(to bottom right,#e66465, #9198e5);
font-family: sans-serif;
}
.signup-forms{
background-color: #ffffff;
max-width: 350px;
margin: 5% auto;
text-align: center;
border-radius: 5px;
box-shadow: 0px 0px 25px 0 #3d3d3d6e;
padding: 20px 5px;
}
.signup-forms h3{
color: #EB4D8A;
margin-top: 20px;
}
.signup-forms p{
color: #C3BFDA;
font-weight: 600;
font-size: small;
margin-bottom: 20px;
}
.signup-input{
outline: none;
width: 75%;
background-color: transparent;
padding: 10px 5px;
border: none;
border-bottom: 1px solid #C3BFDA;
font-weight: bold;
margin: 15px;
}
.signup-input::placeholder{
color: #C3BFDA;
}
.signup-btn{
background-color: #fc4186;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 20px;
transition: 0.3s;
}
.signup-btnTwitter{
background-color: #54ACF0;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 10px;
transition: 0.3s;
}
.logo-img{
height: 60px;
width: 60px;
background-color: #fff;
border-radius: 50%;
padding: 10px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 100%;
}
The image I'm trying to manipulate is .logo-img
We can't know much since there's not html code, but you can do :
`margin-top : -100px` //or how many pixels you like
or you can use the :top or bottom
Example:
top: 20%
or
bottom : 20%
or you can :
position: absolute;
z-index : 1;
You can visit the site I am trying to work on here.
I am trying to get basically the layout as in the top right box in the bottom right box, but for some reason I cannot get it to float to the right. Is there something I am missing here? It's driving me nuts because my code works in the upper box but not in the lower one.
Here's the HTML.
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
VIEW MENU
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
</div>
</div><!--end hours-->
</div><!--end container-->
And the CSS.
/*menu ad*/
div#menu-ad {
position: relative;
margin-right: -11px;
margin-top: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
.titles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2.5rem;
color: #d6832e;
}
#ad {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.6rem;
line-height: 1.35;
color: #4f4d4b;
margin-top: .5rem;
width: auto;
}
a#button {
padding: .6rem 1.3rem .6rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #fff;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
margin-right: -11px;
margin-top: 11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10p;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 150px;
display: inline-block;
}
Thanks for any help! It's probably something simple and I just need a fresh pair of eyes.
you seem to have a typo,
under the style rule for
div#hours
you have
padding: 11px 11px 10px 10p;
your missing an 'x' at the end. Which means the padding rule is not being applied
Now this solves the alignment, but the height might not be right now, but I'm sure that should be straight forward
See: fiddle
When the window is long enough, both divs are in the same line, but when it's smaller, the second div(.footers) moves to a new line. I wan't them to be in the same line all the time.
Css from the left div:
.footer .footer_links {
float: left;
width: 250px;
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
Css from the right div:
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
}
What is causing this problem?
If you only want to give the left div (.footer_links) a fixed height, instead of floating the div on the right (.footers), give it overflow:hidden. This will cause it to fill the remaining width of the page:
.footer .footers {
text-align: left;
overflow:hidden;
padding: 0px 20px 0px 20px;
}
JSFiddle
.footer .footer_links {
float: left;
width: 20%; // In percent
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
.footer .footers {
text-align: left;
float: left;
width:70%; // In percent
padding: 0px 20px 0px 20px;
}
You can add to a .footers div a white-space , and fixed height:
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
white-space: nowrap;
height: 20px;
}
try this give max-width:
DEMO
CSS
footer {
background: #f2f2f2 !important;
margin-top: 20px;
padding: 10px 0px 10px 0px;
}
.footer .footer_links {
float: left;
width: 250px;
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
.footer a {
font-size: 14px;
color: #898989 !important;
}
.footer .footers {
text-align: left;
overflow:hidden;
padding: 0px 20px 0px 20px;
}
.footer .footers p {
font-size: 14px;
color: #898989;
line-height: 20px;
}
.clear{
clear: both;
}
in DEMO2 you have write max-width: then its working
DEMO2
CSS
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
max-width:300px;
}
Can't figure out how I"m getting this extra white space around my image:
The markup:
<div id="member-name" hidden="true">
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>
the styles:
input, textarea
{
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: .9em;
margin: 5px 0 6px 0;
padding: 5px 2px 5px 5px;
width: 300px;
}
img
{
display: block; /* gets rid off any unexpected margins round the image */
border: 0px;
}
input[type="submit"], input[type="button"], button
{
background-color: #ffffff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
width: auto;
vertical-align: middle;
border: 0px;
}
td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
UPDATE:
There's also this style in there:
#member-name
{
margin: 30px 0px 0px 0px;
height: 30px;
font-weight: bold;
color: white;
padding: 1px 1px 0px 1px;
background-color: #d28105;
border: 1px solid darkgray;
}
#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}
Can't you just provide the image as a background to the button element?
#btnExpandSection {
background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
height: /* image height */;
width: /* image width */;
}
I would start with this, and build it back from here...
button,
#member-fullName,
#member-name,
#btnExpandSection,
#btnExpandSection img {
margin: 0;
padding: 0;
}
But the following would definitely be preferably to an image nested between <button></button> tags. Replace 32px with actual width and height values of your image.
button {
background-image: url(~/Content/Images/plus.jpg);
width: 32px;
height: 32px;
}
I have the following CSS to style a button and an anchor tag as they have the same button style but they are in different locations. SO I thought to give them the same CSS so that they would both render exactly the same. However, the button.enter has the text pushed down. The first one works fine. It would work with padding:0 but that would affect the first one.
Any ideas?
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle;
}
Just add another style that will reset the padding on the button alone. Some of your css is unrequired as well. vertical-align:middle; does nothing in this case for example.
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
}
button.enter {
padding:0;
}
You need to mention margin and padding as 0 coz button has the default margin and padding.
Add this below code
a.enter, button.enter {
text-decoration: none;
background: green url('../img/enter-button_small.png') no-repeat 0px 0px;
line-height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle; display:inline-block; padding:0; margin:0; border:none
}
Here is working demo http://jsfiddle.net/6Ygc2/