Can I put a caption on the lower right in Reveal.js?

Question

I have a Reveal.js slide show that uses a lot of background images:

<section data-background="latimes.png">
    <small class="caption">[Some Text](http://a.link.com/whatever)</small>
    <aside class="notes">some notes</aside>
  </section>

And I'd like to put a caption/link for each image on the lower left-hand corner of each slide.

I tried setting a custom class

.reveal .caption a {
  background: #FFF;
  color: #666;
  padding: 10px; 
  border: 1px dashed #999;
}

.reveal .caption {
  postion: absolute; 
  bottom: 0px;
  left: 50px;
}

But it doesn't seem to have any impact on the layout. The element inspector doesn't seem to work well with Reveal.js, which makes this hard to troubleshoot. Is there a good way to force a block of text to a corner of the screen in reveal.js?

Irradiate

I can set margins on .reveal .caption -- margin-top: 700px; margin-right: 1000px; that more or less works on my screen. But that seems broken. – Irradiate

Answer 1

The reason this might be a bit tricky is because the parent nodes have some set defaults.

Set width and height to 100% in initialization of Reveal:

Reveal.initialize({
    width: "100%",
    height:"100%"
});

Ensure that the slide (ie. section) uses the whole space:

.full {
    height:100%;
    width:100%;  
}

and finally set the position of the caption:

.caption {
     bottom:0px;
     right:0px;
     position:absolute;
}

full code

Kenya

Answer 2

Can you provide an example of the HTML that has the class .reveal? Add position:absolute to your selector rule. If you want the caption to sit flush at the bottom corner of each slide, it's best to set the position to bottom:0px instead of top.

For example:

<style type="text/css">
.reveal .reveal_section {
    position: relative;
}
.reveal .caption {
    position: absolute; 
    bottom: 0px;
    left: 50px;
}
.reveal .caption a {
    background: #FFF;
    color: #666;
    padding: 10px; 
    border: 1px dashed #999;
}
</style>
<div class="reveal">
<section class="reveal_section" data-background="latimes.png">
    <small class="caption">[Some Text](http://a.link.com/whatever)</small>
    <aside class="notes">some notes</aside>
</section>
</div>

Lawsuit

Added sample HTML and better CSS. It doesn't seem to have any effect. – Irradiate

You need to make parent container relative to itself, by setting its style to position: relative. – Lawsuit

By "the parent container" you mean ... which? The section? – Irradiate

Yes, the section element. If there is a section element for each slide and the section element is the container for each slide. – Lawsuit

I have tried this (and several other combinations of position), but have not been able to achieve the effect that the original question describes. Has anyone been able to solve this? – Bustard

@Bustard So far, nope. :( – Irradiate

I must admit that I haven't tried very hard in the past 20 months. ;) – Bustard

@Bustard If you still need to get an answer to this you could try my suggestion. – Kenya

@M.T. Thank you, I will remember this the next time I use reveal.js. – Bustard