CODEWITHSUNDEEP
csscaption
cyphos
cyphos

Reputation: 51

triple caption over image are work bad

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

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

thank you for your response

Upvotes: 0

Views: 65

Answers (1)

robooneus
robooneus

Reputation: 1344

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

Upvotes: 1

Related Questions