.-m-refresh-btn {
background-image: url(../../content/icon/refresh.png);
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
width: 40px <--------------
}
.-m-second-button {
border: 1px solid #BBBBBB;
border-radius: 4px;
height: 40px;
color: #000000;
padding: 0 24px;
text-align: center;
cursor: pointer;
outline: none;
i can't change width button with element width . what's element change width button . Thanks all
You need to add a display property. Depends what elements you're trying to apply the styles to.
Related
I have this code:
.subbmitCommentBtn {
background: url("../images/ikon2.png") no-repeat center top;
padding-right: 15px;
padding-left: 15px;
color: white;
cursor: pointer;
height: 56px;
width: 253px;
background-color: #AF191F;
background-position: left;
background-repeat: no-repeat;
font-weight: bold;
border-radius: 20px;
border: none;
}
<input type="submit" value="Dodaj komentarz" class=" subbmitCommentBtn">
I need to add more space on the left. I would like the picture to move away from the left edge of the button (ex. padding left:10px).
How to fix it?
You need to set the background-position rather than the padding. By default, the background also covers the padding, so changing the padding doesn't influence that.
.subbmitCommentBtn {
background: url("https://i.stack.imgur.com/HOZcL.png") no-repeat center top;
padding-right: 15px;
padding-left: 15px;
color: white;
cursor: pointer;
height: 56px;
width: 253px;
background-color: #AF191F;
background-position: 10px top; /* changed from "left" */
background-repeat: no-repeat;
font-weight: bold;
border-radius: 20px;
border: none;
}
<input type="submit" value="Dodaj komentarz" class="subbmitCommentBtn">
Please note that I also had to change the background image URL for the purpose of this snippet, so don't copy the whole bunch over.
Use background-position to get padding effect. An example below:
.subbmitCommentBtn {
background: url("https://cdn.pixabay.com/photo/2018/02/04/01/54/paper-planes-3128885_1280.png") no-repeat; /* added an image for snippet */
background-size: 40px 40px; /* set background-size: 40px width and 40px height */
background-position: 15px center; /* left:15px and vertical-align:middle */
color: #f4f6f9;
cursor: pointer;
height: 56px;
width: 253px;
background-color: #d94452;
font-weight: bold;
letter-spacing: 1px;
border-radius: 20px;
border: none;
}
<input type="submit" value="Dodaj komentarz" class="subbmitCommentBtn">
So I am new to css,and have been trying to develop a basic website as a college project,but I am having problems aligning the background image for a div with class name mainhead,it leaves a whitespace at left of the screen.
Whatever width I set it to,there is a blank white space on the left.
I dont know what to do,I havent set any padding or margins and also specified left: 0px,but no joy.
The class I am having problem with is the mainhead class
Here is the code,please help!
.loginbox
{
position: fixed;
top: 0px;
margin: 0px;
left: 0px;
font-weight: bold;
background-color: #2C2C2C;
text-align: right;
width: 1370px;
height: 40px;
}
.loginbut
{
background-color: #2C2C2C;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
font-size: 100%;
color: #c9c9c9;
text-align: right;
margin-right: 50px;
margin-top: 5px;
border-color: #2C2C2C;
border-radius: 8px;
top: 10px;
text-decoration: none;
outline: none !important;
}
.loginbut:hover
{
background-color: #000000;
}
.mainhead
{
background-image: url("grey.jpg");
background-repeat: none;
border: 1px solid black;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
top: 40px;
width: 1360px;
height: 170px;
color: #c9c9c9;
text-align: center;
}
.mainhead h1
{
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
font-size: 300%;
}
Use background-position: center center; and background-size: cover; and remove width from mainhead. Hope it should work
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
Try using this reset code by Eric Meyer enter link description here and also set the .mainhead div to 100%.
As you can see, when the div expands I have no option to scroll down and I'm wondering how I would go about fixing this. Here is my css
<style>
#cust_info {
width: 300px;
min-height:350px;
margin: 0 auto;
padding: 1em;
background-color: #fff;
border-radius: 25px;
border: 2px solid #66CCFF;
padding: 20px;
position: fixed;
top: 100px;
left: 40px;
font-family: arial;
}
.more {
display: none;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff; }
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left; }
a.hideLink {
background: transparent url(up.gif) no-repeat left; }
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f; }
</style>
I gave the div a min height so it would expand without text leaving the area, but when the div expands past the screen I lose most of the div.
Please remove position:fixed from #cust_info id.
Removing that will automatically give a scroll in your page.
For keeping it left align, just give float:left to #cust_info.
I'm trying to create a button and here is the demo so far.
Right now I can't figure out how I can position the sprite image so that only the black icon is visible.
Does anyone know how I can fix this?
This is what I want to achieve with the button:
No hover:
Hover:
Here is the code I have:
HTML:
<a class="top-language" href="#" alt="Choose your language">Language</a>
CSS:
.top-language {
border: 1px solid #ddd;
padding: 5px;
text-decoration: none;
color: #000;
position: relative;
font-weight: bold;
font-size: 13px;
padding-right: 10px;
padding-left: 35px;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 0;
}
.top-language:hover {
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 -22;
}
This will work. Here is a jsfiddle
.top-language {
border: 1px solid #ddd;
width: 100px;
color: #202020;
padding-left: 10px;
padding-right: 10px;
display: block;
font-weight: bold;
font-size: 13px;
width: 80px;
margin: 0;
line-height: 22px;
text-align: right;
text-decoration: none;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat top left ;
}
.top-language:hover {
background-position: bottom left;
color: #d13030;
}
You can either:
a. reduce the height of the button;
b. increase the vertical gap between the two sprites in the image itself;
c. background: url(...) no-repeat 0 2px; adjust the value to push out the red icon
.top-language {
display: block;
width: 22px;
height: 22px;
font-size: 13px;
background: url('http://imageshack.com/a/img853/7081/1u5z.png') bottom;
text-indent: -99999px;
}
.top-language:hover {
background-position: 0 0;
}
You can provide image display position as follows:
display:inline-block
I cannot get text in the center of input button. I read articles that suggests adding line-height, but this doesn't help.
I have tried it in three different ways.
HTML:
<button type="submit" class="button validate">Submit</button>
<input type="submit" class="button validate" value="Submit"></input>
<input type=" button " class="button validate " value="Submit"></input>
CSS:
.button {
background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat;
cursor: pointer;
border: none;
display: inline-block;
line-height: 29px;
vertical-align: middle;
text-align: center;
width: 110px;
height: 29px;
color: white;
padding: 0;
font-size: 14px;
margin: 0;
}
JSFIddle: http://jsfiddle.net/M7nv6/
EDIT:
Comments below suggested that text is centered vertically. It doesn't look so, because of image shadow. I cannot change image background, it is creted by designer and have to use it.
Adding padding-bottom helped.
you should use padding-bottom for that. But here is the point you cant use paddings with height or width everything goes fine without height!
.button {
background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat;
cursor: pointer;
border: none;
display: inline-block;
line-height: 29px;
vertical-align: middle;
text-align: center;
width: 110px;
color: white;
padding: 0 0 8px;
font-size: 14px;
margin: 0;
}
You may test this:
.button {
background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat;
cursor: pointer;
border: none;
display: inline-block;
line-height: 0px;
text-align: center;
width: 110px;
height: 29px;
color: white;
padding: 0;
padding-bottom: 7px;
font-size: 14px;
margin: 0;
}
text IS centered vertically however your image have shadow and your button (in image) is really smaller in height than 29px.
change line-height to smaller (25px?) and align text to top
Since you're using background-image with shadow you could add a bottom padding like so: padding: 0 0 5px; (adjust to your needs).
Maybe it'd be better to replace the complete image with css. You can get almost the same result with about the same amount of code, saving some (in this case, 1) http requests.
As you are using a background image you may as well use padding to align it. BUT i would consider not using a background image and instead using pur CSS
DEMO http://jsfiddle.net/M7nv6/
.button {
color: rgba(255, 255, 255, 1);
text-decoration: none;
background-color: rgba(219, 87, 5, 1);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 25px rgba(0, 0, 0, .7);
-moz-box-shadow: 0px 9px 25px rgba(0, 0, 0, .7);
box-shadow: 0px 9px 25px rgba(0, 0, 0, .7);
display: inline-block;
line-height: 29px;
vertical-align: middle;
text-align: center;
width: 110px;
height: 29px;
color: white;
padding: 0;
font-size: 14px;
margin: 0;
border:none;
}
You could also move the background so it fits your text:
.button {
background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat 0px 4px;;
cursor: pointer;
border: none;
display: inline-block;
line-height: 29px;
vertical-align: middle;
text-align: center;
width: 110px;
height: 29px;
color: white;
padding: 0;
font-size: 14px;
margin: 0;
}