image caption placement (ver 2)

Leetomic / 2014-03-15 12:24:10   

hi guys,
I want to put the " image caption" (not image title) at the top right corner of the image. ( please see the link, the pink box area )

leetomic.com/index.php/test/

is there any way to change the placement of image caption?
I appreciate your help!

thanks,

arsondpi / 2014-03-15 12:32:11   

I guess you can use css for this.
Have you got a working example with a caption?

Leetomic / 2014-03-15 12:44:21   

hi arsondpi,

thank you so much for your reply.
sorry, I'm not sure about "working ex with caption"

leetomic.com/index.php/project/test2/

is this what you meant??

arsondpi / 2014-03-15 12:48:09   

No, I mean to input a title and a caption to an image as in your mock-up, in order to give you more info about this...

Leetomic / 2014-03-15 12:52:49   

oh like this?
----------------------------
image title:
Hi jessie, 2013

image caption:
We created a fake movie aiming at porn downloaders, especially questionable porn downloaders. Then, We named the files as “ Play with young Jessie”, “ little jessie home video” etc and distributed those files to torrent sites where a lot of inappropriate contents are being shared. In the fake porn, It feels like a sexual home video but it turns out to be an anti-child porn ad. In 2 weeks, There were over 2000 instant downloaders around the world and the message was delivered to downloaders who need to be warned.

arsondpi / 2014-03-15 15:47:26   

lol - no I'm talking about an actual example in your site; an image with a title and a caption (not how the layout you're after looks like)

Leetomic / 2014-03-15 16:09:08   

lol !!! sorry;;;

you can check it out this~
leetomic.com/index.php/project/testb/…

and also, you can visit leeotmic.com

arsondpi / 2014-03-15 16:47:52   

A little css will get you far.
Although not correct in many ways (to do this right you should fiddle with structure of the html output) it works for these images.

  1. #ndxz-media { width: 1100px; position: relative; }
  2. #media_info { width: 100%; position: absolute; top: 0; }
  3. #media_info h2 { position: relative; top: 580px;}
  4. #ndxz-media #media_info p { width: 200px; float: right; }

Of course you can input this css as part of your caption all in one line like:

  1. <style type='text/css'>#ndxz-media { width: 1100px; position: relative; } #media_info { width: 100%; position: absolute; top: 0; } #media_info h2 { position: relative; top: 580px;} #ndxz-media #media_info p { width: 200px; float: right; }</style>

In other words something like:

  1. <style type='text/css'>#ndxz-media { width: 1100px; position: relative; } #media_info { width: 100%; position: absolute; top: 0; } #media_info h2 { position: relative; top: 580px;} #ndxz-media #media_info p { width: 200px; float: right; }</style>The caption text goes here and continues on...
Leetomic / 2014-03-15 17:30:55   

Thank you so much!!! I really appreciate it.
i just have some minor question,

For the first tip, where should i input those? style.css?

For the second & third tips, it works great. I input them as a part of caption. it's easy.
only thing is that, after i input them, the next/pre button doesn't work ( i guess something is covering the next/pre button. )

arsondpi / 2014-03-15 17:40:16   

You're right - This should work much better:

  1. <style type='text/css'>#ndxz-media { width: 1100px; position: relative; } #media_info { width: 100%; position: absolute; top: 2em; } #media_info h2 { position: absolute; top: 545px;} #ndxz-media #media_info p { width: 200px; float: right; }</style>
Leetomic / 2014-03-16 16:05:27   

thank you so much!!!!
it works great!!!!!

This thread has been closed, thank you.