Re: [css-d] Photo grid with captions in CSS. Any ideas?
On Fri, 10 Aug 2007 06:41:26 -0400, Hairball [EMAIL PROTECTED] wrote: Have you tried Lightbox 2http://www.huddletogether.com/projects/lightbox2/ Thanks but: That uses scripts and I'm averse to using Javascript unless really necessary - and only if the page then still display with script turned off on the browser. The whole idea for me is to keep things simple - not use Javascript as a fix for everything. I'm still trying to get it work with larger images - then it REALLY would be a flexible and simple idea ;-) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Photo grid with captions in CSS. Any ideas?
On 8/8/07, Robert Van Dam [EMAIL PROTECTED] wrote:
Just play around a little bit with the image sizes that you have.
This worked for me using images of size 340x250.
dl {float:left;text-align:center;}
dt,dd {width:35em;float:left;}
dt {margin-bottom:4em;}/* vertical space between the images */
dd {margin:250px 0 0 -35em;}
img {vertical-align:bottom;border:0;}
em { display: block; font-weight: bold; margin-bottom: 5px; }
Note
- the margin on dd should be the height of your images (if they're of
different sizes, the maximum height among all of them).
- the width on dt,dd and the negative margin dd should be large
enough to be bigger than the widest of your images.
Unfortunately, because you're images are so much larger than the
original example, if you use ems (as I've done above) and then
increase the font size, the dds will get so large, they'll be off the
page to the right. So in your case, you might consider using a pixel
size, say 365px and then just live with the fact that it isn't quite
as scalable anymore. In this case, that's really not that big a deal
because most resolutions won't fit more than 3 365px images (with
spacing) side by side anyway.
Rob
On 8/8/07, Malcolm N [EMAIL PROTECTED] wrote:
On Wed, 08 Aug 2007 13:43:56 -0400, E Michael Brandt
[EMAIL PROTECTED] wrote:
I will tinker with it later when I get a chance, but really don't you
think 340 by 250 is humungous for a thumbnail? Perhaps you are not
really looking for thumbnail page styling?
--
Yes - humungus is the word. ;-)
No - I was rather looking for better way to display a small photo
album - say a page with 10 images about that size and not use
thumbnails.
Up until now I have been giving each photo a div - floated left
div class=leftimg img src=/img/x.jpg alt=xxx width=xxx
height=xxx border=0 /
p class=photolegendxxx/p
/div
keeping to keep the text photo legend within the same width as the
photo I have had to use a selection of css rules or determine the size
with php - but as I say this must be inefficient / bloated etc.
I thought your idea rather better -
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Have you tried Lightbox 2http://www.huddletogether.com/projects/lightbox2/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Photo grid with captions in CSS. Any ideas?
Hi all, I have been asked to do a page with about 18 image thumbnails with captions underneath. Now I know it would be easy to do with tables but is there a way to do this in CSS? I have done some searching and a lot seem to position the captions with javascript. Is there a complete CSS solution? Many thanks Karl __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Photo grid with captions in CSS. Any ideas?
I am just seeing this thread now. So perhaps you already have all the answers you need. But if not, take a look at Thierry's simple css solution: http://tjkdesign.com/articles/how_to_style_thumbnail_and_caption.asp -- E. Michael Brandt www.divaHTML.com divaGPS : you-are-here menu highlighting divaFAQ : FAQ pages with pizazz www.valleywebdesigns.com JustSo PictureWindow JustSo PhotoAlbum -- -- E. Michael Brandt www.divaHTML.com divaGPS : you-are-here menu highlighting divaFAQ : FAQ pages with pizazz www.valleywebdesigns.com JustSo PictureWindow JustSo PhotoAlbum -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Photo grid with captions in CSS. Any ideas?
Have you read More Eric Meyer on CSS yet? Project 2 addresses exactly this situation. Regards! - Toby __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Photo grid with captions in CSS. Any ideas?
On Wed, 08 Aug 2007 10:40:37 -0400, E Michael Brandt [EMAIL PROTECTED] wrote: I am just seeing this thread now. So perhaps you already have all the answers you need. But if not, take a look at Thierry's simple css solution: http://tjkdesign.com/articles/how_to_style_thumbnail_and_caption.asp Interesting idea Michael I tried using it with images rather larger - i.e 340 x 250 px and it broke I did change the + / - 10.5em margin to suit - but the text is on top of the image and the images misalign Will this technique work for this larger image size ? Malcolm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Photo grid with captions in CSS. Any ideas?
On Wed, 08 Aug 2007 13:43:56 -0400, E Michael Brandt [EMAIL PROTECTED] wrote: I will tinker with it later when I get a chance, but really don't you think 340 by 250 is humungous for a thumbnail? Perhaps you are not really looking for thumbnail page styling? -- Yes - humungus is the word. ;-) No - I was rather looking for better way to display a small photo album - say a page with 10 images about that size and not use thumbnails. Up until now I have been giving each photo a div - floated left div class=leftimg img src=/img/x.jpg alt=xxx width=xxx height=xxx border=0 / p class=photolegendxxx/p /div keeping to keep the text photo legend within the same width as the photo I have had to use a selection of css rules or determine the size with php - but as I say this must be inefficient / bloated etc. I thought your idea rather better - __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Photo grid with captions in CSS. Any ideas?
Just play around a little bit with the image sizes that you have.
This worked for me using images of size 340x250.
dl {float:left;text-align:center;}
dt,dd {width:35em;float:left;}
dt {margin-bottom:4em;}/* vertical space between the images */
dd {margin:250px 0 0 -35em;}
img {vertical-align:bottom;border:0;}
em { display: block; font-weight: bold; margin-bottom: 5px; }
Note
- the margin on dd should be the height of your images (if they're of
different sizes, the maximum height among all of them).
- the width on dt,dd and the negative margin dd should be large
enough to be bigger than the widest of your images.
Unfortunately, because you're images are so much larger than the
original example, if you use ems (as I've done above) and then
increase the font size, the dds will get so large, they'll be off the
page to the right. So in your case, you might consider using a pixel
size, say 365px and then just live with the fact that it isn't quite
as scalable anymore. In this case, that's really not that big a deal
because most resolutions won't fit more than 3 365px images (with
spacing) side by side anyway.
Rob
On 8/8/07, Malcolm N [EMAIL PROTECTED] wrote:
On Wed, 08 Aug 2007 13:43:56 -0400, E Michael Brandt
[EMAIL PROTECTED] wrote:
I will tinker with it later when I get a chance, but really don't you
think 340 by 250 is humungous for a thumbnail? Perhaps you are not
really looking for thumbnail page styling?
--
Yes - humungus is the word. ;-)
No - I was rather looking for better way to display a small photo
album - say a page with 10 images about that size and not use
thumbnails.
Up until now I have been giving each photo a div - floated left
div class=leftimg img src=/img/x.jpg alt=xxx width=xxx
height=xxx border=0 /
p class=photolegendxxx/p
/div
keeping to keep the text photo legend within the same width as the
photo I have had to use a selection of css rules or determine the size
with php - but as I say this must be inefficient / bloated etc.
I thought your idea rather better -
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
