I have a button and I want it to be a particular size
html
<a class="button icon Raise"
onclick="raiseButtonAction(realPlayer, gameState)" id="nupp1" href="#"><span>RAISE</span></a>
css
.button {
position: absolute;
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d),
to(#65a9d7) );
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
-moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
color: white;
font-size: 19px;
font-weight: bold;
font-family: Segoe;
text-decoration: none;
vertical-align: middle;
But if I put for example width:100px; it doesn't change in size.
Am I doing something wrong or you just can't change the size of a premade button?
Try this..
.button {
display:inline-block;
min-width: 50px;
width: 80px;
padding:5px 10px;
}
That style is on an a element, which is an inline and won't accept a width. You could change it to be inline-block or block and then you'll have control over the width.
You need to make your <a> into a block level element. Here's an example of it working.
I just added this to your CSS for .button:
display: block;
width: 200px;
text-align: center;
Missing
display: block;
Have to set display to block if you want to set a fixed width on an inline element
Related
Sorry there isn't more code on this. I am new and stumped to be honest.
I have a CSS Button I am using on my webpage, code below. I'd like to put an image around the button like below... Slightly off center,behind the button itself, and which is mobile responsive.
.redbutton {
display: inline-block;
outline: none;
cursor: pointer;
margin: 10px auto 10px auto;
padding: 15px 6px 15px 6px;
font-size: 27px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
cursor: pointer;
cursor: hand;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.largebuttonwidthC {
width: 60%;
}
<div class="redbutton largebuttonwidthC">SHOW ME HOW</div>
The circle image is here:
And I'd like it to look like this:
However, I cannot seem to figure out how to do this.
Thanks,
Alex
.contain {
background: url(https://i.stack.imgur.com/Nb7M7.png);
background-repeat: no-repeat;
width: 60%;
background-size: cover;
}
.redbutton {
display: inline-block;
outline: none;
cursor: pointer;
margin: 10px auto 10px auto;
padding: 15px 6px 15px 6px;
font-size: 27px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
cursor: pointer;
cursor: hand;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.largebuttonwidthC {
width: 60%;
margin-left: 50%;
transform: translateX(-50%);
}
<div class="contain">
<div class="redbutton largebuttonwidthC">SHOW ME HOW</div>
</div>
First, you should clean your CSS and optimize it by not duplicating arguments such as "cursor: pointer", which you ca find two times in the code, also the "outline: none" should only be when the button is focused or active.
Either way, to put an image in the background you should do something similar to :
<button class="my_button" type="">My amazing button</button>
.my_button {
/*height, width, color...*/
background-image: url(img/my_img.png);
/* You can even move the image in the background to better suit your needs*/
background-position-y:-50px; /* Move the image on the Y axes*/
background-position-x: 10px; /* Move the image on the X axes*/
background-size: cover;
}
Try to something like this.
.redbutton {
display: inline-block;
outline: none;
cursor: pointer;
margin: 10px auto 10px auto;
padding: 15px 6px 15px 6px;
font-size: 16px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
cursor: pointer; cursor: hand;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
background: url(https://i.stack.imgur.com/Nb7M7.png) no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.largebuttonwidthC{
width: 535px;
min-height:150px;
}
.redbutton p{
background-color: yellow;
height: 35px;
border: 1px solid yellow;
width: 470px;
padding-top: 10px;
}
<div class="redbutton largebuttonwidthC">
<p>Click Here to instantly Download this file</p>
</div>
Not perfect but I guess you will see the idea behind: See this fiddle
.redbutton {
display: inline-block;
z-index: 10;
position: relative;
outline: none;
cursor: pointer;
margin: 0 50px;
padding: 15px 6px 15px 6px;
font-size: 27px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
cursor: pointer;
cursor: hand;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.largebuttonwidthC {
width: 300px;
}
.container {
position: relative;
margin: 50px;
}
.image {
content: "";
position: absolute;
left: -40px;
right: 0;
bottom: 0;
top: -30px;
background: url('https://i.stack.imgur.com/Nb7M7.png') no-repeat;
z-index: 0;
width: 512px;
height: 90px;
}
<div class="container">
<div class="redbutton largebuttonwidthC">SHOW ME HOW</div>
<span class="image"></span>
</div>
https://jsfiddle.net/nf7b2zx1/
.redbutton {
display: inline-block;
outline: none;
cursor: pointer;
margin: 10px auto 10px auto;
padding: 15px 6px 15px 6px;
font-size: 27px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
cursor: pointer;
cursor: hand;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
;
color: #faddde;
background: #d81b21;
background: url(https://i.stack.imgur.com/Nb7M7.png) no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.largebuttonwidthC {
width: 100%;
min-height: 70px
}
<div class="redbutton largebuttonwidthC">IAM TEXT</div>
change the buttons background to that blue circle
background-image: url(you img here...);
With a bit of CSS you can get something similar
.redbutton:before {
content: '';
position:absolute;
left:-20px;
right:-20px;
top:-20px;
bottom:-20px;
background-image: url('https://i.stack.imgur.com/Nb7M7.png');
background-size: 100% 100%;
}
How can I set z-index of the drop-down autocomplete box over a background image?
Here is a screenshot:
Below four images are background images with sprite CSS and the area box is drop-down autocomplete and it has position set to absolute and z-index set to 100, but still it's not overlapping background image.
Here is the CSS for the drop-down box and the bottom section.
Drop Down Box:
.tt-dropdown-menu,
.tt-menu {
position: absolute;
top: 79%!important;
left: 9px!important;
z-index: 1000;
min-width: 160px;
width: 94%;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0px!important;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
Below Section:
.hero-banner {
color: #555;
padding-top: 50px;
padding-bottom: 50px;
background-color: #EFEDEB;
border-bottom: 1px solid #D2D2D2;
}
Sprite CSS:
.why_casebox {
background-image: url(../images/why-casebox/why_casebox.png);
background-repeat: no-repeat;
display: block;
margin: auto;
}
.sprite-verified {
width: 128px;
height: 128px;
background-position: -143px -143px;
}
Even though the title and description text are also overriding.
.hero-banner {
z-index: 0;
}
or
I don't know whether it is position above for whole div or for the third child with icon.
.why_casebox {
z-index: 0;
}
so that image will position behind the dropdown.
I need to place the div content before the element, so I have used :before class. But it doesn't work. What could be the reason for it? Is there something incorrect with css?
.led {
/* Yellow LED */
margin-top: 3px;
width: 14px;
height: 14px;
background-color: #FF0;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0 3px 7px 0px, inset #808002 0 0px 9px, #D4D400 0 2px 12px;
margin-left: 80%;
}
.led:before {
content: "Connecting";
padding-left: 18px;
font-size: 11px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif !important;
}
<div class='led'> </div>
Everything is fine with CSS. As I understand :before and :after, it will add a content inside your div element. So, it will look something like this:
<div class="led">
<!-- content added with :before, Connecting in your case -->
Your div content
<!-- content added with :after -->
</div>
Problem that you are facing is that there is no content inside .led div, so :before and :after seem to have the same result. Your css defines .led div to have width of only 14px, so there is no place for Connecting text. You can try something like this for a quick (and ugly) fix:
.led:before {
content: 'Connecting';
margin-left: -60px; /* CHANGED */
font-size: 11px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif !important;
}
.led {
/* Yellow LED */
margin-top: 3px;
width: 14px;
height: 14px;
background-color: #FF0;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0 3px 7px 0px, inset #808002 0 0px 9px, #D4D400 0 2px 12px;
margin-left: 80%;
}
<div class="led"></div>
Better solution might be to enclose .led div with another one and add :before to that parent div, something like this:
.holder {
margin-left: 80%;
}
.holder:before {
content: 'Connecting';
font-size: 11px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif !important;
}
.led {
/* Yellow LED */
margin-top: 3px;
width: 14px;
height: 14px;
background-color: #FF0;
border-radius: 50%;
display: inline-block;
box-shadow: rgba(0, 0, 0, 0.2) 0 3px 7px 0px, inset #808002 0 0px 9px, #D4D400 0 2px 12px;
}
<div class="holder"><div class="led"></div></div>
I have 2 elements sharing the same class .cta. The CTA inside of .casino-box looks great, however the one inside of .header-box is accounting for the 165px of space taken up by .top-nav-bar and .nav-bar.
How can I get the top CTA to ignore the added spacing of those two nav bars, without having to split the css code for the CTAs?
Link to CodePen
.cta {
max-width: 600px;
margin: 0 auto;
text-align: center;
position: relative;
top: 50%;
margin-top: -80px;
}
.cta h1 {
color: #fff;
weight: 500;
text-shadow: 0px 0px 4px black;
}
.cta .button {
color: #fff;
border-color: #fff;
font-weight: bold;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
text-shadow: 0px 0px 4px black;
}
.cta .button:hover {
color: #90281F;
background: #fff;
text-shadow: none;
}
.cta hr {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
}
You have to set negative margin-top with the height of .top-nav-bar and .nav-bar plus your normal margin so the two div could be aligned in center. In this case it would probably be as following:
.header-box .cta {
margin-top: -205px;
}
I have the following JSFiddle: http://jsfiddle.net/eotamvwy/
HTML:
<div class="infobox-container">
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<div class="infobox">
<h3><span>This is the Header</span></h3>
<p>This is the content of the infobox.<p/>
</div>
</div>
How can I modify the CSS so that it is responsive?
I have a div which has the following style:
width: 98%
padding: 0 1% 0 1%
I want to insert the infobox-container inside and stretch it 100% and resize based on the above div.
Use percentage units for responsiveness and for triangles you don't need extra elements, you could use :after and :before :pseudo-elements on .infobox h3.
Updated Fiddle
body {
width: 100%;
margin: 0;
}
.main-container {
width: 98%;
padding: 0 1% 0 1%;
text-align: center;
}
.infobox-container {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
width: 100%;
}
.infobox {
width: 80%;
padding: 10px 5px 5px 5px;
margin: 10px;
position: relative;
z-index: 1;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
background: #424242;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
background-image: -moz-linear-gradient(top, #6a6a6a, #424242);
color: #fff;
font-size: 90%;
}
.infobox h3 {
position: relative;
width: calc(100% + 22px);
color: #fff;
padding: 10px 5px;
margin: 0;
left: -15px;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
background: #3198dd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background-image: -moz-linear-gradient(top, #33acfc, #3198dd);
font-size: 160%;
text-align: center;
text-shadow: #2187c8 0 -1px 1px;
font-weight: bold;
}
.infobox h3:before,
.infobox h3:after {
content: '';
border-color: transparent #2083c2 transparent transparent;
border-style: solid;
border-width: 12px;
height: 0;
width: 0;
position: absolute;
left: -12px;
top: 100%;
transform: translateY(-50%);
z-index: -1;
/* displayed under infobox */
}
.infobox h3:after {
border-color: transparent transparent transparent #2083c2;
left: 100%;
margin-left: -12px;
}
.infobox a {
color: #35b0ff;
text-decoration: none;
border-bottom: 1px dotted transparent;
}
.infobox a:hover,
.infobox a:focus {
text-decoration: none;
border-bottom: 1px dotted #35b0ff;
}
<div class="main-container">
<div class="infobox-container">
<div class="infobox">
<h3><span>This is the Header</span></h3>
<p>This is the content of the infobox.</p>
</div>
</div>
</div>
If you want this header ribbon to be responsive, you need to get away from using fixed-widths and instead combine width:100%; and max-width: 270px; (or whatever).
When you define the width attribute to be 270px, you are telling the browser you want this particular element to have both a minimum and maximum width of 270px. If you are thinking responsively, what you actually want is for your element to expand as much as possible (width:100%), but to max-out at 270px (max-width: 270px;).
Thats the responsive bit.
What you are actually after is something closer to this:
http://jsfiddle.net/TheIronDeveloper/eotamvwy/3/
* {
box-sizing: border-box;
}
.infobox-container {
position: relative;
display: block;
margin: 0;
padding: 0;
max-width: 500px;
width: 100%;
}
.infobox {
padding: 3em 5px 5px;
margin:10px;
position: relative;
z-index: 90;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background: #424242;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
background-image: -moz-linear-gradient(top,#6a6a6a,#424242);
color: #fff;
font-size: 90%;
}
.infobox-ribbon {
position: absolute;
top: 10px;
width: 100%;
color: #fff;
padding: 10px 5px;
margin: 0;
z-index: 100;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background: #3198dd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background-image: -moz-linear-gradient(top,#33acfc,#3198dd);
font-size: 160%;
text-align: center;
text-shadow: #2187c8 0 -1px 1px;
font-weight: bold;
}
.infobox-container .triangle-l {
border-color: transparent #2083c2 transparent transparent;
border-style:solid;
border-width:13px;
height:0;
width:0;
position: absolute;
left: -12px;
top: 45px;
z-index: 0; /* displayed under infobox */
}
.infobox-container .triangle-r {
border-color: transparent transparent transparent #2083c2;
border-style:solid;
border-width:13px;
height:0;
width:0;
position: absolute;
right: -12px;
top: 45px;
z-index: 0; /* displayed under infobox */
}
.infobox a {
color: #35b0ff;
text-decoration: none;
border-bottom: 1px dotted transparent;
}
.infobox a:hover, .infobox a:focus {
text-decoration: none;
border-bottom: 1px dotted #35b0ff;
}
<div class="infobox-container">
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<h3 class="infobox-ribbon">This is the Header</h3>
<div class="infobox">
<p>This is the content of the infobox.</p>
</div>
</div>
I did a few things here:
I applied * {box-sizing:border-box;}, which does a nicer job at making elements "mold" to the widths that I tell them to (regardless of margins), more details here
I took the h3 ribbon out of the infobox, and changed its position to absolute. My reasoning is that the h3-ribbon needs to conform to the info-box container's width, not the infobox itself. That way, regardless of the width, the ribbon will conform to its parent, and the infobox can occupy its 100% + margins (which should always be even on both sides.)
And like I mentioned before, I changed the fixed-width of the infobox-container to width:100%;max-width:500px;. If you try resizing down, the ribbon stays in place.
I think you can just make a couple of small changes to make all the sizes responsive at least to the content:
The most important changes:
Use 'Calc' to set the width. Support is reasonable well (see caniuse), but you could also solve this differently using negative margins (or probably other ways as well).
.infobox h3 {
width: calc(100% + 20px);
}
The right arrow can simply be solved by setting right to -12px, just as the left one has left: -12px.
.infobox-container .triangle-r {
right: -12px;
}
.infobox-container {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
width: auto;
}
.infobox {
padding: 10px 5px 5px 5px;
margin:10px;
position: relative;
z-index: 90;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background: #424242;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
background-image: -moz-linear-gradient(top,#6a6a6a,#424242);
color: #fff;
font-size: 90%;
}
.infobox h3 {
position: relative;
width: calc(100% + 20px);
color: #fff;
padding: 10px 5px;
margin: 0;
left: -15px;
z-index: 100;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background: #3198dd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background-image: -moz-linear-gradient(top,#33acfc,#3198dd);
font-size: 160%;
text-align: center;
text-shadow: #2187c8 0 -1px 1px;
font-weight: bold;
}
.infobox-container .triangle-l {
border-color: transparent #2083c2 transparent transparent;
border-style:solid;
border-width:13px;
height:0;
width:0;
position: absolute;
left: -13px;
top: 54px;
z-index: 2; /* displayed under infobox */
}
.infobox-container .triangle-r {
border-color: transparent transparent transparent #2083c2;
border-style:solid;
border-width:13px;
height:0;
width:0;
position: absolute;
right: -12px;
top: 54px;
z-index: 2; /* displayed under infobox */
}
.infobox a {
color: #35b0ff;
text-decoration: none;
border-bottom: 1px dotted transparent;
}
.infobox a:hover, .infobox a:focus {
text-decoration: none;
border-bottom: 1px dotted #35b0ff;
}
<div class="infobox-container">
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<div class="infobox">
<h3><span>This is the Headewefewfewfewfewfewfewfr</span></h3>
<p>This is the content of the infobox.</p>
</div>
</div>