[WSG] displaying 2 photos with captions
Help wean me from tables! I'm a WSG newbie. I created my first table-less website -- a very basic pro-bono site -- in January. It was a good learning experience, but now I'm tackling a more complicated site for a paying client and need some help. Within the main content div, I need to include photos with captions within a grey box. When there is just one photo, I can do this. See draft: http://www.harbourmarine.com/draft/products/capstans3.html But most of the time I will need to have two photos side-by-side of varying sizes and with captions. Using a table, I can do this in a flash. See: http://www.harbourmarine.com/draft/products/capstans2.html But I believe this is an inappropriate and unnecessary use of a table. How do I replace this table with divs? There will be many product pages like this one, but the photos will vary in size. Hope Stewart ** 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] displaying 2 photos with captions
Hope Stewart wrote: Help wean me from tables! I'm a WSG newbie. I created my first table-less website -- a very basic pro-bono site -- in January. It was a good learning experience, but now I'm tackling a more complicated site for a paying client and need some help. Within the main content div, I need to include photos with captions within a grey box. When there is just one photo, I can do this. See draft: http://www.harbourmarine.com/draft/products/capstans3.html But most of the time I will need to have two photos side-by-side of varying sizes and with captions. Using a table, I can do this in a flash. See: http://www.harbourmarine.com/draft/products/capstans2.html But I believe this is an inappropriate and unnecessary use of a table. How do I replace this table with divs? There will be many product pages like this one, but the photos will vary in size. Hope Stewart ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** Place each image/caption combination inside a div and float both of them to the left. As long as the combined width of the two divs isn't greater than the width of the parent element they should appear next to each other without any troubles. As a side note I'd suggest doing your captions differently also. Rather than using a em/strong tag on every caption place it in a span with a class. Then apply the styles to that class. That way you don't have to write em/strong everytime you have a caption, and you can change the look of all captions easily if the need arise. Scott Limmer ** 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] displaying 2 photos with captions
On 28/3/05 11:21 AM, Scott Limmer [EMAIL PROTECTED] wrote: Place each image/caption combination inside a div and float both of them to the left. As long as the combined width of the two divs isn't greater than the width of the parent element they should appear next to each other without any troubles. Works like a charm! Thanks for that. I had tried two different approaches that just wouldn't work. I've had to add, however, an empty div with a clear: both after the photos to prevent the following paragraphs of text from creeping into any leftover space to the right of the photos. As a side note I'd suggest doing your captions differently also. Rather than using a em/strong tag on every caption place it in a span with a class. Then apply the styles to that class. That way you don't have to write em/strong everytime you have a caption, and you can change the look of all captions easily if the need arise. Thanks for this suggestion. I've actually put the definition for the captions as part of the definition for the image div so that it automatically formats the captions as I type without having to use a span. (I've also dropped the em tag as, at least on the Windows machines I have, italic is rendered very jaggedly even though on my old Mac it looks beautiful -- but at least 99% of the client's customers seem to be using Windows, so it's got to look good for them!) Thanks for your help! Hope Stewart ** 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] displaying 2 photos with captions
On 28/3/05 12:43 PM, Vicki Berry [EMAIL PROTECTED] wrote: My personal approach is to use put captions in a p inside the div, and style that separately. (So if your div is #image, then just use #image p which will style all ps inside that div.) The reason I do this is because I may want to place widths or margins on the caption that I may *not* want on the div itself. A very good point. I hadn't thought about long captions which will need width restrictions to preserve the layout. Thanks for this tip! Hope ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
