Captioning Images (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

paul rayner -> Captioning Images (6/10/2004 7:08:46)

Hi
I'd like to caption some images that I've used as thumbnails. They may be viewable here: http://www.ozdst.com/diag.html

Is it OK to use the table caption? Is ther a better way?

Obviously, I'd like the images to space out nicely, with a caption, preferably directly above.

Any ideas please?

Cheers



d a v e -> RE: Captioning Images (6/10/2004 7:32:21)

you have a choice of a cell for each image and caption (or caption + image to a table cell) or each caption+image pair in its div

then write a css style for the caption, and the image. this makes it easy to chagne the spacing, caption style et afterwards.

btw you haven't resampled your thmubnails on your web page - they are resize only in the browser, but are the full image and filesize.



d a v e -> RE: Captioning Images (6/10/2004 7:35:40)

also re: table caption (if that's what you meant
see http://www.w3.org/TR/html401/struct/tables.html#edef-CAPTION
you can only have one per table and it's to sum up the table contents. also it's deprecated. not made for using in the way you were thinking.



paul rayner -> RE: Captioning Images (6/10/2004 17:13:14)

I know I've used caption, but I'd prefer not to use a table to layout the images.

I only used caption, cos, it was all I could think of.

What CSS option is ther to layout the images, with, as I said, something above that describes each thumbnail??

Sorry if I asked the wrong things.



d a v e -> RE: Captioning Images (6/11/2004 1:47:12)

you might want to remove the prolog from before your xhtml doctype as it puts IE into quirks mode http://www.frontpagewebmaster.com/m-197558/mpage-1/key-prolog//tm.htm#202056

for captions try this
http://members.surfeu.fi/dave_pirjo/test-area/css_stuff/captions2.html
just float each caption+image in a div so they 'stack up' in a row. i've used an internal stylesheet for (my) ease.



c1sissy -> RE: Captioning Images (6/11/2004 7:48:48)

I"m not sure if this one will help you out, but its on thumbs etc...
http://www.realworldstyle.com/thumb_float.html

There might be something in here that could give you some ideas on what to do.



d a v e -> RE: Captioning Images (6/11/2004 7:57:28)

it's the same as mine (link in previous post) )eccept i'm glad you pointed it out because i used a br with clear:both at the end of my e.g. but for fluid design you don't need this.



c1sissy -> RE: Captioning Images (6/11/2004 8:30:52)

quote:

i used a br with clear:both at the end of my e.g. but for fluid design you don't need this.


I didn't know this. What if you have several divs, and your foooter isn't cooperating? Isn't clear: both what you need to get it to work foryou? btw, I love the link that i posted. I think it has a good bit of excellent information in there if you follow the links around.



paul rayner -> RE: Captioning Images (6/11/2004 21:10:33)

Thanks Dave...thanks Deb

Dave, I tried to follow the example you setup....thanks heaps for that...but mine end up being listed below one another. You can see that in the page http://www.ozdst.com/diag.html.

Any idea what I may have done wrong?

BTW - with regard to my doc type, I just swiped that from W3C - I thought I needed all that to validate!!



d a v e -> RE: Captioning Images (6/12/2004 5:38:22)

where you have 
<P class=caption>Open Hole DST String<BR><A 
href="http://www.ozdst.com/fig102.html"><IMG height=192 
alt="Typical Open Hole DST String" 
src="__DST AUSTRALIA - DST Concepts__files/fig102.gif" width=122></P></DIV>


you need to move the closing p tag to just before the <BR> for each of your thumbnails, then it works: so you then have - 
<P class=caption>Open Hole DST String</P><BR><A 
href="http://www.ozdst.com/fig102.html"><IMG height=192 
alt="Typical Open Hole DST String" 
src="__DST AUSTRALIA - DST Concepts__files/fig102.gif" width=122></DIV>



i know that works! http://members.surfeu.fi/dave_pirjo/test-area/css_stuff/__DST%20AUSTRALIA%20-%20DST%20Concepts_.htm

using the prolog 
<?xml version="1.0" encoding="UTF-8"?>

throws ie into quirk mode - i had a lot of trouble centering the divs on my site before i removed then it worked fine!



Donkey -> RE: Captioning Images (6/12/2004 8:46:50) 

<P class=caption>
shouldn't that be
<P class="caption">



d a v e -> RE: Captioning Images (6/12/2004 9:24:34)

oops thanks for spotting that - just did a quick save and edit and didn't realise that it had taken out the quotes...



Spooky -> RE: Captioning Images (6/13/2004 6:04:47)

It shouldnt matter - both would validate.
Its usually an issue if there are spaces or special characters



paul rayner -> RE: Captioning Images (6/13/2004 19:47:48)

Sorry to be a nuisance - but this is confusing me.

I see how it works for you Dave. I use IE 6, and it opens fine in my browser. So, I figure I'll try and copy and paste, and edit etc. Change a few minor things.

I opened your page, changed to source code, and saved to my desktop folder, where the rest of the files are. I ONLY changed path to the css - I promise.
Then, when I open it, all the images are below one another.

How can that happen??? Am I a complete moron??

Dave, I really appreciate the time you've burned. But, I spent hours trying to work out how this could possible happen.



c1sissy -> RE: Captioning Images (6/13/2004 19:51:03)

quote:

Am I a complete moron??


NO you aren't!

Take a break from it for a bit, then go back to it and see if anything is any clearer for you.



d a v e -> RE: Captioning Images (6/16/2004 5:03:20)

paul i'm a bit puzzled - just been looking at the source code again and can't see anything obvious - you might want to try correcting the validation errors http://validator.w3.org/check?verbose=1&uri=http%3A//www.ozdst.com/diag.html at least the ones that pertain to that section and then see if it's any better.... if not then post back and we'll see what we can do!

one other thing you might try first is to resize your thumbnails to the proper size in an image editor and save them, try it on the first 2-3 and see if that helps (you should do this anyway for your thumbnails)



d a v e -> RE: Captioning Images (6/16/2004 6:19:30)

try these 2 thumbnails
http://members.surfeu.fi/dave_pirjo/test-area/examples/graphics/dst.gif
and http://members.surfeu.fi/dave_pirjo/test-area/examples/graphics/test_types.gif



paul rayner -> RE: Captioning Images (6/18/2004 3:38:34)

I resized all the images Dave. Thanks, but still no luck.

I took your code, and uploaded it to http://www.ozdst.com/dave.htm, just to show you that what worked for you, doesn't work for me. Same code - just so frustrating.

This code doesn't reflect the resized the images.
I even downloaded Beyond Compare from Spooky's post, and that didn't show up any errors.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625