This question already has answers here:
How do I combine a background-image and CSS3 gradient on the same element?
(20 answers)
Closed 5 years ago.
I would like to display image to the left (border same as left border of white section to the left of blue box). Now Image will be visible only when remove background-image: linear-gradient(#a4c2e8,#e2eaf2);
But I want to preserve the gradient effect. How to do that ?
.quate_sidebar {
list-style: outside none none;
margin: -6px;
margin-top: 5px;
padding: 30px;
padding-right: 126px;
padding-bottom: 5px;
}
.quate_sidebar li {
position: relative;
display: inline-block;
padding: 15px 25px;
padding-bottom: 0px;
margin-bottom: 10px;
margin-left: 14px;
background-image: linear-gradient(#a4c2e8, #e2eaf2);
/* text styles */
text-decoration: none;
color: #4174c5;
font-size: 13px;
font-family: initial;
font-weight: 100;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
display: block;
margin: 5.5px 0;
padding: 10px 10px 10px 50px;
}
.quate_icon_1 {
background: url(img/get_quate/get_quate_icon_1.png)no-repeat scroll 15px center;
}
<ul class="quate_sidebar">
<li class="quate_icon_1">Csab </li>
<li class="quate_icon_1">Maryy</li>
</ul>
Please refer the code here:
https://jsfiddle.net/edp5o27u/
Use the following in .quate_sidebar li:
background-image: url('http:/placehold.it/30'), linear-gradient(#a4c2e8, #e2eaf2); background-repeat: no-repeat, repeat;
See also this fiddle
If you add the icon background image to the <a> element, then you can keep the gradient background image on the <li> element.
.quate_sidebar li {
position: relative;
display: inline-block;
padding: 15px 25px;
padding-bottom: 0px;
margin-bottom: 10px;
margin-left: 14px;
background-image: linear-gradient(#a4c2e8, #e2eaf2);
/* text styles */
text-decoration: none;
color: #4174c5;
font-size: 13px;
font-family: initial;
font-weight: 100;
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
display: block;
margin: 5.5px 0;
padding: 10px 10px 10px 50px;
}
a.quate_icon_1 {
background: url(img/get_quate/get_quate_icon_1.png)no-repeat scroll 15px center;
}
Related
This is the main code that positions the box. I need to make the search input along with the other parts always center on any size screen. The input area of the box keeps moving to the far right of the screen, which is a problem.
.wsite-search {
position: relative;
margin-top:78px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
}
.wsite-search-input:focus {
background: #f8f8f8;
border: 1px solid #000;
}
.wsite-search-input {
width: 158px;
height: 19px;
border: 0;
padding: 10px 45px 10px 7px !important;
font-family: 'Oxygen', sans-serif;
color: #8e8e8e;
font-size: 17px;
line-height: 24px;
background: #fff;
border: 1px solid #000;
border-radius: 3px;
font-weight:300;
}
.wsite-search-button {
position: absolute;
width: 18px;
height: 18px;
border: 0;
right: 14px;
top: 10px;
background: url(submit-button-v3.png) no-repeat 0px 0px;
}
are you trying to center just the input box itself, if so you can center it by using margin
margin: 0 50%;
http://jsfiddle.net/rlynjb/eyjzhj8s/
if you want to center both input and button in the middle. you can wrap those 2 elements in a div tag and use the margin: 0 50% to center both elements.
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 am trying to keep my ul and li elements that are inside of a div to respect the div's width with margin-left: auto. I am also not wanting ul/li to extend out of the div. I want the ul and li elements to stay inside the div container. From what I have read, this code is correct because I have the child elements contain a width which should be according to div's width.
#phonequeue {
display: block;
width: 400px;
height: 800px;
border-width: 5px;
border-color: white;
border-style: solid;
float: right;
margin-top: -650px;
}
li {
display: block;
padding: 15px;
text-align: left;
height: 1.2 em
padding-left: 15px;
padding-right: 15px;
margin: 0px 0px 4px 0px;
background-color #555
-webkit-border-radius: 15px;
border-radius: 40px;
background: -webkit-gradient(linear, 0% 0%, 0% 30%, from(#444), to(#111));
font-family: verdana, arial, helvetica, sans-serif;
font-size: 22px;
width: 100%;
margin: auto;
}
ul {
list-style-type: none;
width: 100%;
margin: auto;
}
index.html:
<div id="phonequeue">
<ul>
<li class="avail">
<span class="pname">John Doe</span>
<span class="ptime">03:00</span>
</li>
</ul>
</div>
UPDATE: Here is a working example. The element width is 430px; when the parent div is 400px;. I would the child elements to center themselves in div and have their width respecting the parents width. http://jsfiddle.net/FBvQJ/4/
I believe the problem was with the use of width: 100%
Check this jsFiddle and let me know if this answers your question.
This is the updated CSS to solve the overlapping width:
phonequeue {
display: block;
width: 200px;
border: 1pt solid green;
}
ul{
border: 1pt solid red;
list-style-type: none;
margin: auto;
padding: 0;
}
li {
display: block;
padding: 15px;
text-align: left;
height: 1.2em;
margin: 0px 0px 4px 0px;
-webkit-border-radius: 15px;
font-size: 22px;
margin: auto;
border: 1pt solid #ccc;
}
I don't think you need to define the full width for each element.
If you'd like the text centered in the DIV, remove the width on the LI tag and make the margin:
margin: 0px auto 4px auto;
That will center the text within the div.
If I'm understanding your question correctly (which is dubious) I believe you can achieve the centering you require by removing the 100% widths and using text-align:center:
li {
display: block;
padding: 15px;
text-align: left;
height: 1.2 em;
padding-left: 15px;
padding-right: 15px;
margin: 0px auto 4px auto;
background-color #555;
-webkit-border-radius: 15px;
border-radius: 40px;
background: -webkit-gradient(linear, 0% 0%, 0% 30%, from(#444), to(#111));
font-family: verdana, arial, helvetica, sans-serif;
font-size: 22px;
text-align:center; /* < this (or not, if you don't actually want it centred after all) */
}
ul {
list-style-type: none;
padding:0; /* < and this */
margin: 0;
}
Demo fiddle
And later, when you decide that you want the time on the right use
.ptime {float:right;}
example
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;
}
I have a vertical menu having an item "Click here to get the scientific name".
on hover it is showing like
I need to get the overflow part after the black background image to be in the next line(i cannot increase the image width at all.). How can I write the style for that.
css:
on hover
{
display: block;
background: url('/../.png') no-repeat 0px 2px #2F2F31;
text-decoration: none;
color:..;
}
This is coming under
<td>
<div id="first">
<ul id="second">
<li>Click here to get the scientific name
And css:
#first {
display: block;
width: 180px;
min-height: 50px;
float: left;
}
ul#second {
display: block;
clear: both;
margin: 50px 0px 12px 0px;
border-bottom: 1px solid
#C8C8C8;
}
ul#second li {
border-top: 1px solid
#C8C8C8;
padding: 0px;
display: block;
}
ul#second li a {
color:
#004C8E;
margin: 4px 0px 4px 0px;
padding: 4px 0px 4px 12px;
display: block;
text-decoration: none;
font-size: 12px;
background: url('/../.png') no-repeat 0px 2px;
}
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background:
transparent;
}
On hover, you should explicitly set the width of the element to equal the width of the image.
FOr this you can use word-wrap:break-word;. Write like this:
p{
word-wrap:break-word;
}