Consider this html:
<div class="logo-b"></div>
And this CSS:
div.logo-b {
content: url(http://placehold.it/350x150);
height: 150px;
border: 1px solid darkred;
}
I am trying to display an image using CSS. The image is not being displayed. Please see this jsfiddle to see what I mean. What am I missing please?
EDIT: It appears that Chrome renders the fiddle as I provided it above fine, but Firefox (which I use) does not. If I add :before or :after to the class name in my CSS the image displays in Firefox. Could someone shed some light on why this would be please?
EDIT: I am using the wrong construct to place the image on my page. In the context of what I am doing I should use the <img> html tag. The CSS content construct uses :before and/or after to place content, including images, but I understand these are used in specific contexts. I simply want to display a logo.
This property content is used with the :before and :after
pseudo-elements to generate content in a document. -W3C
I think the behavior in Firefox is correct.
Related
I have simple image of red indicator and I put to the image title, the html code is as below:
<img alt='' src='imageUrl' title='myExplanation' />
The problem is that the title is align to the right, you can see it in the following snapshot:
I want the title to align to the left how can I achieve this?
Also you can try some custom tooltip plugins. Like jquery tooltip
You cannot, title aligns relative to the position of your mouse pointer. OS or the Browser has control over this feature and you cannot change the default behaviour.
If you want, then create your own div element, add the content to it, and then use CSS to align it to the left
div.title {
position: absolute;
left: 0;
}
..this will float that div to the left side and use more CSS to stylize it.
Another way
Another way of doing this functionality is to use a bootstrap, twitter bootstrap would be a good start. It is a framework for CSS, JavaScript and you can use that framework to create the Title tags which are more stylized by the developers and is good for UI and UX too. Try that one if you don't want to create your own from scratch.
http://getbootstrap.com/2.3.2/
img[title]:hover:after // while hover
worked for me
<style>
img[title]:hover:after {
content: attr(title);
border:1px solid #ccc;
background-color:#aaa;
color:#f00;
}
</style>
The problem was that my browser was in Hebrew version which by default aligns text from right to left I changed my chrome to English version and it is now working! Thanks for all the answers!
DEMO LINK
As you can see on the link above I am trying to change the image when mouse hover but it's not working atm. What should I change? The parent <div> already has one hover on it.
.preview a img:hover{
background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png');
}
You are trying to change the background-image css on an <img> tag.
This will not change the "src" attribute.
in order to do that, you will need a JavaScript solution.
using jQuery:
$(".preview a img").hover(function(){
$(this).attr("src","new-image.jpg")
});
EDIT: if you're using CSS3, and it's ok for you that not all browsers will support it, you can do:
.preview a img:hover{
content:url("new-image.jpg");
}
EDIT 2:
working fiddle - http://jsfiddle.net/j3xDR/
EDIT 3:
due to requests that it will work via a parent div, here is a full example with both options:
http://jsfiddle.net/j3xDR/1/
As Shay Elkayam's answer suggested, you can use the content property in modern browsers to achieve this.
If browser support is a problem, then i suggest using a <div> instead if the <img> tag and change the divs background property on hover.
here's a working fiddle
update:
if you want to change the image on hover of the parent div, modify the css selector as in this working : fiddle
As per the HTML code the CSS is not matching:
using .preview a img will be wrong as you are calling the img tag in side the a tag in your CSS.
However your HTML says that you have img tag inside the div class=preview and a tag is above all.
There are multiple ways to achieve the output. One of the easiest way is as follows:
EDIT: As per the comment the edited script was posted as below:
$(".preview").hover(function() {
$(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png")
}, function() {
$(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/b/b3/Solid_gray.png")
})
Please jQuery in your HTML and write the above script, if you are not using CSS3.
Fiddle Demo is also modified
You could do the same thing in css as well if you do a little bit of modifications in your css
Check this updated fiddle
http://jsfiddle.net/gw6w9/1/
Here in .preview img rule, I set the height to 45px as well since, the actual image is 200px x 200px and you have set the width as 45px meaning it will scale the height to 45px as well and I set the background-image to the initial image as well. so when it loads the grey image is loaded.
I also modified your rule .preview a img:hover to .preview:hover img because
1) I don't see an a under .preview
2) You hover over the div anyway.
under this rule you can set the background-image to the new url.
Hope this works for you
As per related answers given by others, i have modified a small change without any extra javascript nor css. It works in all versions
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABJklEQVR4Ae3VPYrbUBRA4a+RJ1VSJswvGG8mhYsswRhtxT/YmNEuhtEiAmpcJjBJOQsYyyBMsF0qXcjDjNF7pAnJOd0tTqN3r/yLfPCsFfrsvUje+ao91RdvRfBGpX3Fzy6c4UKh0Ua6U+gJKLSJFgKa5FAjoE23W6hRWpp4UKeHNnIZgMzIS0rom1shXHqKDW3cgoHC2tq9PriyiQvl4JPjr8nBEIxjQo0MA8dguneHTN09VL7ySBfgsXtoCdYnoQpMu4cmZ0Oz7qEHcH8SmoOye6iWoe8QTH+4QWYb8/lHYGj/W+YjyOPe0YtLcGehUpm7Adfq2BV5coWQa9/TlnYcLG2uTj8jtUdTM6VtxBlJNGCXnGn+1PFfCegl/Y4aKz1/Lf/5CShXgVKz4A8DAAAAAElFTkSuQmCC" onmouseover="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC'" onmouseout="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABJklEQVR4Ae3VPYrbUBRA4a+RJ1VSJswvGG8mhYsswRhtxT/YmNEuhtEiAmpcJjBJOQsYyyBMsF0qXcjDjNF7pAnJOd0tTqN3r/yLfPCsFfrsvUje+ao91RdvRfBGpX3Fzy6c4UKh0Ua6U+gJKLSJFgKa5FAjoE23W6hRWpp4UKeHNnIZgMzIS0rom1shXHqKDW3cgoHC2tq9PriyiQvl4JPjr8nBEIxjQo0MA8dguneHTN09VL7ySBfgsXtoCdYnoQpMu4cmZ0Oz7qEHcH8SmoOye6iWoe8QTH+4QWYb8/lHYGj/W+YjyOPe0YtLcGehUpm7Adfq2BV5coWQa9/TlnYcLG2uTj8jtUdTM6VtxBlJNGCXnGn+1PFfCegl/Y4aKz1/Lf/5CShXgVKz4A8DAAAAAElFTkSuQmCC'" border="0" alt=""/>
DEMO
http://jsfiddle.net/ssuryar/wcmHu/468/
Here (link removed) I'm trying to replace the text in an anchor with an image, using the CSS content property. I'm guessing that it's irregular behaviour for Chrome to do what I want it to do, by replacing the text with the image I provide in the CSS code?
Here's the code I use:
<!-- HTML -->
PEGI Rating
<!-- CSS -->
.pegi18 {
content: url("http://example.com/path/path/path/18.png");
width: 50px;
height: 61px;
}
Here's the end result in MSIE 11 and Chrome 32
Why won't the images show in MSIE? I've also done tests on modern.ie.
The reason why this isn't working is because css content is meant for pseduo-elements like :after and :before
I agree with GCYrillus, I too think it is bad practice and may not work in all browsers (as your post suggests). If you want to control the picture based on a class try adding a background picture instead of the content property.
.pegi18 {
background: url("http://daylostar.com/img/gwt/pegi/18.png");
width: 50px;
height: 61px;
}
According to MDN,
The content CSS property is used with the ::before and ::after
pseudo-elements to generate content in an element.
In your case, this doesn't apply, so it really shouldn't work in any browser (Chrome appears to allow it, even though it doesn't meet the specs)
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/content
According to the CSS specification:
Applies to: :before and :after pseudo-elements
It looks like Chrome is going against the specification by allowing this property directly on an element instead of a :before or :after pseudo-element. For compatibility with other browsers, I'd recommend trying an alternative method such as using the <img> element or the background-image CSS property.
pseudo elements a:after a:before allow you to add text that appears to be part of the link. However, I can't seem to figure out a way to make that portion clickable as part of the link.
For example the following css shows the url afterward:
a:after {
content: " (" attr(href) ")";
}
...but it will not be clickable.
Anyone get around this without changing underlying HTML?
Edit: I am using chrome 13.0.782.107. It turns out it's a bug. (Thanks Sean)
It looks like you have discovered a bug in the browser you are using.
Based on the spec, the generated content should be treated as a child of the element it is being generated for. I created a JSFiddle to test this out, and the generated text is linked for me in most browsers (Chrome 13 being the solitary exception.) My guess is that you are testing in Chrome. This is a reproducible bug.
The workaround is to simply specify a background color on your links ... if you want to be able to use this for all links, declaring a background image (but not specifying an image, or using a transparent .gif - or as just pointed out, setting opacity to anything other than 1) works.
I've had the same problem and apparently if I set
a { vertical-align: middle; }
(thus on the link itself, not the pseudo element), it works.
I'm hoping someone has a better solution than this, but just in case not, I did come up with this horrible/crappy/hacky solution:
a {
margin-right: 40px;
}
a:after {
content: " (" attr(href) ")";
margin-left: -40px;
}
Just add this to your css:
a {padding-right:Ypx} /* Y = size of your url in pixels */
If the size of the URL varies you will have to use javascript to get it.
If you have a link on Wrapper then you can make pseudo-elements clickable by setting pointer-events to none.
a:after {
pointer-events: none;
}
To avoid modifying the document tree, you could use a JavaScript click handler for a:after.
Edit: This doesn't work, because pseudo elements aren't added to the DOM.
The :before and :after add content before and after the selector. In CSS, there's no selector that let's you get and edit the content inside a tag. The only way to make that happen would be with jQuery or javascript to actually edit the HTML.
I wrapped the link and the text separately -- the :before goes on the container and the link goes inside. This way I can use the :before as a jQuery tigger and the text as a link.
HTML:
<li class="before-here">My Link Text</li>
CSS:
li.before-here:before{ //some css like an image }
Jquery:
$("li.before-here").click(function(){ //do something});
I'm using this to create a hide/show toggle in a tree -- this gives me the button I need on the left and allows me to link to the parent.
I tried to figure it out using Firebug, but no chance. How is the Facebook status input border wrapped round the autosize input? Particularly, I am interested in the small triangle joined into the border. Using Firebug, I managed to find the triangle itself, which is provided in the form of a GIF image:
.uiComposerAttachment, .nub {
background: url(http://static.ak.fbcdn.net/rsrc.php/v1/zf/r/PfBgtiydy5U.gif) no-repeat center top;
height: 7px;
width: 11px
position: absolute;
left: 2px;
top: 18px;
}
But I couldn't figure out how it is placed above the input and how the border is added, in the form of a background image or defined as a CSS border?
I made a fiddle that mimics the facebook status box...
http://jsfiddle.net/UnsungHero97/mFuD4/5/
I added some functionality to the example, in particular, I found a cool jQuery plugin that allows for textarea auto-resizing.
Facebook actually uses a <textarea> element and the way they take care of the border is simple.
The "What's on your mind?" text is inside the <textarea> element and the border around it is due to several <div> element wrappers (more than the 2 I've shown above). Also, as you pointed out, the little arrow on top of the "What's on your mind?" is a .gif image, but there are ways to do this using only CSS!
Regarding the triangle...
If you're interested in alternative ways to do this using only CSS, I asked a question recently about the little triangle! Here's the question...
How can I create a "tooltip tail" using pure CSS?
... and here are the answers:
answer 1
answer 2
answer 3
answer 4 (this one is REALLY cool!!!)
I hope this helps.
Hristo
Here's how you can do it using only CSS: http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/
A similar question has been asked before though...
The border around the textarea is actually around parent div's (.uiTypeahead, .wrap) within the form. Looks like the actual textarea has no border.
As for the triangle it is just a css background inside the li (the items status, photo, video, link, etc are a list). The triangle is this element: <i class="nub"></i>. It is then positioned absolute to sit at the bottom of the list which has the form just below.
Thanks for your useful hints,
I finally managed to solve it in a four-liner:
#type_indicator { /* img#type_indicator is the triangle image tag, followed by the input field in HTML code */
position:absolute;
left:100px;
}
Greetings
Chris