I want to give captions to the images. There are two options I find.
By jquery
By only CSS
I think the second one is the cool way to go for it
I think airnb is doing it second way.
but I could not figure it out using firebug.
can you give me a simple example or any useful blog link for the same.
There's option 3) Through HTML (and CSS). Why not just add a caption in the HTML?
But to answer your question, if you want to do it in CSS, you can using something like this:
img {
margin-bottom: 50px; /* Make room */
}
img:after {
content: 'The caption of the image';
display: block;
position: absolute;
top: 100%;
}
You will still need a container for the positioning to work. And I can imagine the caption text should not actually be in CSS, so a pure CSS solution isn't ideal.
Related
I was wondering if anyone here would be as so kind as to help me out a bit. I am looking to make expandable paragraphs for my client's website. They would like to keep all of the content from their site, which is pretty massive, and they want a total overhaul of the design. They mainly wan tot keep it for SEO purposes. Anyhow, I thought it would be helpful for the both of use if there is some way to use expandable paragraphs, you know, with a "read more..." link after a certain line of text.
I know that there are some JQuery and Java solutions for this, but we really would like to stay away from those options, if at all possible. When would like HTML and CSS, if we can.
Here is kind of an example:
HEADING HERE
Paragraph with a bunch of text. I would like this to appear in a pre-determined line. For example, maybe the start of the paragraph goes on for, let's say, three lines and then we have the [read more...]
When the visitor clicks "read more", we would like the rest of the content to just expand to reveal the article in its entirety. I would like for the content to already be on the page, so it just expands. I don't want it to be called in from another file or anything, if that makes sense.
Thank you in advance for any and all help. It will be greatly appreciated!
Testudo
an easy solution would be this
you will just need 2 toggle events in css with display: none; and display: block;
http://jsfiddle.net/6W7XD/1/
of course you would need to pre-program where you want to start the hide by including a div of it with the close button span inside the div to do the toggles
and if u do decide to javascript it
here is what you can look at
http://jedfoster.com/Readmore.js/
I think you need to use Jquery or Javascript
$('a').click(function() {
var p = $('a').prev('p')
var lineheight = parseInt(p.css('line-height'))
if (parseInt(p.css('height')) == lineheight*2) {
p.css('height','auto');
$(this).text('Less')
} else {
p.css('height',lineheight*2+'px');
$(this).text('More')
}
});
DEMO
This can be achieved using the :target selector for a jQuery/Javascript-less option.
To do this, you need to set each of the expanding texts as targets (give them an id). Then, set the "Show more" tab as a target to said id/target.
Something like:
.article {
position: relative;
border: 1px solid grey;
overflow: hidden;
width: 300px;
}
.article:target {
height: auto;
}
.article:not(target) {
height: 50px;
}
.toggle {
padding: 2px;
position: absolute;
right: 0px;
bottom: 0px;
background: white;
border: 1px solid red;
}
You can view a testable fiddle here.
Note I use :not(:target) to make sure it's the right size when not selected.
I was wondering if it was possible to replace an image on an html page using the only the stylesheet. I know this is not common practice, but the only thing I have access to is the stylesheet and they used inline styles in the html. I have no way of editing the html file.
I inspected the element and it looks like this:
I'm trying to replace the "bullet_ball_glass_green" image. I was able to hide it by adding this to the stylesheet:
.rmLeftImage{
visibility: hidden;
}
But is it possible to replace the image or add another one on top of it without editing the html page?
You could set the background image of a div around the image (and keeping the css you have that hides the image).
.div_class{
background:url('http://yourdomain.com/yourimage.jpg') no-repeat 50% 50%;
width:100px;
height:100px;
}
the css have a higher hierarchy than the style in html, you could just add
img.rmLeftImage {
background-image: url('path to your image');
}
Keep hiding the image with
visibility:hidden;
since you want it to keep the width/height of the image and change the background image with
background:url('urltoyourimage')
Here is, perhaps a slightly controversial technique with support on IE8+ and pretty much every other browser.
.rmLeftImage {
content: '';
}
.rmLeftImage:after {
display: block;
content: '';
background: url(../your/new/image);
width: 220px; /* image width */
height: 240px; /* image height */
position: relative; /* image width */
}
See http://jsfiddle.net/z9QUu/2/ for an example. I've only tested this in chrome so far, where it appears to work. Providing it works cross-browser, you won't need to modify the HTML, at all.
Interestingly, I could only get it to work when applying content: ''; to .rmLeftImage, heres the jsfiddle without it: http://jsfiddle.net/Mw76h/, just for demonstration purposes.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Are HTML Image Maps still used?
I have an image:
Which I want to bind a function to when clicked. The problem I have is the div underneath it when clicked needs to fire another function and because of the blank space underneath the top div it's messy.
I'm aware that html image mapping can solve this problem but I understand this is now deprecated. is there an alternative I can use?
I've re-read and I think I understand your issue more fully.
Check this jsFiddle: http://jsfiddle.net/5p9DE/
and this almost identical one so you can see the #phone div: http://jsfiddle.net/BPbk6/
and for completeness, the code:
CSS:
#container {
position: relative;
}
#phone {
position: absolute;
top: 34px;
left: 70px;
width: 250px;
height: 25px;
-webkit-transform:rotate(-11deg);
}
#phone a {
display: block;
width: 250px;
height: 25px;
}
#phone a span {
margin-left: -9999px;
}
HTML:
<div id="container">
<div id="phone"><span>Link text</span></div>
<img src="http://i.stack.imgur.com/8GvME.png">
</div>
And, as others have said, you still can use HTML image maps. This is a CSS alternative.
It is a bit hard to tell exactly what you are trying to achieve from that image and the description, but i will give it a try.
The way i usualy approach this, is by slicing the image. Make a separate image from the actual background and the area you want to be clickable. Then you add the clickable image as a background to a <a> tag linking to whatever you desire, and position it correctly (probaly absolute to the parent with the background) using some css. If you can show us some actual code on something like fiddle i can demonstrate what i mean...
Question
Can I style just a part of a single character?
Meaning
CSS attributes cannot be assigned to parts of characters. But if you want to style only a certain section of a character, there is no standardized way to do that.
Example
Is it possible to style an "X" which is half-way red and then black?
Not working code
<div class="content">
X
</div>
.content {
position: relative;
font-size: 50px;
color: black;
}
.content:after {
content: 'X';
color: red;
width: 50%;
position: absolute;
overflow: hidden;
}
Demo on jsFiddle
Purpose
My intention is styling the Font Awesome icon-star symbol. If I have an overlay with dynamic width, shouldn't it be possible to create an exact visualization of scores?
While playing around with a demo fiddle, i figured it out myself and wanted to share my solution. It's quite simple.
First things first: The DEMO
To partly style a single character, you need extra markup for your content. Basically, you need to duplicate it:
<div class="content">
<span class="overlay">X</span>
X
</div>
Using pseudo-elements like :after or :before would be nicer, but i didn't found a way to do that.
The overlay needs to be positioned absolutely to the content element:
.content {
display: inline-block;
position: relative;
color: black;
}
.overlay {
width: 50%;
position: absolute;
color: red;
overflow: hidden;
}
Do not forget overflow: hidden; in order to cut off the remaing part of the "X".
You can use any width instead of 50% which makes this approach very flexible. You can even use a custom height, other CSS attributes or a combination of multiple attributes.
Extended DEMO
Great work on your solution. I’ve got a version that uses :after (instead of duplicating the content in the HTML) working in Chrome 19.
http://jsfiddle.net/v5xzJ/4/
Basically:
Set position:relative on .content
Position :after absolutely
Set :after to overflow:hidden
Adjust the width, height, text-indent and line-height of :after to hide bits of it.
I’m not sure if it’ll work well cross-browser though — the em values will probably work out a bit differently. (Obviously it definitely won’t work in IE 7 or below.)
In addition, you end up having to duplicate the content in your CSS file instead of the HTML, which might not be optimal depending on the situation.
I display a few images of varying width and height, and I'd like to be able to add a class or two, say new or hot that would add small overlay star or something.
Normally this would be solved by making a div with the intended image being the background, but having my images all of unknown size, I'm getting stuck trying to figure out how to achieve this. Current HTML is of structure: <a><img></a>
I'm looking for a CSS feature that doesn't exist:
img.new { foreground:transparent url('/images/new.png') no-repeat bottom right }
I'm really hoping to solve this without databasing my image sizes, and without using javascript. But if you have a JS/jquery approach that's elegant, I'm all ears.
I'm not sure how well this would work for you, but if you can add the class to your <a> element instead of your <img>:
<a class="new" href="..."><img src="..." alt="alt text"></a>
Then you can try adding an a:after pseudo-element positioned absolutely over your <img> and giving it the overlay icon as a background image:
a.new {
display: inline-block;
position: relative;
}
a.new:after {
display: block;
position: absolute;
content: '';
width: /* width of overlay image or anything you choose */;
height: /* height of overlay image or anything you choose */;
right: 0;
bottom: 0;
background: transparent url('/images/new.png') no-repeat;
}
There's a bit of an issue with the positioning of the overlay image as the <a> is made an inline block for positioning to work, but you can always give it a little bottom offset to make up for it. Here's a fiddle to show you what I mean.
Without knowing more details about your setup, there are a few things that come to mind that you can do:
Use img.new:after (Some Quirksmode info on it.). It does have some browser support limitations, though. If you don't mind that some of the older browsers don't support this, then I recommend this one. I've used it before with nice results (and you could also fall back to JavaScript wrapped in IE conditional comments if you really need to, since IE appears to be the only browser out after the feature that doesn't support it).
If you're not using overflow:hidden, you might be able to set it as the background of either your image, its anchor tag, or even the next parent up. This, of course, depends on your exact design.
Use an absolutely positioned div or span within your anchor tag and display only on anchors with the .new class. So, something like this:
<a class="new">
<span class="newBanner">
<img/>
</a>
<style>
.newBanner {
display: none;
position: absolute;
top: 0;
right: 0;
}
.new .newBanner {
display: block;
}
</style>
This last one's kind of rough and will likely need tweaked, but the point is in the styling, specifically the .new .newBanner { display: block; } part. Again, it depends largely on your exact design, so the more information you can give us, the better help we'll be able to give you.