[Fixed]Images with captions and table cell

Arronax

Hello
I apologise if this has been asked several times already but my attempts to search the forum came up with zero results so I thought I should try asking.

I have been recently trying to produce image formatting that is used in most other wiki's (that being the whole box with the picture shrunk to fit complete with caption and direct link to enlarged picture, similar to how wikipedia formats its pictures) but my attempts with implementing it using html have been varied.
I had some success in making a cell and filling it with the picture and caption but it required way too much work to be viable (as the picture, cell and caption had to be measured in pixels and adjusted repeatedly till it all lined up, and even then it was quite haphazard.

I was therefore wondering if anyone has had any luck in producing enclosed image boxes and could give some pointers in how to produce them.
Thank you

ChainsawXIV

You should be able to do this with a little inline CSS pretty easily. I gave it a "quick try":http://www.obsidianportal.com/campaign/chainsawxiv-test-campaign/wikis/test-page-3, and it works out pretty well. In that example, you can just adjust the two widths (300px by default) to whatever width you want the presentation to be, and the browser will automatically proportionally scale the image (so the box will vary in height depending on the proportions of the image, and the amount of caption text).

Duskreign

ChainsawXIV, you spoil us.

sandman

Chainsaw, you just solved a problem I've been having regarding pre tags, and the "overflow" style attribute you used was the answer!! Thanks man!

Oh, and Duskreign is right, you spoil us xD

ChainsawXIV

Happy to help. :)

Arronax

Outrageous, thank you.
Guess I should start remembering all the CSS I was meant to learn at uni.

ChainsawXIV

It's much cleaner and more powerful than doing it old-school HTML style anyway. :)

HecklerusPrime

Chainsaw: Awesome! Thanks! One problem. When I try to copy that code I get a large border of white space above my image but still inside the box. I've tried adjusting the margin and padding options, but no change. Instead of using an image from the internet I'm using the url for one of my OP uploaded images. Any thoughts?

GamingMegaverse

Please realize @Hecklerus Prime that this is a thread from 2010- preReforge! Therefore many things have changed in the coding.

HecklerusPrime

Of course. Through a little tinkering (read: complete accident) I found that the code Chainsaw linked to should all be entered on one line in order to avoid any spacing issues. So for now, that seems to be the fix. In case his link ever becomes broken, I'll re-post the code in question. Since it's all on one line it's going to shoot way to the right. Sorry for that. Just replace the stuff in ALL CAPS with relevant website/caption.

@ CAPTION @