Re: [WSG] Auto scaling within a table's background image
Hi, This is the Web Standards Group. Web Standards say only use tables for tabular data - not presentation. I'm not sure what your tabular data is here? -- Stuart Foulstone. http://www.bigeasyweb.co.uk BigEasy Web Design 69 Flockton Court Rockingham Street Sheffield S1 4EB Tel. 07751 413451 On Tue, July 31, 2007 5:02 pm, Matt wrote: 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] ***
Re: [WSG] Auto scaling within a table's background image
Hi there On 01/08/07, Stuart Foulstone [EMAIL PROTECTED] wrote: Hi, This is the Web Standards Group. Web Standards say only use tables for tabular data - not presentation. Stuart, I think you're referring to WGAG 1. It does *sort of* say that, but not quite... While it's not best practice to use tables for layout, it's not illegal. if that were the case, I'd have been locked up for a long time in the late 90's :) I'm not at all advocating the use of tables for layout, but where it is absolutely necessary: 5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). 5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting. [WCAG 1.0 P2] hope that clears it up a bit... Lisa *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Auto scaling within a table's background image
On 01/08/07, David Dorward [EMAIL PROTECTED] wrote: On 1 Aug 2007, at 09:34, lisa herrod wrote: On 01/08/07, Stuart Foulstone [EMAIL PROTECTED] wrote: Web Standards say only use tables for tabular data - not presentation. Stuart, I think you're referring to WGAG 1. Lets look at HTML 4.01 instead, which is somewhat clearer on the subject: hmmm I must have missed the email re doctype. Matt, what doctype are you using? in any case, I don't think it really matters. Let's get back on topic. Matt, your initial question was: Is there a standardized way to present this without resolving to a Javascript or CSS hack ? I'd say you have two choices: tables or CSS (or both). Most people will advise against you using tables for layout. However, if you do use them... don't nest them and don't use any markup that will identify them as tabular data - unless it is. Guys feel free to jump in with any CSS layout advice! :) Lisa *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] CSS height/padding
Hi all, I have previously tried to create a horizontal page navigation with a fixed height but there seems to be two distinct problems with the two methods that I have used to date. 1) The first method employs top and bottom padding on a elements to vertically centre the text within the anchor box. This method works fine, until the text is re-sized. 2) The second method involves declaring a height for the a element but then the text is top aligned vertically (looks ugly). I have also tried declaring top padding combined with a height value to lessen the text resize issue but I would like to hear from anyone who knows a way to align text vertically, as well as assign a set height to elements (particularly a elements in a horizontal nav structure). Thanks. -- Christian Fagan Fagan Design fagandesign.com.au [EMAIL PROTECTED] *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Auto scaling within a table's background image
On 1 Aug 2007, at 09:34, lisa herrod wrote: On 01/08/07, Stuart Foulstone [EMAIL PROTECTED] wrote: Web Standards say only use tables for tabular data - not presentation. Stuart, I think you're referring to WGAG 1. Lets look at HTML 4.01 instead, which is somewhat clearer on the subject: Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables. -- http://www.w3.org/TR/html4/struct/tables.html I'm not at all advocating the use of tables for layout, but where it is absolutely necessary: I don't think I've ever encountered a situation where it was absolutely necessary to use tables for layout. It might be the only way to achieve a given presentation, but is that presentation really absolutely necessary? -- David Dorward http://dorward.me.uk/ http://blog.dorward.me.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS height/padding
Hi Christian, Use option 1 with em units instead of pixels for your top and bottom padding. The padding will increase as the text resizes. Al On 8/1/07, Christian Fagan [EMAIL PROTECTED] wrote: Hi all, I have previously tried to create a horizontal page navigation with a fixed height but there seems to be two distinct problems with the two methods that I have used to date. 1) The first method employs top and bottom padding on a elements to vertically centre the text within the anchor box. This method works fine, until the text is re-sized. 2) The second method involves declaring a height for the a element but then the text is top aligned vertically (looks ugly). I have also tried declaring top padding combined with a height value to lessen the text resize issue but I would like to hear from anyone who knows a way to align text vertically, as well as assign a set height to elements (particularly a elements in a horizontal nav structure). Thanks. -- Christian Fagan Fagan Design fagandesign.com.au [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] ***
Re: [WSG] CSS height/padding
I agree Al. Christian its not bad. There are MANY pixel to em calcs online to google it. :) --DK On 8/1/07, al morris [EMAIL PROTECTED] wrote: Hi Christian, Use option 1 with em units instead of pixels for your top and bottom padding. The padding will increase as the text resizes. Al On 8/1/07, Christian Fagan [EMAIL PROTECTED] wrote: Hi all, I have previously tried to create a horizontal page navigation with a fixed height but there seems to be two distinct problems with the two methods that I have used to date. 1) The first method employs top and bottom padding on a elements to vertically centre the text within the anchor box. This method works fine, until the text is re-sized. 2) The second method involves declaring a height for the a element but then the text is top aligned vertically (looks ugly). I have also tried declaring top padding combined with a height value to lessen the text resize issue but I would like to hear from anyone who knows a way to align text vertically, as well as assign a set height to elements (particularly a elements in a horizontal nav structure). Thanks. -- Christian Fagan Fagan Design fagandesign.com.au [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] ***
Re: [WSG] CSS height/padding
On 8/1/07, Daniel Kendrick [EMAIL PROTECTED] wrote: I agree Al. Christian its not bad. There are MANY pixel to em calcs online to google it. :) --DK I use this religiously (well, ya know...): http://riddle.pl/emcalc/ -- Tom Livingston | Senior Multimedia Artist | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS height/padding
If I understand what you are asking, try using line-height instead of what you are doing now. That will keep the text centered vertically in the element. -- E. Michael Brandt www.divaHTML.com divaGPS : you-are-here menu highlighting divaFAQ : FAQ pages with pizazz www.valleywebdesigns.com JustSo PictureWindow JustSo PhotoAlbum -- Christian Fagan wrote: Hi all, I have previously tried to create a horizontal page navigation with a fixed height but there seems to be two distinct problems with the two methods that I have used to date. 1) The first method employs top and bottom padding on a elements to vertically centre the text within the anchor box. This method works fine, until the text is re-sized. 2) The second method involves declaring a height for the a element but then the text is top aligned vertically (looks ugly). I have also tried declaring top padding combined with a height value to lessen the text resize issue but I would like to hear from anyone who knows a way to align text vertically, as well as assign a set height to elements (particularly a elements in a horizontal nav structure). Thanks. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Re: WSG Digest (Out of the office until 6/08/2007)
I am currently out of the office until Monday 6 August 2007. If you have an enquiry please contact: Martha Herewini on 9391 9048 or Saikat Choudhury on 9391 9769 Regards, Marian Weatherstone Web Support Officer NSW Department of Health __ This email has been scanned for the NSW Department of Health by the MessageLabs Email Security System. The Department regularly monitors emails and attachments to ensure compliance with its Electronic Messaging Policy. _ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Auto scaling within a table's background image
Matt wrote: I guess there were a couple of concerns raised. One of them was the justification of the table's use. I chose it only because it is currently the only way I know to put pretty borders (outer and inner) around and within an image. / I'm still waiting on someone to post a newer standardized approach to acheive the same effect. I think you'd have a better chance of getting specific help if you posted a complete example (or two) of your current approach. :-) -- Hassan Schroeder - [EMAIL PROTECTED] Webtuitive Design === (+1) 408-938-0567 === http://webtuitive.com dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Auto scaling within a table's background image
Hassan, The specific portion of the code I'm having a problem with was inlcuded on my first post. The code that was not included is just regular table based border wrapping. I bet most if not all the members here are of the been there, done that experience level, which is why I didn't bother illustrating it. I'm going to write an example here for your convenience: table id=outer_layout width=100 border=0 cellpadding=0 cellspacing=0 !-- 1st row begins here -- tr td width=10 height=10 img src=top_left.gif width=10 height=10 /td td width=80 height=10 img src=top.gif width=80 height=10 /td td width=10 height=10 img src=top_right.gif width=10 height=10 /td /tr !-- 1st row ends here -- !-- 2nd row begins here -- td width=10 height=80 img src=left.gif width=10 height=80 /td !-- CONTENT GOES HERE -- td width=10 height=80 img src=right.gif width=10 height=80 /td !-- 2nd row ends here -- !-- 3rd row begins here -- tr td width=10 height=10 img src=bottom_left.gif width=10 height=10 /td td width=80 height=10 img src=bottom.gif width=80 height=10 /td td width=10 height=10 img src=bottom_right.gif width=10 height=10 /td /tr !-- 3rd row ends here -- The portion commented as CONTENT GOES HERE is a placeholder for how an image needs to be displayed. A simple img embedded in a td will work. For another notch, a table element that allows it cells to act as overlays is possible too. This is the approach I've taken. A rough example was included on my first post. If you follow the responses to it, there were suggestions to get most of what I intended it for, done in CSS, as it was considered standard. So the quote below was meant to be a response to individuals who knew how. I'm still waiting on someone to post a newer standardized approach to acheive the same effect. Matt On 8/1/07, Hassan Schroeder [EMAIL PROTECTED] wrote: Matt wrote: I guess there were a couple of concerns raised. One of them was the justification of the table's use. I chose it only because it is currently the only way I know to put pretty borders (outer and inner) around and within an image. / I'm still waiting on someone to post a newer standardized approach to acheive the same effect. I think you'd have a better chance of getting specific help if you posted a complete example (or two) of your current approach. :-) -- Hassan Schroeder - [EMAIL PROTECTED] Webtuitive Design === (+1) 408-938-0567 === http://webtuitive.com dream. code. *** 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] ***
Re: [WSG] CSS height/padding
Thankyou for responses... Thanks Michael, this is what I was after E Michael Brandt wrote: If I understand what you are asking, try using line-height instead of what you are doing now. That will keep the text centered vertically in the element. -- Christian Fagan Fagan Design fagandesign.com.au [EMAIL PROTECTED] *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Auto scaling within a table's background image
Matt wrote: The specific portion of the code I'm having a problem with was inlcuded on my first post. The code that was not included is just regular table based border wrapping. I bet most if not all the members here are of the been there, done that experience level, which is why I didn't bother illustrating it. Yeah, been there, done that (since 1993), but... I'm going to write an example here for your convenience: ..without a real sample /with images/, I don't know if your border is supposed to be solid color, a complex geometric pattern that has to match at the corners, a cutout piece of a photo-realistic image, what -- and it *does* make a difference how *I*, at least, would approach this problem using CSS. Hence my suggestion that you provide a *real* example. Or two :-) -- Hassan Schroeder - [EMAIL PROTECTED] Webtuitive Design === (+1) 408-938-0567 === http://webtuitive.com dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Auto scaling within a table's background image
My dilemna was and still is to autofit an image of any size (entire image should be viewable) within the table's background image property using the style attribute. This table is currently no more than roughly 100 pixels on either side. Hi Matt, Here is a sample mockup I created using an overlay technique. Substitute the table for the div in your case. A better approach may be to resize the image on the server when the user uploads it using the GD2 library. I used the image resizing and cropping facilities for my home grown CMS. html head style img.stretch { width: 500px; height: 300px; z-index: -1; position: absolute; top: 50; left: 50; } div.overlay { width: 500px; height: 300px; z-index: 1; position: absolute; top: 50; left: 50; } /style /head body div class=overlayHere is some text/div img src=logo.jpg class=stretch / /body /html Best of luck, Kepler Gelotte *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS height/padding
You're very welcome. There are a bewildering array of tricks with CSS. -- E. Michael Brandt www.divaHTML.com divaGPS : you-are-here menu highlighting divaFAQ : FAQ pages with pizazz www.valleywebdesigns.com JustSo PictureWindow JustSo PhotoAlbum -- Christian Fagan wrote: Thankyou for responses... Thanks Michael, this is what I was after E Michael Brandt wrote: If I understand what you are asking, try using line-height instead of what you are doing now. That will keep the text centered vertically in the element. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] vCard File
I think there may have been a discussion regarding the vCard File recently, and if there was, I didn't study those emails because I didn't have to deal with it at the time. Today, however, I got a new project of re-creating a website with the current design. On this client's contact page, there is a link to the .vcf file, which when I click on it, the client's contact information appears in the Contacts section of my Outlook program. I've never seen a link to a vCard File on a website until today. Is it okay to have this link? What happens if the visitor to the website does not use Outlook? Thank you. Joyce *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] vCard File
Hi Joyce, It looks like vCard is a standard, so I guess the user's email client would pick it up: http://en.wikipedia.org/wiki/VCard HTH, Paul *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] vCard File
Oh, you so just put a huge smile on my face :D Thanks for the technorati link. I was unaware of this, and it makes all the work I did on microformats on my staff listing page worth it. (http://www.swinburne.edu.au/ads/about/staff.htm) Thanks. Lucien. -- Lucien Stals Multimedia/Web Developer Academic Development and Support Swinburne University of Technology PO Box 218 Hawthorn, 3122, Australia email: [EMAIL PROTECTED] telephone: +61 3 9214 4474 office: AD223 On 2/08/2007 at 1:30 pm, Brad Pollard [EMAIL PROTECTED] wrote: vCard's (.vcf files) will also open in a Mac OS X Address book. Not everyone will have a VCF compatible address book and hence an attempt should be made to educate/explain their use. You should mark up the displayed address information as an hCard: http://microformats.org/wiki/hcard ... and then use the technorati vcard generator http://technorati.com/contact to scrape the page and produce your vcard for you Can someone please suggest a cool icon for vCard downloads? It must be 2.0 of course :-) - Original Message - From: Joyce Evans To: wsg@webstandardsgroup.org Sent: Thursday, August 02, 2007 12:51 PM Subject: [WSG] vCard File I think there may have been a discussion regarding the vCard File recently, and if there was, I didn't study those emails because I didn't have to deal with it at the time. Today, however, I got a new project of re-creating a website with the current design. On this client's contact page, there is a link to the .vcf file, which when I click on it, the client's contact information appears in the Contacts section of my Outlook program. I've never seen a link to a vCard File on a website until today. Is it okay to have this link? What happens if the visitor to the website does not use Outlook? Thank you. Joyce *** 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] *** Swinburne University of Technology CRICOS Provider Code: 00111D NOTICE This e-mail and any attachments are confidential and intended only for the use of the addressee. They may contain information that is privileged or protected by copyright. If you are not the intended recipient, any dissemination, distribution, printing, copying or use is strictly prohibited. The University does not warrant that this e-mail and any attachments are secure and there is also a risk that it may be corrupted in transmission. It is your responsibility to check any attachments for viruses or defects before opening them. If you have received this transmission in error, please contact us on +61 3 9214 8000 and delete it immediately from your system. We do not accept liability in connection with computer virus, data corruption, delay, interruption, unauthorised access or unauthorised amendment. Please consider the environment before printing this email. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***BEGIN:VCARD VERSION:2.1 X-GWTYPE:USER FN:Lucien Stals TEL;WORK:4474 ORG:;Academic Development and Support EMAIL;WORK;PREF;NGW:[EMAIL PROTECTED] N:Stals;Lucien END:VCARD *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] vCard File
vCard's (.vcf files) will also open in a Mac OS X Address book. Not everyone will have a VCF compatible address book and hence an attempt should be made to educate/explain their use. You should mark up the displayed address information as an hCard: http://microformats.org/wiki/hcard ... and then use the technorati vcard generator http://technorati.com/contact to scrape the page and produce your vcard for you Can someone please suggest a cool icon for vCard downloads? It must be 2.0 of course :-) - Original Message - From: Joyce Evans To: wsg@webstandardsgroup.org Sent: Thursday, August 02, 2007 12:51 PM Subject: [WSG] vCard File I think there may have been a discussion regarding the vCard File recently, and if there was, I didn't study those emails because I didn't have to deal with it at the time. Today, however, I got a new project of re-creating a website with the current design. On this client's contact page, there is a link to the .vcf file, which when I click on it, the client's contact information appears in the Contacts section of my Outlook program. I've never seen a link to a vCard File on a website until today. Is it okay to have this link? What happens if the visitor to the website does not use Outlook? Thank you. Joyce *** 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] ***
Re: [WSG] vCard File
A vCard is an industry standard format. It works in Outlook or Windows Address Book in Windows, Entourage and Address Book in OS X and if your mobile phone was released in the last 5 or so years, likely it as well. vCard files are often attached to outgoing emails in the corporate world as a better alternative to a text signature. If you're considering including vCards, it might be worth checking out microformats (http://microformats.org/) while you're at it. Kit Grose On 02/08/2007, at 12.51 PM, Joyce Evans wrote: I think there may have been a discussion regarding the vCard File recently, and if there was, I didn’t study those emails because I didn’t have to deal with it at the time. Today, however, I got a new project of re-creating a website with the current design. On this client’s contact page, there is a link to the .vcf file, which when I click on it, the client’s contact information appears in the Contacts section of my Outlook program. I’ve never seen a link to a vCard File on a website until today. Is it okay to have this link? What happens if the visitor to the website does not use Outlook? Thank you. Joyce *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** smime.p7s Description: S/MIME cryptographic signature