I need to put an image to an input button but it doesn't work with my code.
This is the code, and it says "couldn't load the image", please help me:
.button-search {
background-image: url('images/lupa.png');
no-repeat scroll center #F1F1F1;
cursor: pointer;
display: inline-block;
float: right;
height: 27px;
overflow:hidden;
text-indent: -9999em;
width: 36px;
border: none;
margin-right: 48px;
}
You have two problems:
First, you have a semi-colon after the background-image selector, but before its parameters. no-repeat scroll center $F1F1F1 are parameters of the background selector (and should be seen as if on the same line, not that the line break matters). Which brings up the next point: wrong selector.
Second, the correct selector (for what you are doing) is background not background-image. The background selector is a "short-hand" selector, and allows you to set (1) background-image, (2) background-position, (3) background-color, (4) background-repeat, etc. But the background-image selector ONLY allows you to set the background image.
jsFiddle Demo
Here is the corrected code:
.button-search {
background: url('http://placekitten.com/g/50/50')no-repeat scroll center #F1F1F1;
cursor: pointer;
display: inline-block;
float: right;
height: 27px;
overflow:hidden;
text-indent: -9999em;
width: 36px;
border: none;
margin-right: 48px;
}
Also note that the text-indent selector (set to -9999em) will move the button text to the left, and (at -9999em) all the way off the screen -- and possibly into a neighbor's house, their kitchen perhaps. Probably you already know this...?
If you get that error, then you got the image URL wrong.
Related
I'm making a plotted chart in react.js and have a tooltip div that is created from the absolute position of the plot point x/y coordinates. When the popover text is too long it collides with the browser only on the left side, for whatever reason it wraps properly on the right side as seen in the photo. How do I get the wrapping behavior to occur on both sides?
.tooltip {
position: absolute;
text-align: center;
padding: 2px;
font: 12px sans-serif;
background: white;
opacity: 0.8;
border: 0px;
border-radius: 3px;
pointer-events: none;
min-width: 60px;
}
I don't have the code, thus I cannot code it, but I assume you would do a #media query on some particular screen width and change the .tooltip css properties - the width for example.
Hope it helps!
I have an icon in a :before pseudoelement, and if the textelement becomes to long and goes to the next row, I want it to not wrap around my pseudoelement but keep it's distance.
Here is a link to my example:
http://jsbin.com/yosevagaqa/1/edit?html,css,output
If you resize the window so that the text is forces into a new line, you can see the problem.
How can I avoid this?
As you can see from the other answers, there are multiple solutions!
If the size of the square in :before is always the same, one other solution would be to add
.link {margin-left:25px; text-indent:-25px;}
to the CSS. This causes the entire block to be shifted to the right, except for the first line, containing the square, which gets "outdented".
http://jsfiddle.net/MrLister/3xbfyqkh/
Or what I would prefer, with sizes in ems, so that the red square depends on the font size.
.link:before {
/* .. */
width: 1em; height: 1em;
margin-right: .5em;
}
.link {margin-left:1.5em; text-indent:-1.5em;}
Making sure, of course, that the indentation is the same as the size + the margin of the square.
http://jsfiddle.net/MrLister/3xbfyqkh/1/
Another approach, since the purpose is to make a custom "bullet", would be to treat the h5 like a list item. Then you won't need the ::before trick. You will need other tricks to make the square the right size though...
.link {
display:list-item; list-style:square;
color:red;
font-size:2em; line-height:.5em;
margin:.5em 0 .5em 1em}
.link a {
font-size:.417em; vertical-align:.3em}
http://jsfiddle.net/MrLister/3xbfyqkh/5/
You can add following CSS:
.link{
float: right;
width: calc(100% - 25px);
}
.link{
position: relative;
padding-left: 25px;
}
.link:before {
content: "";
background: red;
background-size: contain;
width: 15px;
height: 15px;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
position: absolute; top: 0; left: 0;
}
<h5 class="link">A long link that might wrap and then it gets all weird and stuff</h5>
Here is the css part:
#selectTagId{
background-color: transparent;
color: white;
background-image: url('images/img01.jpg');
background-position: right;
overflow: hidden;
}
The image path is correct. But the image isn't shown. Instead, the background is white? Ughhh how to solve this?
For me, it works with an absolute img path. See http://jsfiddle.net/9qf59/2/
Keep in Mind, that relative paths in css can lead to some odd effects. they are relative to the css file, not the document.
Did you apply this style to a div? if so, you must specify width and height of that div:
#selectTagId{
background-color: transparent;
color: white;
background-image: url('images/img01.jpg');
background-position: right;
overflow: hidden;
width: 200px;
height: 200px;
}
I have a question regarding some CSS that I'm sure has a simple solution, but just not obvious enough for me to find it yet.
I have a div defined in my HTML file with a background image, which I set in my CSS file. I then set a hover state for the div using CSS so that the background image would change on mouse over. I then placed text on top of the div in my HTML file, to make a button with text on it.
Here is where I run into my problem, however - when I mouse over the image (background image of the div), the image changes, but when my cursor hits the text on top of it, the hover state changes back to the regular one, changing the background image as well, while the text doesn't change. When I move the cursor away from the text, it changes back to the hover state.
I have the code set up in a JSFiddle at http://jsfiddle.net/Cwca22/jk7ty/ - any help would be greatly appreciated! Thanks in advance!
You can really simplify your code.
HTML
<a class="button" href="directions.html">Get Directions</a>
CSS
a.button {
background: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-button.png') no-repeat;
color: white;
display: block;
font-family: Ovo, serif;
font-size: 18px;
height: 42px;
line-height: 42px;
text-align: center;
width: 135px;
}
a.button:hover {
background-image: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-hover.png');
color: #fff;
}
:hover only applies when you are hovering over that element or one of it's children. You created the button with one element, and then created the text and used CSS trickery to position it over the button. As soon as you hover over the text, the browser thinks you're no longer hovering over the button, and drops the new background.
Also, styles cascade. So in the rules for :hover, you need only specify the attributes that have changed. (In this case, background and color.)
fiddle: http://jsfiddle.net/jk7ty/10/
Move the Get Directions link inside the main div. You'll need to do some formatting for it but this should get you pretty close.
<a href="directions.html">
<div id="getDirections" class="getDirections" style="margin-top: 10px; margin-left: 131px;">
<h3 class="getDirectionsText" style="margin-left: 154px; margin-top: -28px; font-size: 14px; font-weight: 300;">Get Directions</h3>
</div>
</a>
I rewrote and simplified it for you and it works now:
Here's the link:
Get Directions
Here's the CSS:
a.getDirections {
display: block;
background: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-button.png') no-repeat top left;
width: 135px;
height: 30px;
font-family: Ovo, serif;
font-size: 15px;
color: white;
text-align: center;
text-decoration: none;
padding: 12px 0 0 0;
}
a.getDirections:hover {
background: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button- hover.png') no-repeat top left;
}
A few things to note:
You can treat an A tag like a div if you give it a display: block; property
Since I put 12px padding on the top, I subtracted 12px from the height: property to leave only 30px (the button is actually 42px high)
I suggest reading about the "box model" (google it) to help out in future
You can also check it out on JSFiddle if you like:
http://jsfiddle.net/nerdburn/95ysC/
I would keep all of the HTML in the HTML section and the CSS in the CSS section. This just helps with keeping it all straight especially when you are testing.
This will give you a good result:
<div id="getDirections" class="getDirections"><h3 class="getDirectionsText">Get Directions</h3></div>
#getDirections {
display: table;
}
.getDirections {
background-image: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions- button.png');
background-repeat: no-repeat;
width: 135px;
height: 42px;
cursor: pointer;
}
.getDirections:hover {
background-image: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-hover.png');
background-repeat: no-repeat;
width: 135px;
height: 42px;
cursor: }
a{
text-decoration:none;
}
h3 {
font-family: Ovo, serif;
font-size: 18px;
color: white;
display:table-cell;
vertical-align: middle;
text-align: center;
}
If you use this code style you can make changes to your element sizes without having to rework the centering of the text.
tab-ver.tab {
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
<div id="tab-ver" class="tab">English</div>
The problem of above script is that the a link doesn't work at all. If the user clicks the 16by16.png image, the user is not redirected to yahoo.com.
However to fix this problem?
Thank you
// update001//
I have tried the following suggestion:
#tab-ver.tab {
text-indent: -10000em;
}
#tab-ver.tab a{
background: url(../images/16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
display: block;
}
It works for my original problem. However, the displayed image now is offset to bottom of the horizontal menu. It is caused by 'display: block'. However, if I remove 'display:block', then the image will be invisible.
thank you
// update 1 //
Based on the suggestion, the following script works best for me
#tab-en-ver.tab a {
background: url(../images//16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
text-indent: -10000em;
}
However, this suggestion does have one problem. The text 'English' mixes with the image. I cannot figure out how to remove the text 'English' from a link.
by adding the following extra rule will cause the image disappear.
#tab-ver.tab {
text-indent: -10000em;
}
any idea?
Give that CSS to the <a> instead. Add a display: block so it'll display as a block-level element like the <div>. The <div> will expand to fit the <a>.
EDIT: try inline-block instead and see if it helps.
#tab-ver.tab a {
display: inline-block;
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
If you want the text ("English") to be hidden, than you have to use <img/> tag, with an alt attribute, something like:
<img src="english-flag.png" alt="English" />
You can also use some CSS hacks, but:
What for? It's so easy to do it with plain HTML!
Those are hacks, so they may work or not in different browsers.
One of such hacks can be to set a background to the <a/> element, to offset the text, to set the overflow to hidden, and to set fixed width:
a{
padding-left:16px;
overflow:hidden;
display:block;
width:16px;
height:16px;
url(../images/16by16.png) no-repeat left top;}
English
You can have the a tag fill up the div by using:
a {
display: block;
height: 16px;
}
You can then also remove the height from the div as it will grow automatically.