triple caption over image are work bad

Question

I have some problem. I tried to position the title over the image

first title (cat1) can be small or long
second title (cat 2) juste after the first title
third title (after the 2nd title to right) these title must be on inline

see my demo jsfiddle http://jsfiddle.net/cyphos/jntea/]

thank you for your response

If you could add an image of what exactly you want to accomplish, that would be helpful. Don't really understand it currently. — robooneus, Jul 22 '13 at 13:34
no, I want say I should put the second title juste after the first title (margin-right : 2px by example) and the third title to right over the image (non on the web page) — cyphos, Jul 22 '13 at 13:54
If my answer below isn't what you want, then I still have no idea what you are describing. Post an image of what you want it to look like instead. — robooneus, Jul 23 '13 at 07:36

score 1 · Answer 1 · edited May 23 '17 at 12:21

As I understand it, how you accomplish this depends on what you are OK with creating. If you can specify the width of each element, then it isn't a problem to accomplish. You could then simply specify widths for both the left and right elements, then position the center one directly in between. See this fiddle as an example:

CSS only Fiddle

This uses the box-sizing border-box model to simplify things. Read this for clarification

basically:

.cta1 {left:0;width:150px;}
.cta2 {left:150px;right:150px;}
.cta3 {right:0;width:150px;}

OR

if you want these items to be dynamic, you will need to use Javascript/jQuery to get the width of the elements and then set the left and right properties of the center one accordingly. An example in jQuery

jQuery based fiddle

var cat1Width = $('.cat1').width();
cat1Width = cat1Width + 26; //26 being a pixel measure of the padding of the element
$('.cat2').css('left', cat1Width);

With this, you will have to then add the padding values to the cta1Width variable, as jQuery does not return a width value that includes the padding. Either do this manually (by adding the pixel value yourself), or you can also extract the padding width with the jQuery see this thread for info

triple caption over image are work bad

1 Answers1