How should I set this caption over my image using CSS?

Question

I am beginning to dabble in responsive design, and as a result am trying to pinpoint best practices in my CSS. I am working on placing caption text over what will eventually be a custom, jquery driven image slider.

All of this is running at http://www.taylorp0994.net/websites/cincoschool/index.html , so please look to the live results and code for further information.

I have achieved what appears to be a workable solution; however, I fear it is not semantic to use pixels, regardless of context. How can I use percentages to achieve the same look and what approach should I take, (margin-top, position:relative/top, etc.)? I've yet to have much success with any of the obvious except for my current solution which is to position:relative the caption box and move it up via top:-46.5px.

Answer 1

The work you've posted looks really promising!

Two things worth mentioning from my cursory look:

• There's nothing particularly 'wrong' with using pixel measurements. The only time this will potentially become a problem for you is with the caption's length. If the text is likely to change length (and thus: roll onto two lines), then using a set height adjustment won't work.
• There's a lot of empty 'p' tags within the caption, is that deliberate?

The way I tend to tackle this type of task is to use positioning:

• Have a single div wrap that contains both the image and the caption. Position this relative;
• Set the image z-index to a low number;
• Set the caption's z-index higher, and set to position: absolute, bottom: 0. This will position the caption off the bottom edge of the parent div, which will in turn inherit it's height from the image.

Two secs and I'll post an example.

Here you go: http://jsfiddle.net/HhuhR/ This is very quick-and-dirty but should help put you on the right track:

<style>
    .img-wrap{
        width: 60%; /*just here for the preview */
        position: relative;
    }
        .img-wrap img{
            max-width: 100%;
            z-index: 1
        }
        .img-wrap .caption{
            display: block;
            width: 100%;
            position: absolute;
            bottom: 5px; /*if using padding in the caption, match here */
            left: 0;
            z-index: 2;
            margin: 0;
            padding: 5px 0;
            text-indent: 5px;
            color: #fff;
            font-weight: bold;
            background: rgba(0, 0, 0, 0.4);
        }
</style>

<div class="img-wrap">
    <img src="http://taylorp0994.net/websites/cincoschool/img/slide1.png" alt= "">
    <span class="caption">Lorem ipsum dolor sit amet</span>
</div>

Do remember that as your viewport width gets narrower, the caption text will dominate the image (as the image itself gets smaller). I tend to identify a point in my design where this becomes a problem and simply overwrite the caption position for bottom/left and set position: relative - this drops the caption directly beneath the image rather than over-lapping (and potentially fully covering) it.