13

I have a design I want to implement that involves title text appearing with its own background color, padded by 10px, over an image, par example:

https://i.stack.imgur.com/E7EpS.png

The first example in this picture works well, and is simple:

.greenbox {width:520px; height:261px; position:relative;}
.greenbox span { padding:0 10px; background:#000; position:absolute; left:0; bottom:40px; }

Trouble arises when the text overflows onto another line, then the span elements padding does not effect the text on the line breaks, it renders like so:

https://i.stack.imgur.com/pY18f.png

Anyone know of an alternative, or how they would set this design out so that the background color & padding was consistent?

Thanks in advance

Edit: I had simplified the code to make it concise, but had missed a vital part. Actually it's like this:

.greenbox {width:520px; height:261px; position:relative;}
.greenbox a {position:absolute; left:0; bottom:40px; }
.greenbox span { padding:0 10px; background:#000; }

With the html as:

<div class="greenbox">

    <a href="link"><span>The Title Goes Here</span></a>

</div>

Thus the span remains inline, wrapped in a absolute position anchor.

Michael Watson
  • 1,079
  • 3
  • 14
  • 26
  • Please provide an example of your Markup code. JsFiddle is a good method of doing this – Curtis Aug 18 '11 at 10:04
  • Posting the markup in your question is actually the preferred method, with [jsfiddle](http://jsfiddle.net/) being secondary. If I understand this correctly, I think it is sort of a "bug", there's a question here about it with many failed attempts as resolution, I will try to find it. – Wesley Murch Aug 18 '11 at 10:05
  • Found it: [CSS create padding before line-break](http://stackoverflow.com/q/6099857) – Wesley Murch Aug 18 '11 at 10:14
  • I've put a jsfiddle up too: http://jsfiddle.net/fNGgN/1/ Note how the end of the first line and beginning of the second have no padding. Hi Wesley, yes, it's literally the same problem as your link, although not quite as complicated - window resizing and non-highlighted text before are not issues. – Michael Watson Aug 18 '11 at 10:33

2 Answers2

7

I've tackled something similar before: Add padding at the beginning and end of each line of text

I've robbed that solution from myself, and fit it to your case.

Note that the line-height and padding adjustments can be very tricky to get right.

See: http://jsbin.com/ahoyug

HTML:

<div class="greenbox">
    <a href="#"><span><span>
        The Title Goes Here, with overflow
    </span></span></a>
</div>

CSS:

.greenbox {width:500px; height:200px; position:relative; background:green}

.greenbox > a {
    font: 50px sans-serif;
    line-height: 1.14;
    padding: 0;
    border-left: 20px solid #000;
    position: absolute;
    left: 0;
    bottom: 60px;
    text-decoration: none;
    color: #fff
}
.greenbox > a > span {
    background: #000
}
.greenbox > a > span > span {
    position: relative;
    left: -10px
}
Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
4

The somewhat easy way is to add border to the left of a link and then add two wrappers, then position first to the left and the second back to the right, so it would like somehow like that: http://jsfiddle.net/kizu/fNGgN/4/

kizu
  • 42,604
  • 4
  • 68
  • 95
  • I would totally do the same thing! :) – thirtydot Aug 18 '11 at 11:58
  • 2
    Haha, yeah, indeed! I modified my version from one with the extra wrapper, 'cause with it you can be independent from the border: http://jsfiddle.net/kizu/fNGgN/5/ :) – kizu Aug 18 '11 at 12:17
  • Hint for those who want to do this with line padding, if you add a third wrap it is possible! – bottleboot Jun 08 '12 at 14:05