Re: [WSG] Centering a liquid grid of image thumbs and captions
Bert, Don't know what constitutes 'wasting money' for you, but to me it makes sense to buy a system with a commitment to open standards (and quite a lot of open source as well) rather than one which seems to have as its goal the sabotaging of open standards for the purpose of ensuring that the majority stays locked into its proprietary world. The most compliant browsers, including the default one, are found on the Mac. As this list has so often said, develop first for standards, and then figure out what needs to be done to the code to address IE shortcomings. Just my 2c. -Hugh Todd I don't know how my site looks on a Mac (I don't have one and am not going to waste my money on one), but it's to be expected. * 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: [Spam] Re: [WSG] Centering a liquid grid of image thumbs and captions
7 sinz, If you noticed, I wasn't using tables http://www.english-sofas.co.uk/els_new/value_leather_sofas_0.htm. The challenge was to incorporate fluid and centred linear lists. The presented solution doesn't actually satisfy the requirement but does so for the client (who loved the site then mentioned centred product ranges). Good enough for me at the moment. What I was missing was the fudge to give a 25%-ish value to the image block -- thus causing it to stretch and centre, but effectively limiting the display to 4 images per row. Good fudge, though. But let me state again:- I am looking for a standard structure, a list (ul, li ...) which holds images and associated captions centred in a fluid container. e.g. - -- [img] [img] [img] [img] [img] ... - -- [img] [img] [img] [img] [img] ... - -- [img] [img] [img] - Any takers? Mike Pepper Accessible Web Developer www.seowebsitepromotion.com www.gawds.org -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of 7 sinz Sent: 05 June 2004 23:50 To: [EMAIL PROTECTED] Subject: RE: [Spam] Re: [WSG] Centering a liquid grid of image thumbs and captions doesnt look like he wants to use tables anymore From: Mike Pepper [EMAIL PROTECTED] Reply-To: [EMAIL PROTECTED] To: [EMAIL PROTECTED] Subject: RE: [Spam] Re: [WSG] Centering a liquid grid of image thumbs and captions Date: Sat, 5 Jun 2004 19:35:24 +0100 Far out! Kristof, well done, mate :o) Big smiley for you. Now just to implement it ... Many thanks, Mike Pepper (grateful) Accessible Web Developer www.seowebsitepromotion.com www.gawds.org -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Kristof Neirynck Sent: 05 June 2004 19:03 To: [EMAIL PROTECTED] Subject: [Spam] Re: [WSG] Centering a liquid grid of image thumbs and captions Nick Gleitzman wrote: I've been trying to emulate, with CSS alone, what I've been doing for years with tables: create a grid of thumbnails, each with a caption below, both image and caption linked to an enlargement. We all know how easy that is; center the table, center the cell content vertically, add some cell padding. Bingo. Any takers? [snip] Do you mean something like this? http://kristof.f2o.org/test/image_thumbs_and_captions/ -- Kristof * 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] Centering a liquid grid of image thumbs and captions
Been there, Nick --
I am looking for a standard structure, a list (ul, li ...) which holds
images and associated captions centred in a fluid container.
e.g. -
-- [img] [img] [img] [img] [img] ... -
-- [img] [img] [img] [img] [img] ... -
-- [img] [img] [img] -
That's what we need, eh :o)
Mike
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Nick Gleitzman
Sent: 06 June 2004 04:33
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions
I'm with Mike - that's brilliant. It'll certainly fix my immediate
needs. Thanks, Kristof!
One question: what's this hack for?
* html #images a {
height: 100px;
he\ight: 95px;
}
OK, I lied. Second question: your solution is very usable; I class this
as 'elegant' because all the img/caption pairs are contained in one
(open-ended) list. Just what I was after. But just out of interest, do
you think it's possible to go one step further, and style the list so
that the number of images in a row varies as window is resized - still
keeping the 'grid' centred - for a truly liquid layout?
Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
On Sunday, June 6, 2004, at 04:02 AM, Kristof Neirynck wrote:
Nick Gleitzman wrote:
I've been trying to emulate, with CSS alone, what I've been doing for
years with tables: create a grid of thumbnails, each with a caption
below, both image and caption linked to an enlargement. We all know
how easy that is; center the table, center the cell content
vertically, add some cell padding. Bingo.
Any takers?
[snip]
Do you mean something like this?
http://kristof.f2o.org/test/image_thumbs_and_captions/
--
Kristof
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
*
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] Centering a liquid grid of image thumbs and captions
Wow. I (and no doubt every other Mac user in the world) will be shocked and deeply perturbed to discover that we've wasted our money. I wonder if Apple give refunds? Let me suggest that the direction this thread is taking should stop right here - it's gonna get off-topic (ie Mac v PC) really fast. I think most people will agree that a real web dev environment includes the ability to test across paltforms and browsers. 'Nuff said? Ah, but I can't resist this: I have 3 Windows 'boxes' (WIn2K/IE5.5, Win2K/IE6 and WinXP/IE6) running on my Mac. Can your PC do that? Nick ___ Omnivision. Websight. http://www.omnivision.com.au/ On Sunday, June 6, 2004, at 02:49 PM, Bert Doorn wrote: I don't know how my site looks on a Mac (I don't have one and am not going to waste my money on one), but it's to be expected. * 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] Centering a liquid grid of image thumbs and captions
I'm looking for something similar, wondering what a good html syntax could be for this. i need a title, image and a description: -- Title Title2 Title3-- -- [img] descrip [img] descr [img] another -- -- tion of thislong -- -- image description -- -- -- -- Title4 Title5 Title6-- -- [img] descrip [img] descr [img] another -- -- tion of thislong -- -- image description -- -- -- -- Title7-- -- [img] descrip -- -- tion of this -- -- image -- greetz * 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] Centering a liquid grid of image thumbs and captions
On 6/6/04 2:42 AM Nick Gleitzman [EMAIL PROTECTED] sent this out: Damn. No self contol. Sorry. I'm off for a Bex and a good lie down. When in doubt, delete them. I do. Rick Faaberg * 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] Centering a liquid grid of image thumbs and captions
- Original Message - From: Nick Gleitzman [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Sunday, June 06, 2004 9:42 PM Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions I have a 400MHz iMac you can have for $300 - that's less than a software upgrade. I'll even load all the browsers on it for you. Damn. No self contol. Sorry. I'm off for a Bex and a good lie down. Nick ___ Omnivision. Websight. http://www.omnivision.com.au/ On Sunday, June 6, 2004, at 07:18 PM, Bert Doorn wrote: I believe this is heading off-topic, but in a nutshell... Wasting money for me is to buy a system I won't use. * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * 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] Centering a liquid grid of image thumbs and captions
Nick Gleitzman wrote: Thanks again, Kristof. I appreciate the time you've put into this; I have to get back to work too. I'm not sure that even nesting tables would give the liquid layout; I meant to reply on this: -- [img] [img] [img] [img] [img] ... - -- [img] [img] [img] [img] [img] ... - -- [img] [img] [img] - You could make the last row have less columns. Just inserting a table in that row Can't be done withhout javascript. -- Kristof * 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] Centering a liquid grid of image thumbs and captions
At to whether a list of thumbs is truly tabular ... I think not. It will visually appear such but it's not a grid -- for which tables should be used, as a matrix. Tables have rows and columns at which cells intersect as combined related values; a contiguous list of thumbs and associated captions have no common properties other than being a picture and text and *will make sense in isolation*. But you're not going to like what I've discovered as a result of experimenting with tables ... The bloody things don't inherit relative (em- and percentage-based) font and line-size attributes in IE 5/5.1, which means more bloody CSS and/or markup to compensate for that cock-up. Don't you just love being a standards-compliant developer :o( So as I see it, it's a question of the lesser of two evils: wrap each image and associated caption in another container and bulk the markup or use semantically incorrect cells and bulk up the CSS to cope with IE's shortcomings. Funnily enough, the client previewed the near-finished site update yesterday and was delighted ... then asked if I could centre the thumbs ... I shall endeavour to persevere :o) There is always a resolution Mike Pepper Accessible Web Developer (with attitude) http://www.seowebsitepromotion.com http://www.gawds.org This email and any files transmitted with it are confidential and intended solely for the use of the individual or body to whom they are addressed. This footnote also confirms that this email message has been swept by Norton AntiVirus for the presence of computer viruses. If this message is received in error, please accept our apologies. * 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] Centering a liquid grid of image thumbs and captions
yes use tables, but use them wiely, use them as they were intended for ( tabular data ) I hope you're not suggesting going back to nested tables are you? For me CSS holds to many advantages; and i feel it is just the future ( for me ne ways )to effectivley render beautiful sematic webpages. -peace From: RC Pierce [EMAIL PROTECTED] Reply-To: [EMAIL PROTECTED] To: [EMAIL PROTECTED] Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions Date: Sat, 5 Jun 2004 03:26:17 -0600 They haven't deprecated the table tag, yet, have they? Maybe I'm just a beginner, but I can easily follow the difficulty folks are having with 'pure css.' It was fun for me until I saw that a hackless site was a near impossibility, even if it's just the 3-pixel jog hack (which doesn't work for lists). think the jury is going to be out for a long time on this one. There really is no 'hack free' way to deal with css and cross browser support. Sure there have been plenty of 'elegant' uses of tableless markup, but when it takes a simple process and turns it into a morass of problems and surprises, it really does cross the line. Until the 'table police' show up and put on the cuffs, the best thing is do what is expedient, and what is effective and dependable. Whether for layout or tabular data, the use of tables, and their predictable results should not be discounted or frowned upon--especially if the table makes sense when linearized. What you are trying to do 'fits the bill' for a legitimate table. Until CSS reaches the point where proper centering, width and height is possible across all browsers and all platforms without hacks and kludges, hybrid designs should be expected, and not discouraged. As long as tables are still a part of html, I say use them. Roy - Original Message - From: Rick Faaberg [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Friday, June 04, 2004 10:30 PM Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions On 6/4/04 9:10 PM Nick Gleitzman [EMAIL PROTECTED] sent this out: A parting thought: does a series of thumbnail/caption pairs actually qualify as tabular data - thus leaving me feeling better about giving up and using a table to lay the bloody thing out anyway? That was my first thought when I began to read about your angst. It's tabular data - deal with that way. Get it over with. I'm no authority. Rick Faaberg * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * _ Open an Online Savings Account today collect a bonus $30*! http://clk.atdmt.com/1DG/go/hsb005000991dg/direct/01/ * 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] Centering a liquid grid of image thumbs and captions
It's not tabular data, it's a linear stream of images with captions. One way of looking at it is to take the thumbs and associated text and jumble the sequence; do that with a proper table grid and you'll have a mess since the row and columnar formats will be meaningless. For instance -- Mon Tue Wed Thu Fri Sat Sun Cost 10 20 20 10 20 20 20 Unit 3 5 2 6 4 1 7 Cost/Sat = 20. It's position must remain fixed to make sense, although it may possibly remain true in another location. Incorporate the Unit value of the matrix and moving anything invalidates the results. This is a table; rows and columns point to specific cells; rows and columns have meaning. Move the cell values within the grid and the results are nonsense. Not so with a sequence of images (unless, of course, you're ordering them alphabetically but that's not the issue). Make sense? Mike Pepper Accessible Web Developer (after a great night's sleep) www.seowebsitepromotion.com www.gawds.org -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Rick Faaberg Sent: 05 June 2004 05:30 To: [EMAIL PROTECTED] Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions On 6/4/04 9:10 PM Nick Gleitzman [EMAIL PROTECTED] sent this out: A parting thought: does a series of thumbnail/caption pairs actually qualify as tabular data - thus leaving me feeling better about giving up and using a table to lay the bloody thing out anyway? That was my first thought when I began to read about your angst. It's tabular data - deal with that way. Get it over with. I'm no authority. Rick Faaberg * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * 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] Centering a liquid grid of image thumbs and captions
On 6/5/04 3:47 AM Mike Pepper [EMAIL PROTECTED] sent this out: Not so with a sequence of images (unless, of course, you're ordering them alphabetically but that's not the issue). Couldn't Cost and Monday have a value which is an image along with a caption? :-) Rick Faaberg * 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] Centering a liquid grid of image thumbs and captions
i wasnt talking to you ;) From: Mike Pepper [EMAIL PROTECTED] Reply-To: [EMAIL PROTECTED] To: WSG [EMAIL PROTECTED] Subject: RE: [WSG] Centering a liquid grid of image thumbs and captions Date: Sat, 5 Jun 2004 11:47:12 +0100 It's not tabular data, it's a linear stream of images with captions. One way of looking at it is to take the thumbs and associated text and jumble the sequence; do that with a proper table grid and you'll have a mess since the row and columnar formats will be meaningless. For instance -- Mon Tue Wed Thu Fri Sat Sun Cost 10 20 20 10 20 20 20 Unit 3 5 2 6 4 1 7 Cost/Sat = 20. It's position must remain fixed to make sense, although it may possibly remain true in another location. Incorporate the Unit value of the matrix and moving anything invalidates the results. This is a table; rows and columns point to specific cells; rows and columns have meaning. Move the cell values within the grid and the results are nonsense. Not so with a sequence of images (unless, of course, you're ordering them alphabetically but that's not the issue). Make sense? Mike Pepper Accessible Web Developer (after a great night's sleep) www.seowebsitepromotion.com www.gawds.org -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Rick Faaberg Sent: 05 June 2004 05:30 To: [EMAIL PROTECTED] Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions On 6/4/04 9:10 PM Nick Gleitzman [EMAIL PROTECTED] sent this out: A parting thought: does a series of thumbnail/caption pairs actually qualify as tabular data - thus leaving me feeling better about giving up and using a table to lay the bloody thing out anyway? That was my first thought when I began to read about your angst. It's tabular data - deal with that way. Get it over with. I'm no authority. Rick Faaberg * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * _ Smart Saving with ING Direct earn 5.25% p.a. variable rate: http://ad.au.doubleclick.net/clk;7249209;8842331;n?http://www.ingdirect.com.au/burst6offer.asp?id=8 * 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] Centering a liquid grid of image thumbs and captions
My hovercraft is full of eels ;o) -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of 7 sinz Sent: 05 June 2004 12:07 To: [EMAIL PROTECTED] Subject: RE: [WSG] Centering a liquid grid of image thumbs and captions i wasnt talking to you ;) From: Mike Pepper [EMAIL PROTECTED] Reply-To: [EMAIL PROTECTED] To: WSG [EMAIL PROTECTED] Subject: RE: [WSG] Centering a liquid grid of image thumbs and captions Date: Sat, 5 Jun 2004 11:47:12 +0100 It's not tabular data, it's a linear stream of images with captions. One way of looking at it is to take the thumbs and associated text and jumble the sequence; do that with a proper table grid and you'll have a mess since the row and columnar formats will be meaningless. For instance -- Mon Tue Wed Thu Fri Sat Sun Cost 10 20 20 10 20 20 20 Unit 3 5 2 6 4 1 7 Cost/Sat = 20. It's position must remain fixed to make sense, although it may possibly remain true in another location. Incorporate the Unit value of the matrix and moving anything invalidates the results. This is a table; rows and columns point to specific cells; rows and columns have meaning. Move the cell values within the grid and the results are nonsense. Not so with a sequence of images (unless, of course, you're ordering them alphabetically but that's not the issue). Make sense? Mike Pepper Accessible Web Developer (after a great night's sleep) www.seowebsitepromotion.com www.gawds.org -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Rick Faaberg Sent: 05 June 2004 05:30 To: [EMAIL PROTECTED] Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions On 6/4/04 9:10 PM Nick Gleitzman [EMAIL PROTECTED] sent this out: A parting thought: does a series of thumbnail/caption pairs actually qualify as tabular data - thus leaving me feeling better about giving up and using a table to lay the bloody thing out anyway? That was my first thought when I began to read about your angst. It's tabular data - deal with that way. Get it over with. I'm no authority. Rick Faaberg * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * _ Smart Saving with ING Direct earn 5.25% p.a. variable rate: http://ad.au.doubleclick.net/clk;7249209;8842331;n?http://www.ingdirect.com. au/burst6offer.asp?id=8 * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * 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] Centering a liquid grid of image thumbs and captions
I hope you're not suggesting going back to nested tables are you? Not on your life. Tableless, free-flowing, css driven layout is really the ticket, to be sure. I much prefer the ease with which a page can be constructed and styled later. Add to this that once a working template is created, one never has to consider presentation again. Adding new content to a site is so much easier when all one needs to do is insert it into a 'proven' construct. Not to mention, restyling a site doesn't involve 're-tooling' it. This could never be done using tables. Bert's thumbnail layout is really quite straight forward. Wish I'd o' thought of using inline paragraphs as containers when I was having trouble with a thumbnail page, myself. The problem of attaching caption to image, getting it to center with the thumbnail is completely overcome using that simple technique. Beats .td.img.br /.acaption./a./td (ignore dots) all to heck when it comes to elasticity and fluidity. Nice one, Bert. On the other hand, if a page is not elastic (shudder) then a table works just fine, at least this one does, anyway. It is still very linear. Now this brings up the question: Is there a 'standard' way for linearizing tables? Does one move across, then down row by row, or down then across column by column? Roy - Original Message - From: 7 sinz [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Saturday, June 05, 2004 3:56 AM Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions yes use tables, but use them wiely, use them as they were intended for ( tabular data ) I hope you're not suggesting going back to nested tables are you? For me CSS holds to many advantages; and i feel it is just the future ( for me ne ways )to effectivley render beautiful sematic webpages. -peace From: RC Pierce [EMAIL PROTECTED] Reply-To: [EMAIL PROTECTED] To: [EMAIL PROTECTED] Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions Date: Sat, 5 Jun 2004 03:26:17 -0600 They haven't deprecated the table tag, yet, have they? Maybe I'm just a beginner, but I can easily follow the difficulty folks are having with 'pure css.' It was fun for me until I saw that a hackless site was a near impossibility, even if it's just the 3-pixel jog hack (which doesn't work for lists). think the jury is going to be out for a long time on this one. There really is no 'hack free' way to deal with css and cross browser support. Sure there have been plenty of 'elegant' uses of tableless markup, but when it takes a simple process and turns it into a morass of problems and surprises, it really does cross the line. Until the 'table police' show up and put on the cuffs, the best thing is do what is expedient, and what is effective and dependable. Whether for layout or tabular data, the use of tables, and their predictable results should not be discounted or frowned upon--especially if the table makes sense when linearized. What you are trying to do 'fits the bill' for a legitimate table. Until CSS reaches the point where proper centering, width and height is possible across all browsers and all platforms without hacks and kludges, hybrid designs should be expected, and not discouraged. As long as tables are still a part of html, I say use them. Roy - Original Message - From: Rick Faaberg [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Friday, June 04, 2004 10:30 PM Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions On 6/4/04 9:10 PM Nick Gleitzman [EMAIL PROTECTED] sent this out: A parting thought: does a series of thumbnail/caption pairs actually qualify as tabular data - thus leaving me feeling better about giving up and using a table to lay the bloody thing out anyway? That was my first thought when I began to read about your angst. It's tabular data - deal with that way. Get it over with. I'm no authority. Rick Faaberg * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * _ Open an Online Savings Account today collect a bonus $30*! http://clk.atdmt.com/1DG/go/hsb005000991dg/direct/01/ * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for
Re: [WSG] Centering a liquid grid of image thumbs and captions
Nick Gleitzman wrote: I've been trying to emulate, with CSS alone, what I've been doing for years with tables: create a grid of thumbnails, each with a caption below, both image and caption linked to an enlargement. We all know how easy that is; center the table, center the cell content vertically, add some cell padding. Bingo. Any takers? [snip] Do you mean something like this? http://kristof.f2o.org/test/image_thumbs_and_captions/ -- Kristof * 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] Centering a liquid grid of image thumbs and captions
I'm with Mike - that's brilliant. It'll certainly fix my immediate
needs. Thanks, Kristof!
One question: what's this hack for?
* html #images a {
height: 100px;
he\ight: 95px;
}
OK, I lied. Second question: your solution is very usable; I class this
as 'elegant' because all the img/caption pairs are contained in one
(open-ended) list. Just what I was after. But just out of interest, do
you think it's possible to go one step further, and style the list so
that the number of images in a row varies as window is resized - still
keeping the 'grid' centred - for a truly liquid layout?
Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
On Sunday, June 6, 2004, at 04:02 AM, Kristof Neirynck wrote:
Nick Gleitzman wrote:
I've been trying to emulate, with CSS alone, what I've been doing for
years with tables: create a grid of thumbnails, each with a caption
below, both image and caption linked to an enlargement. We all know
how easy that is; center the table, center the cell content
vertically, add some cell padding. Bingo.
Any takers?
[snip]
Do you mean something like this?
http://kristof.f2o.org/test/image_thumbs_and_captions/
--
Kristof
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
*
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] Centering a liquid grid of image thumbs and captions
Roy - ummm, did I miss a post? Can you point me to 'Bert's layout'? Thanks Nick ___ Omnivision. Websight. http://www.omnivision.com.au/ On Sunday, June 6, 2004, at 01:59 AM, RC Pierce wrote: Bert's thumbnail layout is really quite straight forward. Wish I'd o' thought of using inline paragraphs as containers when I was having trouble with a thumbnail page, myself. The problem of attaching caption to image, getting it to center with the thumbnail is completely overcome using that simple technique. Beats .td.img.br /.acaption./a./td (ignore dots) all to heck when it comes to elasticity and fluidity. Nice one, Bert. * 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] Centering a liquid grid of image thumbs and captions
Thanks, Bert - that's a different and very useful take on the problem. Er - Notwithstanding your PS, do you know how unwell your site is in Mac browsers? IE5 particularly - the only thing that shows up is the bgrd image (red at left). I think it's the height:100% that's doing it... If you want, I can send you some screenshots direct; I have a range of IE versions on both OS9 and OSX, and Safari 1 for OSX. Maybe some others might like to contribute sshots from other browsers? Nick ___ Omnivision. Websight. http://www.omnivision.com.au/ On Sunday, June 6, 2004, at 02:05 PM, Bert Doorn wrote: G'day Sorry, I emailed direct rather than to the list. Here it is: I stay away from using NESTED tables I try to use DIVS only (and it's fine in simple layouts) I use a maximum of one table per page, if it makes life easier, such as where there is a complex layout, or where I have something that, with some imagination, could qualify as tabular data. Having said all that, if you can control the height of the captions, you could use divs or ps with a fixed height. Have a look at the portfolio page on my site (url in signature) for an example. I use paragraphs here, but you could use divs, an unordered list, or whatever :-) The beauty (to me) of this set up is that at different resolutoins you get a different number of thumbs across. For instance, at 800x600 I see 5 across, at 1024x768 there's 7 and at 1280x1024 I get as many as 9 across. P.S. I know this site isn't perfect. Am working on it. Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Nick Gleitzman Sent: Sunday, 6 June 2004 11:35 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions Roy - ummm, did I miss a post? Can you point me to 'Bert's layout'? Thanks Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * 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] Centering a liquid grid of image thumbs and captions
Hi Nick I don't know how my site looks on a Mac (I don't have one and am not going to waste my money on one), but it's to be expected. But as my PS said, I am changing the site. Can't be bothered to do to much to it at the moment as I don't need extra work and it works for the vast majority anyway. It's one of those cases where I have used features that work in the mainstream browser on the mainstream platform, but which are seemingly impossible to implement on other browsers. I have another site that's more up to date. www.bwdzine.net - nothing fancy there, just plain boring CSS divs (seems the server is down however). That one probably doesn't work in Mac IE either. Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Nick Gleitzman Sent: Sunday, 6 June 2004 12:26 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions Thanks, Bert - that's a different and very useful take on the problem. Er - Notwithstanding your PS, do you know how unwell your site is in Mac browsers? IE5 particularly - the only thing that shows up is the bgrd image (red at left). I think it's the height:100% that's doing it... If you want, I can send you some screenshots direct; I have a range of IE versions on both OS9 and OSX, and Safari 1 for OSX. Maybe some others might like to contribute sshots from other browsers? Nick * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
