[WSG] background images fluid
What is the best way to get a 100% width on a background image in a banner? I believe in fluid sites that look good in all resolutions, img tag works easy at 100% width, but even searching for hours on google didn't help for css background sizing in %. Anyone can help? Thanks in advance. Bruce Prochnau BKDesign Solutions
RE: [WSG] background images fluid
Can you give an example of what you mean? From: Bruce [mailto:[EMAIL PROTECTED] Sent: Monday, 1 August 2005 8:12 PM To: wsg@webstandardsgroup.org Subject: [WSG] background images fluid What is the best way to get a 100% width on a background image in a banner? I believe in fluid sites that look good in all resolutions, img tag works easy at 100% width, but even searching for hours on google didn't help for css background sizing in %. Anyone can help? Thanks in advance. Bruce Prochnau BKDesign Solutions ** 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] background images fluid
Bitmap grpahic is not intended to be rescaled/stretched. You can tile it, or combine it (like on mozillazine), but no stretching, please... -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.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] background images fluid
Jan Brasna wrote: Bitmap grpahic is not intended to be rescaled/stretched. You can tile it, or combine it (like on mozillazine), but no stretching, please... That's right. What I'd probably do (not having seen your banner) is - if the image doesn't stretch forever and isn't suitable to be repeated - to have a fluid section of the banner with a background image set to repeat in the CSS, and with the un-repeatable image on one side, blending it with the stretchy section with a gradient. You could adapt this if you wanted an image on both sides, creating a fluid mid-section. Hope I've understood what you were asking. :-) -- Vicki Berry DistinctiveWeb http://www.distinctiveweb.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] background images fluid
Hi Bruce, Try http://www.edgedesigns.com.au/resourcedw.htm. Not sure just how relevant this is, but it's a Dreamweaver extension (free) which you may be able to adapt to use in a div? (Not checked!) Bob Bruce wrote: What is the best way to get a 100% width on a background image in a banner? I believe in fluid sites that look good in all resolutions, img tag works easy at 100% width, but even searching for hours on google didn't help for css background sizing in %. Anyone can help? Thanks in advance. Bruce Prochnau BKDesign Solutions ** 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] background images fluid
Andreas Boehmer wrote: Can you give an example of what you mean? A header or banner at the top. I can put an image in there: div id=banner img src=anything.jpg width=100% height=120px alt=mynicebanner / /div It will size according to the resolution. Stretch and shrink. But I cannot make it do that in the stylesheet as a background image. Is there a way? Thanks everyone for answering, I should have been more specific. Bruce Prochnau BKDesign Solutions. ** 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] background images fluid
Hi Bruce I've come up against this myself when going for a liquid 3 column layout with a header graphic that I want to span all three columns at the top. You could 'sniff' the browser width/screen res, but I don't like doing that myself. The solutuion I came up with is pretty much the solution that Vicki suggested. I think this is a real limitation. Even Eric Meyer's site suffers this 'banner won't stretch' problem (try viewing http://www.meyerweb.com/ at 1600px screen width to see what I mean). The only alternative I have come up with is using a fixed width which sets the max width of a container div to the width of the banner. Strange, this never used to be a problem with table based layouts! Lol ... Only kidding! -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Bruce Sent: 01 August 2005 12:13 To: wsg@webstandardsgroup.org Subject: Re: [WSG] background images fluid Andreas Boehmer wrote: Can you give an example of what you mean? A header or banner at the top. I can put an image in there: div id=banner img src=anything.jpg width=100% height=120px alt=mynicebanner / /div It will size according to the resolution. Stretch and shrink. But I cannot make it do that in the stylesheet as a background image. Is there a way? Thanks everyone for answering, I should have been more specific. Bruce Prochnau BKDesign Solutions. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- No virus found in this incoming message. Checked by AVG Anti-Virus. Version: 7.0.338 / Virus Database: 267.9.7/60 - Release Date: 7/28/2005 -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.338 / Virus Database: 267.9.7/60 - Release Date: 7/28/2005 ** 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] background images fluid
Bruce schrieb: It will size according to the resolution. Stretch and shrink. Not stretching, not static, though: http://www.satzansatz.de/cssd/wide.html Ingo -- http://www.satzansatz.de/css.html ** 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] background images fluid
Vicki Berry wrote: if the image doesn't stretch forever [***I can't get it to stretch at all, thats the problem***] and isn't suitable to be repeated - to have a fluid section of the banner with a background image set to repeat in the CSS, and with the un-repeatable image on one side, blending it with the stretchy section with a gradient. You could adapt this if you wanted an image on both sides, creating a fluid mid-section. ... with the un-repeatable image on one side, blending it with the stretchy section with a gradient. Looks like a perfect solution. At least as perfect as can be had. Thanks to all who ansered. Funny how it can be easily done as an image IN the banner , but not in staylesheet. Bruce Prochnau BKDesign Solutions ** 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] background images fluid
Ingo Chao wrote: Bruce schrieb: It will size according to the resolution. Stretch and shrink. Not stretching, not static, though: http://www.satzansatz.de/cssd/wide.html Ingo That's it!! Thank you Ingo Awesome Bruce Prochnau BKDesign Solutions - just got a solution. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] CMS - Can you use Wordpress to act as your calendar on a normal web page.
Hi Guys, Im looking for a an easy to maintain calendar that will list events in a list format, rather than in a calendar format. It has to be able to be used by people who have no real interest in computers, so I was wondering if you could somehow use Wordpress with one of the calendar plugins but integrate that with your normal web page, as opposed o a full-on Wordpress blog. The alternative I guess is to bend Wordpress to look like they wanted their webpage! Thanks for listening Craig Fattyboombah Rippon Brisbane, Australia
Re: [WSG] background images fluid
Hi Bruce, I had a quick look at your current header and see what you are trying to do. At the end of the day I think you need to just be a bit more clever with your image. I *borrowed* your current image and did a very crude editing job to it so it will look good at the avg resolution, but you will need to tile it across the header (repeat-x) and it will tile for people with higher resolutions!! Give it a try http://img.photobucket.com/albums/v113/matrix_revolutions/header_sample.jpg Again, I could have made it a bit nicer so it tiles/aligns better, but you will get the picture!! Cheers Nathan Andreas Boehmer wrote: Can you give an example of what you mean? A header or banner at the top. I can put an image in there: div id=banner img src=anything.jpg width=100% height=120px alt=mynicebanner / /div It will size according to the resolution. Stretch and shrink. But I cannot make it do that in the stylesheet as a background image. Is there a way? Thanks everyone for answering, I should have been more specific. Bruce Prochnau BKDesign Solutions. ** 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] background images fluid
I guess I cannot communicate what I mean. I have an image on my own website of a sunset. I put it in the banner div as an image and set the width to 100%. I am perfectly happy with it, it looks good and stretches to fit all resolutions. There is nothing wrong with it at all. At 1024 it fills the monitor to both edges, and does the same at 800 with no scroll bars. I have no clue at all what being clever with my images means. I don't even want to be clever with them. I prefer being as I am, just a dumbass old country boy trying to make websites. I was wondering if an image would stretch as a background image in the stylesheet as a background. That's all. Ingo did a demo as a background image of a h1 tag. I thought that would work. Using the EXACT same code that he used, in the stylesheet for the banner it does not work. I have no idea why not. I was trying to do that for a client on another website. Maybe it cannot be done. Maybe I have no idea how to describe making a background image stretch. Thank you to all who answered. Bruce Prochnau Hi Bruce, I had a quick look at your current header and see what you are trying to do. At the end of the day I think you need to just be a bit more clever with your image. I *borrowed* your current image and did a very crude editing job to it so it will look good at the avg resolution, but you will need to tile it across the header (repeat-x) and it will tile for people with higher resolutions!! Give it a try http://img.photobucket.com/albums/v113/matrix_revolutions/header_sample.jpg Again, I could have made it a bit nicer so it tiles/aligns better, but you will get the picture!! Cheers Nathan Andreas Boehmer wrote: Can you give an example of what you mean? A header or banner at the top. I can put an image in there: div id=banner img src=anything.jpg width=100% height=120px alt=mynicebanner / /div It will size according to the resolution. Stretch and shrink. But I cannot make it do that in the stylesheet as a background image. Is there a way? Thanks everyone for answering, I should have been more specific. Bruce Prochnau BKDesign Solutions. ** 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] background images fluid
Bruce schrieb: That's it!! Bruce, I didn't expect that this attempt works for you. You need a very big image, resulting in 25k. --- You can choose a focus of the picture, which determines the percentage-value for the background-position. This makes the image look fixed (here: x=30%), When you use percentages, you position a point within the image itself, not the top left corner. This point is moved to the corresponding percentage point location in the box. (Zoe Gillenwater, http://www.communitymx.com/content/article.cfm?cid=AFC58) Further, note that the heading text can be aligned to that spot with the same %-padding-left. Opera and IE/Win are playing ball, Fx not. But the average user won't play with the screen size permanently, so I think its ok with Fx. --- I think it's not a good solution, due to the size of the image needed. I'd prefer the gradient solution with a small image, as Vicki said, you might combine the fluid mid with a percentage alignment. good luck. Ingo -- http://www.satzansatz.de/css.html ** 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] background images fluid
Another alternative would be to produce the image for a largish resolution (e.g. 1024), set max-width to 1024 and set width to 100%. I believe readability begins to decrease above 1280 - surely there's some research on maximum widths and readability somewhere. - Chris www.semioticpixels.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] background images fluid
Bruce schrieb: I guess I cannot communicate what I mean. ... I was wondering if an image would stretch as a background image in the stylesheet as a background. That's all. Ingo did a demo as a background image of a h1 tag. I thought that would work. Using the EXACT same code that he used, in the stylesheet for the banner it does not work. I have no idea why not. Because my image is 2048px wide. You can't stretch bg-images in CSS. It's not that we didn't understand what you want to accomplish, but it's just not possible. We are trying to find a workaround, not a solution. Follow Vicki's attempt and put a gradient on both sides of the bg-image, than position it 50% 100% in the horizontal mid. Or put the gradient just to the right, as Roger does: http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/ There is a maroon gradient to the right, and the container has the same background-color. Check in Firefox with cntr++, and view the bg-image. Ingo -- http://www.satzansatz.de/css.html ** 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] background images fluid
Bruce, I guess I cannot communicate what I mean. I have an image on my own website of a sunset. I put it in the banner div as an image and set the width to 100%. I am perfectly happy with it, it looks good and stretches to fit all resolutions. There is nothing wrong with it at all. At 1024 it fills the monitor to both edges, and does the same at 800 with no scroll bars. You can't do that with a background-image. CSS3 will (probably) have some properties to control the size of background-images. There were some proposals how to circumvent this problem, but none of these solve your problem. If you assign a percentage width/height to an img, AFAIK the percentage-value is calculated relative to the original size of the image. That means that it won't solve your problem too. What you could do is using an img-tag and caculate the width by Javascript and assign a value in px. But a much better solution would be to let the sunset just cover about 1024px and use either the method Ingo proposed or the small-pic with gradient method. You could even nest two divs and use two background-images, the sunset fixed and a small one repeated which composes a nice effect. Martin. ** 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] background images fluid
Bruce wrote: I guess I cannot communicate what I mean. I was wondering if an image would stretch as a background image in the stylesheet as a background. That's all. Short answer: No, you cannot, with CSS and HTML as it is today, resize a background image. The only properties available for background are: background-attachment background-color background-image background-position background-repeat There is no CSS property background-size or background-zoom or similar in CSS2. So for now, if you want to stretch it you will have to use a (foreground) image and use trickery (absolute positioning, z-index etc) to make it appear behind other objects. Hope this answers your question -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] background images fluid
Thank you to all who responded. I see that it is a problem with CSS at present. Partial solution seems to be making the image wide (I had it at 720px or thereabouts) I made the image itself 1026w, and 11k, now it sscales nicely, and for larger res the fade or framed with another image seems the answer. Fading into background color on the right seems good idea. Thanks for the feedback, it helped immensely with different methods to workaround. I thought I was just bein dumb, but seems not. Was just tryin what cannot be done! ;-) At least now 800 and 1024 res are covered. Thanks Again Bruce Prochnau BKDesign Solutions ** 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] background images fluid
Result: http://peoriaaz.nexcess.net/index.php Anyways, that's what all the fuss was about. Site was just started this morning. Done in Expression Engine. Redoing everything yet. Thanks again Bruce Prochnau BKDesign Solutions ** 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] IE7 b1 :/
On Jul 31, 2005, at 3:19 PM, Justin Carter wrote: IE7 will be far from a disappointment. Sure Beta 1 doesn't seem to give us anything much new and the UI is a bit topsy-turvey but I think it's mostly due to the fact that it has come straight out of Longhorn (Vista). From the IMPRESSIVE list of fixes and newly supported features posted on the IE blog I think that IE7 is on the right track, and the fact that Microsoft have shared this information with the community is one of the most positive things to come out of Redmond in a long time. As a developer I'm quite satisfied with what I've seen so far, and if they can get the UI right then the end-users might be quite satisfied as well! I can't wait for Beta 2 to give it a real workout :) Hear, hear! I agree that the recent communication from the IE development team is exemplary. These people have convinced me more than Robert Scoble has done in his still pretty MS-tainted approach to blogging. It's time for the o so sceptical standards missionaries to wait for the proof of the pudding. They might be surprised at the taste of the new browsing Microsoft is cooking. Jeroen ** 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] background images fluid
Hi Bruce Instead of stretching an image, try the sliding doors approach. This may seem odd in a photograph, but could work in situations where the image has a repeatable section. #wrap gets the left corner with generic content. #innerwrap gets the right side with the juicy part of the image. As the page gets smaller the juicy part of the image gets closer to the left side and overlaps the generic section. As the page gets wider, the juicy part moves to the right unveiling the generic section. I know this sounds really vague, but read up on the sliding doors technique. I think stopdesign.com did a tutorial on this. I've used it for creating a background with distinct edges that needed to stretch. Hope this helps. Ted - ** 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] CMS - Can you use Wordpress to act as your calendar on a normal web page.
Probablyaddress this to Wordpress' community or to http://www.codex.org/ which also has a forum - Original Message - From: Craig Rippon To: wsg@webstandardsgroup.org Sent: Monday, August 01, 2005 8:07 AM Subject: [WSG] CMS - Can you use Wordpress to act as your calendar on a "normal" web page. Hi Guys, Im looking for a an easy to maintain calendar that will list events in a list format, rather than in a calendar format. It has to be able to be used by people who have no real interest in computers, so I was wondering if you could somehow use Wordpress with one of the calendar plugins but integrate that with your normal web page, as opposed o a full-on Wordpress blog. The alternative I guess is to bend Wordpress to look like they wanted their webpage! Thanks for listening Craig Fattyboombah Rippon Brisbane, Australia
Re: [WSG] background images fluid
Bruce wrote: Looks like a perfect solution. At least as perfect as can be had. Thanks to all who ansered. Funny how it can be easily done as an image IN the banner , but not in staylesheet. wait 'til css3 and you can use an svg image in the background, that will do exactly what you want. only the browsers will have to support svg natively. best, dwain -- Dwain Alford [EMAIL PROTECTED] http://www.alforddesigngroup.com The artist may use any form which his expression demands; for his inner impulse must find suitable expression. Wassily Kandinsky, Concerning The Spiritual In Art ** 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] Opening external links in popup windows with no extra markup
On Jul 29, 2005, at 5:53 PM, Andrew Krespanis wrote:
On 7/30/05, Thierry Koblentz [EMAIL PROTECTED] wrote:
I think you ought to check specifically that 'http://' is at the
beginning of the string.
Good point, I'll change this.
A more reusable approach would be to check for '://', as this is what
differentiates 'mailto:', relative paths and 'http://' links, but will
still allow you to use the script on secure pages.
Whenever dealing with href maniputlation, it's always good to keep
'https' in the back of your mind ;)
Good catch. Now we're talking a good excuse for regular expressions.
Instead of my recommendation of:
a[i].getAttribute('href').toUpperCase().indexOf(HTTP://) == 0
...I now recommend:
/^https?:\/\//i.test(a[i].getAttribute('href'))
(tested only in Firefox, Safari; pretty sure it's good but I'm not
familiar with IE regexp quirks)
--
Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613
**
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] implicit / explicit labels which is better?
I've read that we should avoid using implicit labels because, while it shouldn't be any different, in testing it would appear screen readers can struggle and output misleading info, etc. /me goes off to find link -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rebecca Cox Sent: Tuesday, 2 August 2005 9:40 a.m. To: wsg@webstandardsgroup.org Subject: [WSG] implicit / explicit labels which is better? Hi all, Anyone happen to know if either of these methods is better? Eg screen reader wise? labelFirst name input type=text id=fname //label label for=fnameFirst name/label input type=text id=fname / Chrrs:) Rebecca ** 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 **
[WSG] Jroller vs. Movable Type
Can anyone tell me what the differences are between a Java based blogging tool and a php/mysql perl based one? The company I work for is looking into Jroller, because some of our apps are Java based and we might want to integrate down the road, but I'm not sure Jroller is all that well supported...I've been doing some research and I'm not finding any real threads on a review of the software. If you have any info, I'd appreciate it. -- Sincerely, Anthony P. Zeoli Founder Netmix.com 333 86th Street, Apt 2C Brooklyn, NY 11209-5051 Tel: 917-705-4700 email: [EMAIL PROTECTED] web: http://www.netmix.com AIM MSN: djtonyz Yahoo: anthonyzeoli ICQ: 251999694 ** 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] Jroller vs. Movable Type
Hi Anthony This list is not the best place to ask for software reviews. Their implementation and use of web standards is, though :) Replies/Reviews to Anthony off list, please. Cheers James On 8/2/05, Anthony Zeoli [EMAIL PROTECTED] wrote: Can anyone tell me what the differences are between a Java based blogging tool and a php/mysql perl based one? The company I work for is looking into Jroller, because some of our apps are Java based and we might want to integrate down the road, but I'm not sure Jroller is all that well supported...I've been doing some research and I'm not finding any real threads on a review of the software. If you have any info, I'd appreciate it. ** 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] implicit / explicit labels which is better?
Hi, An example of this structure would prove enlightening. C On Aug 1, 2005, at 3:16 PM, Terrence Wood wrote: you score more points with Cynthia with explicit labels. Explicit relationships means you can have more than one label for a form control... and yes, you are allowed to do that. If it works with the visual design I usually use an explicit and implicit relationship. kind regards Terrence Wood. On 2 Aug 2005, at 9:56 AM, Kenny Graham wrote: As far as I know, they're both the same. The benefit of explicit labels is the freedom of where you place them in your HTML. ** 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] Site Check: VVE
Great work Tathan! The markup is very tight indeed! there is very small thing - that is you've left out the type attribute on the link tag at the top of the document. link rel=stylesheet href=../Skins/Vision.css type=text/css media=screen / Otherwise its great. It looks good and behaves well! D On 8/2/05, Tatham Oddie (Fuel Advance) [EMAIL PROTECTED] wrote: Guys n' gals, In light of the Broadleaf discussion/brawl the other week, I have a new proposal for you. In this case, bandwidth was critical due to the existing site's traffic base and formed a major design goal. http://testdrive.fueladvance.com/vve/ There are still some oddities in IE6, however I have posted to CSS-D about this. What I was mostly interested in some feedback on was the mark-up, etc… I was just wondering if anybody had any pointers about how to improve it. Thanks in advance! And I'll try not to start a punchup this time. ;-) Thanks, Tatham Oddie Fuel Advance - Ignite Your Idea www.fueladvance.com N�ŠÇ.²È¨žX¬µú+†Ûiÿü nËZ�Ö«vÈ+¢êh®Òyèm¶ŸÿÁæ쵩Ýj·l‚º.¦Šàþf¢—ø.‰×¥Šw¬qùŸ¢»(™èbžÛ(žš,¶)උazX¬¶¶)à…éi
Re: [WSG] implicit / explicit labels which is better?
Do you mean for using more than one label for a form? Note the explicit and implicit relationship of the second label. How about an an error message !-- top of page -- pSorry, we were unable to process this form. Please check your value for label for=foofoo/label./p !-- snip, later in the page -- label for=fooFoo input type=text id=foo name=foo //input clicking the label in the error message focuses the form control. The draw back is that you need to wrap the entire page in a form, instead of having it contained in a smaller block. T. On 2 Aug 2005, at 1:26 PM, Chris Kennon wrote: Hi, An example of this structure would prove enlightening. C On Aug 1, 2005, at 3:16 PM, Terrence Wood wrote: you score more points with Cynthia with explicit labels. Explicit relationships means you can have more than one label for a form control... and yes, you are allowed to do that. If it works with the visual design I usually use an explicit and implicit relationship. ** 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] Site Check: VVE
v. nice. Nothing really needs changing but you might consider: 1. Maybe use search instead of query as a label for the search form. 2. Your CSS issues may come form the use of multiple classes, which some browsers don't handle very well (I'll leave the css-d folks to look into this) 3. You might want to save some bytes by combining your CSS image related declarations. e.g background-color: white; background-image: url(Assets/HeaderBase.jpg); background-position: right top; background-repeat: no-repeat; is the same as: background: #fff url(Assets/HeaderBase.jpg) no-repeat right top; kind regards Terrence Wood. On 2 Aug 2005, at 12:58 PM, Tatham Oddie (Fuel Advance) wrote: Guys n' gals, In light of the Broadleaf discussion/brawl the other week, I have a new proposal for you. In this case, bandwidth was critical due to the existing site's traffic base and formed a major design goal. http://testdrive.fueladvance.com/vve/ http://testdrive.fueladvance.com/vve/Dashboard/Default.ashx There are still some oddities in IE6, however I have posted to CSS-D about this. What I was mostly interested in some feedback on was the mark-up, etc. I was just wondering if anybody had any pointers about how to improve it. Thanks in advance! And I'll try not to start a punchup this time. ;-) Thanks, Tatham Oddie Fuel Advance - Ignite Your Idea www.fueladvance.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] implicit / explicit labels which is better?
Terrence Wood wrote: !-- top of page -- pSorry, we were unable to process this form. Please check your value for label for=foofoo/label./p !-- snip, later in the page -- label for=fooFoo input type=text id=foo name=foo //input clicking the label in the error message focuses the form control. The draw back is that you need to wrap the entire page in a form, instead of having it contained in a smaller block. I'd be careful with multiple labels when it comes to screenreaders as well. Need to do some testing, but I suspect it would possibly read all labels associated with a form element in source order (in your case, possibly foo foo). On the other hand, screenreaders may just read the last one in the series, which can also cause problems when relying on the multiple label method to provide different bits of label in different parts of the page, e.g. label for=nameYour name input type=text id=name name=name / /label and later on label for=name(required field)/label Ideally you want Your name (required), but screenreaders may read one or the other. As I said, needs testing, but just a word of caution... -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** 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] implicit / explicit labels which is better?
On Aug 1, 2005, at 7:02 PM, Terrence Wood wrote: Do you mean for using more than one label for a form? Note the explicit and implicit relationship of the second label. !-- snip, later in the page -- This would be explicit? label for=fooFoo And this implied? input type=text id=foo name=foo / /input ** 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] implicit / explicit labels which is better?
Chris Kennon wrote: This would be explicit? label for=fooFoo And this implied? input type=text id=foo name=foo / It can be a tad confusing, as the spec itself http://www.w3.org/TR/html4/interact/forms.html#h-17.9 uses implicit in two different ways: 1) a form control such as a submit button has its own *implicit* label already contained within it input type=submit value=implicit label / and does not need a label element. 2) when talking about labels associated with form controls, however, using a for attribute and related id is *explicit* label for=fooexplicit label/label input type=text id=foo name=foo / and not using for, but wrapping the form control inside the actual label element is what's referred to as *implicit* labelimplicit label input type=text name=foo //label The belt and braces approach when using labels is to make the label both explicit (via for) *and* implicit (by wrapping the control in the label) label for=fooexplicit and implicit label input type=text id=foo name=foo //label -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** 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] Site Check: VVE
G'day http://testdrive.fueladvance.com/vve/ http://testdrive.fueladvance.com/vve/Dashboard/Default.ashx Pretty good (looks clean, code and layout wise). I don't like using as many classes as you do, but that's personal preference. The only real problem I see is accessibility - a number of links with the same text [read more] going to different URL's. (Checkpoint 13.1) And there's a couple of errors and warnings in the CSS. Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.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] implicit / explicit labels which is better?
Patrick H. Lauke wrote: The belt and braces approach when using labels is to make the label both explicit (via for) *and* implicit (by wrapping the control in the label) label for=fooexplicit and implicit label input type=text id=foo name=foo //label By including the element being labelled as part of the label's definition aren't the semantics of an implicit label just a little bit dubious (even if it does meet the DTD)? Peter -- Peter Asquith http://www.wasabicube.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] implicit / explicit labels which is better?
Hi, Thanks, the belt and brace approach being most secure? C On Aug 1, 2005, at 7:43 PM, Patrick H. Lauke wrote: The belt and braces approach when using labels is to make the label both explicit (via for) *and* implicit (by wrapping the control in the label) label for=fooexplicit and implicit label input type=text id=foo name=foo //label ** 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] Site Check: VVE
1. Maybe use search instead of query as a label for the search form. Maybe use Find instead of search or query (then again, your target audience is developers, so query is part of their vocab). 'Search' suggests that a 'hunt and peck/ hit and miss activity will follow. More important than that -- how about adding a notice in the footer Virtual Earth is a trademark of Microshlop. This site is neither endorsed nor affiliated with Microsoft. After all, they are the lawsuit type ;) Cheers, Andrew. http://leftjustified.net/ ** 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] implicit / explicit labels which is better?
Whooa nelly! !important -- not adding a 'for' attribute kills half the purpose of using a label 0_o Without a for attrib, clicking the label will not affect (focus/activate) the input element nested within. This is especially important in the case of checkboxes and radio buttons as the label provides a target that can actually be clicked by most users. I've said this to many WSG members before -- providing for physical dissablities IS EXTREMELY IMPORTANT -- they're far more common than people think. EG: I have incredibly shaky hands, yet I surf the web at home using a wacom tablet and a keyboard with my head approx 2 feet from the monitor. I can't click a radio button on the first attempt with that setup, but that's my setup and you have to account for freaks like me when designing :) My personal preference is to always use the 'belt and brace' method as I use the label as the container that lines up the label text and the input. This also means that the entire row for each element is clickable. w00t. [Hint: label text within a span can be vertically centered relative to the label using the vertical-align property ;) -Andrew http://leftjustified.net/ On 8/2/05, Chris Kennon [EMAIL PROTECTED] wrote: Hi, Thanks, the belt and brace approach being most secure? foo name=foo //label ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
