Daniel,
Consider an online photo album. Once you're on the page, the thumbnails
for any content (video/images) only consumes a certain portion of a page,
say about 60-75%, much like the content area for an online email service. In
order to make the thumbnails look presentable and informative, one could
surround these with borders that represent the type of content. The sky's
the limit on the aesthetics. Without CSS3, well rounded corner images with
shadow effects often end up being segmented into a fair amount of files,
especially if the user has some say in how these borders look. The user
would be presented with different border colors, edges, shadows, etc., to
finally decide how these thumbnails become usable. Some part of these
thumnails might reserve space to present the name of the image, or perhaps
the date they were created, and so on...
Now, should these scale flexibly as the browser goes full screen, or if
the desktop resolution changes ? Probably not today, for most needs.
However, it would help to keep the approach open enough for such
requirements in the future. What is certain is that images come in all
sizes. Short of pre-scaling the image with Javascript or other server side
tools prior to presenting in the above discussed format, I would be
interested to see it done using a simpler HTML/CSS approach.
I have tried a couple of methods inlcuding tagging the <img> between a
<td> element with the appropriate width and height. It works. However, I
lose the ability to set other partial images or CSS colored lines on top of
this. With an image set as a table background, any <TD> cell can contain an
image or text style even, that can be used to overlay the background. Doing
it dynamically through DIVs won't be a problem as well. This approach suits
almost all of my needs, except for the fact that the image won't "fit"
completely within the table background defined space.
Matt
On 7/31/07, Daniel Kendrick <[EMAIL PROTECTED]> wrote:
>
> Matt,
>
> Give me more details. What type of border is this around your page
> content?
>
> like if you had a square you have a series of images surrounding this
> square creating a border? So that if the square scales the border scales
> with it?
>
> I am no purist however i do believe tables should be used for tabular data
> and the extra time should be taken to find a suitable solution using CSS.
>
> I have done several things using the parent child relationship CSS has to
> offer.
>
> --DK
>
> On 7/31/07, Matt 0000 <[EMAIL PROTECTED]> wrote:
> >
> >
> > Mark,
> > It was my impression that tables provide a very flexible way to
> > define boundaries and sub sections within those, regardless of content type
> > - video, image, text... I kept my question short for the sake of brevity.
> > However, I'll eventually need a structure that has several images that forms
> > a border with shadow around the particular table background image in
> > question. The sizes and scaling for these secondary images are easily
> > computed with the help of a table. Further more, some parts of this table
> > will provide constrained texts (think text within an image slide). On top of
> > this, several such tables will form part of a bigger table (this concept is
> > quite similar to a thumbnail view of a slide show)
> > If you perceive the general idea, perhaps you might have examples
> > that illustrate this using CSS ?
> >
> > Matt
> >
> > On 7/31/07, Mark L Hedley <[EMAIL PROTECTED]> wrote:
> > >
> > > Just use CSS and DIVS?
> > >
> > >
> > >
> > > Tables are not so good for this type of thing.
> > >
> > >
> > >
> > > Cheers.
> > >
> > >
> > >
> > > *Regards,*
> > >
> > >
> > >
> > > Mark Hedley
> > >
> > > *Voxia Web Development Solutions
> > >
> > > *
> > >
> > > *Mobile: +44 07894 009 932*
> > >
> > > *Office: +44 01670 840 752**
> > > **Web: **http://www.voxia.co.uk ***
> > >
> > > * *
> > >
> > > Proud Members of: GAWDS (Guild of Accessible Web Designers) | Web
> > > Standards Group | Independent Web Developers Portal | HTML Writers Guild
> > >
> > >
> > >
> > > *From:* [EMAIL PROTECTED] [mailto:
> > > [EMAIL PROTECTED] *On Behalf Of *Matt 0000
> > > *Sent:* 31 July 2007 17:03
> > > *To:* wsg@webstandardsgroup.org
> > > *Subject:* [WSG] Auto scaling within a table's background image
> > >
> > >
> > >
> > >
> > >
> > >
> > >
> > > My goal is to set the background image of a table and add individual
> > > cells (text or images) that can be opaque or transparent. The height and
> > > width of the table is fixed. The image that needs to be set in the table
> > > background however, is not under my control, and can be larger or smaller
> > > than the table's viewing area. Tagging the code as shown below does not
> > > automatically up/down-scale the image to fit within the desired viewing
> > > area:
> > >
> > >
> > >
> > > <table width="100" height="50" cellpadding="0" cellspacing="0"
> > > border="0"
> > >
> > > style="background-image:url(images/image1.gif);background-position:
> > > center;
> > > background-repeat: no-repeat;
> > > background-attachment: fixed;">
> > > <tr>
> > > <td>
> > > <img src="...">
> > > </td>
> > > <td width="30"></td>
> > > <td>
> > > some text here...
> > >
> > > </td>
> > > </tr>
> > > </table>
> > >
> > >
> > >
> > > Is there a standardized way to present this without resolving to a
> > > Javascript or CSS hack ?
> > >
> > >
> > >
> > > Matt
> > >
> > >
> > > *******************************************************************
> > > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> > > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> > > Help: [EMAIL PROTECTED]
> > > *******************************************************************
> > >
> > > *******************************************************************
> > > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> > > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> > > Help: [EMAIL PROTECTED]
> > > *******************************************************************
> > >
> >
> >
> > *******************************************************************
> > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> > Help: [EMAIL PROTECTED]
> > *******************************************************************
> >
>
>
> *******************************************************************
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> *******************************************************************
>
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
