RE: [WSG] Problem with floated divs in gallery site
John, I do like your idea of using the program method of working out the padding for the top. That's an excellent idea. I'm in the process of making my own ColdFusion picture gallery ready for sharing with others, and this trick of yours will go well with it. Very elegant answer I think! And the finished page looks terrific too. Well done. Cheers Mike Kear Windsor, NSW, Australia AFP Webworks http://afpwebworks.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of John Penlington Sent: Friday, 25 June 2004 2:25 AM To: [EMAIL PROTECTED] Subject: RE: [WSG] Problem with floated divs in gallery site Hi all again! RE: My problem with floated divs in gallery site - and trying to get those thumbnail images to align at the bottom. I've solved the problem - in two ways - and thanks for those suggestions. You'll find the result at: http://www.bluemountainsgardener.info/fgtest/max_miller_solved.asp It shows both solutions - the first using divs and the second using a CSS table. Both are on the same page with CSS embedded. The results look exactly the same in IE6, Mozilla 1.5 and Opera 7.23 I'm keeping my fingers crossed for Apple Mac browsers !! For the div version, I used program code (ASP) to subtract each thumbnail's height from 100 (the maximum height of any thumbnail) and made that the value for *padding-top* as an inline style for the img tag. As each thumbnail is a live link to a bigger image on a different page, I ended up having to add a*border='0'* attribute to the image tag to get rid of the link-induced border around the image plus the padding. This was sloppy coding, I know, but it was so late at night!! [snip] * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Problem with floated divs in gallery site
John, All you really need to consider on the Mac is Safari (which displays pretty much identically to the Mozilla browsers in almost all cases) and IE Mac, which has its little share of idiosyncratic MS bugs. As far as the others are concerned (the Mozilla browsers and Opera) they share the same codebase on Mac and PC, so no need generally to test on both platforms. (This does not take into account odd legacy bugs in various previous incarnations of those browsers, on both platforms.) Congrats on working out a solution to your problem! And to set your mind at rest, the page displays identically on Safari (1.2) and IE 5.2.3 Mac. -Hugh Todd The results look exactly the same in IE6, Mozilla 1.5 and Opera 7.23 I'm keeping my fingers crossed for Apple Mac browsers !! * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Problem with floated divs in gallery site
On Thursday, June 24, 2004, at 09:31 PM, John Penlington wrote: No problem getting the thumbnail-caption combinations to display using left floated divs - thanks to Russ Weakley's float tutorials. But I just cannot find the way to get these thumbnail-caption combinations to align at the *bottom* - rather than the top where they are now. I'm with you, mate - I'd love to know how to do this without the need for additional css for each and every thumbnail. I've researched this myself, and as far as I could determine, the (only?) way to bottom-align a row of floated divs is to declare the height of the divs for the tallest img, and then add padding-top to *each* img to force the alignment to the bottom. Clumsy, and a pain to update. Much as I hate it, I've yet to find a way to quickly and cleanly align a grid of thumbs as I can using table cells. You might like to check out the threads 'IE Max-width Emulation and Auto Centre' and 'Centering a liquid grid of image thumbs and captions' from the first week of June - this issue was discussed at some length (although maybe not bottom-alignment...) Nick ___ Omnivision. Websight. http://www.omnivision.com.au/
RE: [WSG] Problem with floated divs in gallery site
But I just cannot find the way to get these thumbnail-caption combinations to align at the *bottom* - rather than the top where they are now. I managed to pull this off by creating a container div for each image/caption pair that is always the same size. If you can determine what your maximum thumbnail size is, you can set up this container div class and re-use accordingly. Example: http://www.ingles-markets.com/bakery/cakes/ CSS: http://www.ingles-markets.com/gallery.css Hope that helps. Will Chatham Webmaster Ingles Markets ooOo-o 828.669.2941 - ext.534 www.ingles-markets.com -- * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Problem with floated divs in gallery site
On Thursday, June 24, 2004, at 11:01 PM, Trusz, Andrew wrote: Couple of industrial strength options; both of which I've used. One is purely visual - organize the pictures by height. The pictures seem to come in roughly two heights so group them that way and they will mostly take care of themselves. You may have an odd transitional line from tall to short depending oh how many pictures you have. No good if the client insists their thumbnails are presented in a specific order - which mine (photographers) invariably do. The alternative is to pad the pictures. You've done it for width, just do it for height. It's more complicated but the same principle. You know how tall the tallest thumbnail is going to be. Pad all the pictures to that height. You can split the height and thereby center the pictures, with text at the foot of container, or pad completely on top and push them all to the bottom. This way you can mix and match tall and short. That's what I suggested, but it's a labour-intensive solution, and doesn't help me in coding a dynamic site with 5000+ thumbnails - when the thumbs displayed are a (subset and a) result of a database query. In effect, I have to code a page that will have an unknown number of thumbs, with an unknown mix of horizontal and vertical aspect ratios, in an unknown order. That's why I'm seeking an 'elegant' (ie common and minimum css) solution... Nick ___ Omnivision. Websight. http://www.omnivision.com.au/
RE: [WSG] Problem with floated divs in gallery site
What if you changed your design a little so you don't need to do that? Like for example putting the caption on the top instead of the bottom? I havent tried this but what about putting the image and its caption in a div, then putting THAT in another div, with fixed height attributes and have the image/caption div at the bottom of it? Cant do that? Cheers Mike Kear Windsor, NSW, Australia AFP Webworks http://afpwebworks.com
RE: [WSG] Problem with floated divs in gallery site
Nick Gleitzman] Problem with floated divs in gallery site On Thursday, June 24, 2004, at 11:01 PM, Trusz, Andrew wrote: Couple of industrial strength options; both of which I've used. One is purely visual - organize the pictures by height.. No good if the client insists their thumbnails are presented in a specific order - which mine (photographers) invariably do. The alternative is to pad the pictures. That's what I suggested, but it's a labour-intensive solution, and doesn't help me in coding a dynamic site with 5000+ thumbnails - when the thumbs displayed are a (subset and a) result of a database query. In effect, I have to code a page that will have an unknown number of thumbs, with an unknown mix of horizontal and vertical aspect ratios, in an unknown order. That's why I'm seeking an 'elegant' (ie common and minimum css) solution... = Nick, then use a css table. Nothing wrong with that. It's a reasonable and elegant solution given the circumstances. drew
Re:[WSG] Problem with floated divs in gallery site
Hi all,
Thanks for those suggestions. Unfortunately, my client requires the
thumbnail galleries to align exactly as I've shown with the table layout -
caption under image.
The test page is at:
http://www.bluemountainsgardener.info/fgtest/max_miller.asp
I cannot control either the height or width of the thumbnails - they vary,
but fit within an imaginary box 100 x 100 pixels.
There are well over 200 thumbnails for a variety of artists.
I just cannot find a CSS way to emulate the table cell attribute
*valign='bottom'*. If I can do that, I can solve the problem.
In the embedded CSS I've used a class table.gallery{vertical-align: bottom;
...} and it works with the table, but it won't work when added to the
.thumbnail class div.
The only other way I could achieve the effect, I think, is write program
code to calculate the amount of padding I would need at the top of *each*
thumbnail and then putting an extra inline style attribute for the img tag -
eg: img class='thumbnail' style='padding-top: (the calculated number)px'
alt=' ' etc ... I can code for that, but I'd rather solve the problem with
CSS.
I think I'm probably getting offlist when I enter program code territory,
though.
I'm wondering whether Russ Weakley has a thought on all this. His tutorial
on floating divs was a tremendous help to me in getting as far as I did.
If we can sort out this problem, I think it could be useful to a lot of
people.
Thanks,
John Penlington
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
Re: [WSG] Problem with floated divs in gallery site
On Friday, June 25, 2004, at 12:22 AM, John Penlington wrote:
I just cannot find a CSS way to emulate the table cell attribute
*valign='bottom'*. If I can do that, I can solve the problem.
In the embedded CSS I've used a class table.gallery{vertical-align:
bottom;
...} and it works with the table, but it won't work when added to the
.thumbnail class div.
Yup, there's the rub: 'vertical-align' only works on text. I found that
out by TE while trying to solve this one.
I think maybe Drew Trusz has the right approach: use a css table...
BTW, interesting to view your source - the table-based version really
wasn't that much more code than the css-based - and if you use css to
style your table, you'll cut the code even more... Oh, and what's with
the non-breaking spaces in the floated divs? ;-)
Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
RE: [WSG] Problem with floated divs in gallery site
Hi all again! RE: My problem with floated divs in gallery site - and trying to get those thumbnail images to align at the bottom. I've solved the problem - in two ways - and thanks for those suggestions. You'll find the result at: http://www.bluemountainsgardener.info/fgtest/max_miller_solved.asp It shows both solutions - the first using divs and the second using a CSS table. Both are on the same page with CSS embedded. The results look exactly the same in IE6, Mozilla 1.5 and Opera 7.23 I'm keeping my fingers crossed for Apple Mac browsers !! For the div version, I used program code (ASP) to subtract each thumbnail's height from 100 (the maximum height of any thumbnail) and made that the value for *padding-top* as an inline style for the img tag. As each thumbnail is a live link to a bigger image on a different page, I ended up having to add a*border='0'* attribute to the image tag to get rid of the link-induced border around the image plus the padding. This was sloppy coding, I know, but it was so late at night!! You can see the interim solution with that strange effect at: http://localhost/fgtest/max_miller_partly_solved.asp Finally, Nick ... About those non-breaking spaces in the floated divs ... just junk from a much earlier version. I've removed them in the final version. Thanks, everyone for your help. I've really enjoyed this exercise. Only been doing full CSS web standards for the past six months - but very glad I persevered. Cheers, John Penlington * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Problem with floated divs in gallery site
Here is a solution my friend Brian came up with for a gallery page for my class. I need to add the toggle.js script to make the gallery work, and it isn't perfect, but gets the job done. Of course, that creatures image of yours is a real problem. http://www.sdco-op.com/palomar/gallery.html. We are using a background image to fill the space. Have you tried using a series of definition lists? The dt could be the image and the dd could be the title. You could specify the height of the dt. I did some work with this for a previous project and I need to pull up some of those files to look at it again to see what we did. Ted -Original Message-From: Trusz, Andrew [mailto:[EMAIL PROTECTED]Sent: Thursday, June 24, 2004 6:59 AMTo: '[EMAIL PROTECTED]'Subject: RE: [WSG] Problem with floated divs in gallery site Nick Gleitzman] Problem with floated divs in gallery site On Thursday, June 24, 2004, at 11:01 PM, Trusz, Andrew wrote: Couple of industrial strength options; both of which I've used. One is purely visual - organize the pictures by height.. No good if the client insists their thumbnails are presented in a specific order - which mine (photographers) invariably do. The alternative is to pad the pictures. That's what I suggested, but it's a labour-intensive solution, and doesn't help me in coding a dynamic site with 5000+ thumbnails - when the thumbs displayed are a (subset and a) result of a database query. In effect, I have to code a page that will have an unknown number of thumbs, with an unknown mix of horizontal and vertical aspect ratios, in an unknown order. That's why I'm seeking an 'elegant' (ie common and minimum css) solution... = Nick, then use a css table. Nothing wrong with that. It's a reasonable and elegant solution given the circumstances. drew
