How to overlay a bootstrap sketch?

Question

I am using twitter bootstrap 2.1.1 with a responsive layout and I would like to put a label in the lower right corner of the image. One of the problems I am facing is that it reacts when the thumbnail is wider than the image that it floats too much. Another problem is that I cannot make her swim to the right. I should also add that, although I want it to be in the lower right corner, I want it to be offset by a few pixels so that it is not right on the edge of the image. In addition, the text may always be absent in the photo, that is, when the default image is displayed.

Here is my html for now

<li class="span4"> <div class="photo-group thumbnail"> <a href="/recipes/50500235aa113eb1870001d8" class="photo-wrapper"> <img alt="300x200&amp;text=photo" src="http://www.placehold.it/300x200&amp;text=Photo"> <span class="label label-inverse photo-label">Photo Missing</span> </a> <div class="caption"> <div class="pull-right"> by <a href="/users/50494983aa113ebd5c000001"> hadees </a> </div> <a href="/recipes/50500235aa113eb1870001d8">Chocolate Crackle Cookies</a> </div> </div> </li> 

and here is my css

 .content-header { padding-bottom: 10px; } .thumbnail > a > img { display: block; margin-left: auto; margin-right: auto; max-width: 100%; } .photo-group .photo-wrapper { position: relative; } .photo-group .photo-wrapper .photo-label { position: absolute; bottom: 0; } .photo-group .photo-wrapper .photo-label { float: right; }​ 

I also have jsfiddle for a better example.

Perhaps the right way to handle this is to simply make the maximum width of the photo gallery 300, but I think this view looks funny on the desktop full screen.

Answer 1

Here is my version of the script: http://jsfiddle.net/AdVCT/9/

Essentially, you need to place the wrapper both in the image and in the label so that you can completely position the label in this shell:

  <div class="photo"> <img alt="..." src="..." /> <span class="label label-inverse photo-label">Photo Missing</span> </div> 

And then with some CSS you can change .photo to be centered, but also the size of the image inside it (the signature is absolutely positioned, so it is effectively derived from the page stream and does not affect the width of the parents, etc.):

 .photo-group .photo-wrapper .photo { position: relative; margin: 0 auto; display: table; } 

And remove margin-left: auto / margin-right: auto from the rule .thumbnail> a> img. Finally, to slightly offset the mark from the sides of the image, use:

 .photo-group .photo-wrapper .photo-label { position: absolute; bottom: 5px; right: 5px; } 

And set 5px depending on what you want the offsets to be.