[wdvltalk] RE: CSS boxes etc
Joseph Now who uses ems for site sizing and what problems are most important? That's the elastic design I was referring to. A column of, say, 36em is fixed to that measurement. No amount of browser resizing is going to change the width of that column. However, changing the text display size via your browser will modify just how big an EM is in terms of pixels, which will in turn change the width of your column. Therefore, the problems you're going to encounter is if you create a nice, comfortable design using EMs as measurements, be careful you don't end up causing horizontal scrollbars when a user wants a tiny browser window but huge text (36em at IE 6's Largest setting equates to 768px according to the Elastic Design article at ALA). but if I must use boxes... Boxes is a design metaphor so try not to get hung up on the concept being a literal my web pages look like a load of boxes (although early pure XHTML+CSS designs were very very boxy indeed, not always a good thing). Similarly, do table-based designs look like grids of tabular data? We've already cited the CSS Zen Garden as a beautiful example of what you can acheive with this approach, and a number of the designs there are very fluid, rounded, organic structures - not a visible box in sight. I would suggest that before you start thinking about redesigns and moving towards this wonderful approach, have a play around and experiment with the sources we've all provided and just get a feel for it. Once you know what you can do, what is within your grasp and confidence/experience level then you can start applying that to your work. As you say, it does require a change in design thinking, and also a shift in conceptualising how to code your sites, but however daunting it may be it's well worth it. Enjoy! MOU The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] RE: CSS boxes etc
Joesph: I get you now...those really annoying scrolly boxes that always try to stay at the same place on your screen regardless of how often you scroll! Ignore them - they're Javascript based and, although the concept behind them is a good one (also I think it's a workaround until our favourite Microsoft browser supports the CSS position:fixed for anything other than background images), the implementation is truly abysmal. If these are the things that's had you concerned about usability I'm glad to say it's not going to be an issue for your venture into tableless design at this stage. If you got any problems at all, you know where we are! MOU The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] RE: CSS boxes etc
Cheryl, Ah! That makes sense. But,no, I never included the flash ads; on my dial-up nothing much downloaded before I packed them off. So one last question pre seeing if I can take on the learning curve: is there a consensus on what is the most usual size of browser view that people actually see? Joseph Ah, those are usually done with javascript and not just CSS. Especially if you see them on IE because IE only supports position fixed for background. The first started appearing a couple of years ago and are intended to keep some object always in view, usually a menu. Not many people use them now. They were a fad for awhile. If someone wants to use one it should be in its own column so it doesn't obscure text. Or do you mean the Flash ads? Yahoo is notorious for using them. One of the benefits to using Firefox, Mozilla or Opera is that those floating flash ads don't float. Cheryl D. Wise Certified Professional Web Developer MS-MVP-FrontPage www.wiserways.com mailto: [EMAIL PROTECTED] 713.353.0139 Office The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] RE: CSS boxes etc
MOU, Thanks. With Cheryl and you in accord on this I know it's right ;-). Now I have to just blend this with php/mysql and the redesign should be a doddle... Joseph Joesph: I get you now...those really annoying scrolly boxes that always try to stay at the same place on your screen regardless of how often you scroll! Ignore them - they're Javascript based and, although the concept behind them is a good one (also I think it's a workaround until our favourite Microsoft browser supports the CSS position:fixed for anything other than background images), the implementation is truly abysmal. If these are the things that's had you concerned about usability I'm glad to say it's not going to be an issue for your venture into tableless design at this stage. If you got any problems at all, you know where we are! MOU . The WDVL Discussion List from WDVL.COM . To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to %%email.unsub%% To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with. The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] RE: CSS boxes etc
Joseph: is there a consensus on what is the most usual size of browser view that people actually see? Not too sure what you mean by this. If you're referring to common or most used screen resolutions then I have two answers for you: * If you're planning on working to a fixed size design (i.e. like A List Apart or Macromedia) then try to stick to widths that will fit comfortably to 800x600. * If you do this properly then you don't need to worry about user's screen resolutions because a properly designed fluid layout will adapt. Note that this is the theory lol so still test at a number of resolutions and browser sizes to see how well the fluid design adapts. MOU The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] Re: CSS boxes etc
Joe wrote: Might a good starting point for my education be a couple of urls where you consider this is well done and a good advertisement for the technique? http://www.csszengarden.com nuff said. - Stephen The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] RE: CSS boxes etc
-Original Message- From: Joseph Harris [mailto:[EMAIL PROTECTED] Sent: Monday, September 13, 2004 7:44 PM To: [EMAIL PROTECTED] Subject: [wdvltalk] CSS boxes etc With Cascade DTP I have just been experimenting with absolute positioning. My impression is that this forces a very rigid approach to design and layout. And I have not felt there is comfortable surfing with the floats I have viewed. If I am missing the point how, with the latest css (oft-praised on wdvl talk), can I achieve the flow and adaptability of tables - which I find a much more comfortable viewing experience? Intertwined in this, I suppose, is the question: just because it can be done, should it?I hope this is a sensible question; I have my dunce's cap ready if not. Joseph Harris West Civ offers a fine set of basic courses. Their technique is to offer free online versions on a rotating basis. Currently they are offering CSS Level 1, the introductory course. It's in week 5 now but you can also get to Week 4 and frankly the expense is minor for the entire course. Have a look at: http://www.westciv.com/courses/free/index.html Also for the box model, Big John and Holly have a fine mini tutorial at: http://www.positioniseverything.net/articles/float-theory.html Their site is excellent for explaining some of the special features found only in IE. drew The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] RE: CSS boxes etc
Their site is excellent for explaining some of the special features found only in IE. How politically correct of you drew :P MOU The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] RE: CSS boxes etc
-Original Message- From: Ross Clutterbuck [mailto:[EMAIL PROTECTED] Sent: Tuesday, September 14, 2004 8:58 AM To: [EMAIL PROTECTED] Subject: [wdvltalk] RE: CSS boxes etc Their site is excellent for explaining some of the special features found only in IE. How politically correct of you drew :P MOU == Rudy has referred to me as a reactionary and now I'm politically correct. Does that make me bi-polar? drew The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] RE: CSS boxes etc
Joseph, Also google for css columns. That will help you get a foundational understanding of how css does layouts. I try to shy away from absolute positioning as much as I can. Check out: http://www.simplebits.com He has some wonderful CSS designs and tutorials (although many are advanced). Here is the exact link to his CSS section: http://www.simplebits.com/notebook/css/index.html Purchase TopStyle3 Pro. I cannot say enough about how this program has helped me. It will give you instruction on what certain CSS elements are and help you keep syntactically correct. Take a lot of code apart. This is my best way of learning. I'm like the apprentice brain surgeon: I touch a brain lobe and then see what part of the body twitched! :) Hope that helped, Will Professional Graphics Artist Certified Web Designer (BCIP) Stewart and Company -- www.stewartandcompany.net [EMAIL PROTECTED] -- W: 304.550.2687 Rt. 1 Box 364 Buffalo, WV 25033 -Original Message- From: Joseph Harris [mailto:[EMAIL PROTECTED] Sent: Monday, September 13, 2004 7:44 PM To: [EMAIL PROTECTED] Subject: [wdvltalk] CSS boxes etc With Cascade DTP I have just been experimenting with absolute positioning. My impression is that this forces a very rigid approach to design and layout. And I have not felt there is comfortable surfing with the floats I have viewed. If I am missing the point how, with the latest css (oft-praised on wdvl talk), can I achieve the flow and adaptability of tables - which I find a much more comfortable viewing experience? Intertwined in this, I suppose, is the question: just because it can be done, should it?I hope this is a sensible question; I have my dunce's cap ready if not. Joseph Harris The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] RE: CSS boxes etc
drew, MOU and Stephen, I am following through on the urls and will further build my understanding; zengarden and happycog are excellent sites. I don't argue with that at all. Positioniseverything offers great clarity. I have no trouble with the principles of css/box/float, nor the site control it offers - particularly for the larger sites. While, as a limited web designer, I like any of these techniques which make that side of life easier I am also a site owner concerned with my surfer's experience. It is here that I see problems. I use my own surfing as a test and a sort of metaphor for my visitors. Now, whatever size of screen a surfer has his/her viewing experience is affected by the size of browser as she/he uses it. On the fixed box sites a browser smaller than the designed size needs scrolling (not such a problem in all honesty) but may also mean important design aspects cannot do their 'one second hypnosis' job, and it looks inflexible which is not a good image on the flexible net. Floats have another difficulty. Many surfers will have no problem with an ever changing text and box shaping as scrolling is done. But, not only for old codgers like me, too much visual disturbance creates actual discomfort. In fact I increasing limit my television watching because the excess use of flashing, quick refocussing, idiiotically close close-ups, crossing of people and objects between the subject and the camera, fast sweeps and ever-shortening takes (to name but a few coke-induced ideas). Like everybody else I sit much closer to the monitor than to a TV screen. Oh so many of the floats I have seen move around with scrolling, or change shape and/or position as the page downloads (maybe not only a box problem, but encouraged by the technique). So I am not just asking for adivce and help on how to go about it (I am already sold on css itself) but for a part of the discussion MOU referred to: can I make this new (to me anyway) method as flexible in different sized bowsers as I can make tables (visually comfortable is what I mean) without suffering a fluidity that ageing and imperfect eyes will find uncomfortable? At the moment I am planning to stay with tables for my redesign (if I ever get it done!!!) but I could still be convinced that I shouldn't; but it is viewr experience I am concerned with. Sorry to go on at length, but I think this is an important aspect. Joseph Harris From: Joseph Harris Subject: [wdvltalk] CSS boxes etc With Cascade DTP I have just been experimenting with absolute positioning. My impression is that this forces a very rigid approach to design and layout. And I have not felt there is comfortable surfing with the floats I have viewed. If I am missing the point how, with the latest css (oft-praised on wdvl talk), can I achieve the flow and adaptability of tables - which I find a much more comfortable viewing experience? Intertwined in this, I suppose, is the question: just because it can be done, should it?I hope this is a sensible question; I have my dunce's cap ready if not. Joseph Harris West Civ offers a fine set of basic courses. Their technique is to offer free online versions on a rotating basis. Currently they are offering CSS Level 1, the introductory course. It's in week 5 now but you can also get to Week 4 and frankly the expense is minor for the entire course. Have a look at: http://www.westciv.com/courses/free/index.html Also for the box model, Big John and Holly have a fine mini tutorial at: http://www.positioniseverything.net/articles/float-theory.html Their site is excellent for explaining some of the special features found only in IE. drew . The WDVL Discussion List from WDVL.COM . To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to %%email.unsub%% To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with. The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version:
[wdvltalk] RE: CSS boxes etc
See my replies inline. On Tue, 14 Sep 2004 09:34:11 -0400, William Stewart [EMAIL PROTECTED] wrote: Joseph, Also google for css columns. That will help you get a foundational understanding of how css does layouts. I try to shy away from absolute positioning as much as I can. Oh... Absolute Positioning's not so bad. In fact it's *very* powerful. Especially when you start mixing absolute and relative positioning. Not so good as far as subject matter for beginners though. Check out: http://www.simplebits.com He has some wonderful CSS designs and tutorials (although many are advanced). Here is the exact link to his CSS section: http://www.simplebits.com/notebook/css/index.html Purchase TopStyle3 Pro. I cannot say enough about how this program has helped me. It will give you instruction on what certain CSS elements are and help you keep syntactically correct. You know, I didn't think about it, but Will is absolutely correct on this one. TopStyle (even the free lite version if you have to [be assured the Pro upgrade has functionality out the wazoo and it's only $40us]) has been the key to my attaining a thorough understanding of CSS. Can't reccomend it enough. Take a lot of code apart. This is my best way of learning. I'm like the apprentice brain surgeon: I touch a brain lobe and then see what part of the body twitched! :) To aid in doing this... Make the switch to FireFox. For two reasons: [1] Web Developers Toolbar [2] EditCss sidebar The Web Developers Toolbar will help you immensely with CSS Layout. The ability to easily turn on and off borders on block level elements in and of itself (Outline Outline Block Level Elements) will save you /tons/ of time. Not to mention the bevy of other goodies it boasts... EditCss! Even though the Web Developers Toolbar has this functionality built into it, this is the way to go! All I do is hit ctrl + 8 and I've got *all* of the CSS (inline, embedded, linked) ready to edit in a handy sidebar that slides out from the right. Make changes and watch there effects in real time. So bad ass! Plus, it's all free. hth, Stephen [1] http://www.chrispederick.com/work/firefox/webdeveloper/ [2] http://editcss.mozdev.org/ The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] RE: CSS boxes etc
/me whipes the sweat from his brow. Okay... On Tue, 14 Sep 2004 16:10:38 +0100, Joseph Harris [EMAIL PROTECTED] wrote: drew, MOU and Stephen, snip/ Now, whatever size of screen a surfer has his/her viewing experience is affected by the size of browser as she/he uses it. On the fixed box sites a browser smaller than the designed size needs scrolling (not such a problem in all honesty) but may also mean important design aspects cannot do their 'one second hypnosis' job, and it looks inflexible which is not a good image on the flexible net. Everything you just said is as true of table-based layouts as CSS based layouts. It's pretty simple really... if you set your width to high, people will have to scroll. snip/ Oh so many of the floats I have seen move around with scrolling, or change shape and/or position as the page downloads (maybe not only a box problem, but encouraged by the technique). I think you're unclear on what a float is. Maybe it's an issue of terminology, but it sounds like you're talking more about the liquid width layouts than floats. So, first a definition: quote src=http://www.w3.org/TR/REC-CSS2/visuren.html#floats; 9.5 Floats A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or floated or floating box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property)... /quote I will presume you mean liquid layouts (correct me if I'm wrong). Again, what you've said of liquid CSS layouts is just as true of liquid table based layouts. The premise is the same. You have a portion of the screen which stretches to fit the available area. Content reflow is going to behave precisely the same regardless. In fact here's a demo page: http://mechavox.com/sandbox/squishy.html So I am not just asking for adivce and help on how to go about it (I am already sold on css itself) but for a part of the discussion MOU referred to: can I make this new (to me anyway) method as flexible in different sized bowsers as I can make tables (visually comfortable is what I mean) without suffering a fluidity that ageing and imperfect eyes will find uncomfortable? Well, I can't speak on the matter of what is and is not easy on the eyes, but I can say with much certainty that you may not only find as much flexibility, but much more with CSS layouts. Here's a good example: http://www.csszengarden.com/?cssfile=/063/063.csspage=0 Try changing your font size on that page. At the moment I am planning to stay with tables for my redesign (if I ever get it done!!!) but I could still be convinced that I shouldn't; but it is viewr experience I am concerned with. In respect to viewer experience: By laying out with CSS, you allow more viewers to experience your site. A semantically coded, valid site, with separated presentation goes a long way to being accessible by default. This means more user agents (PDA's, cell phones, braille and screen readers, web-enabled toilets, etc.) can get your content in an easily digested format. That, to me, *is* good viewer experience. Sorry to go on at length, but I think this is an important aspect. So do I :) Here's another tidbit for your thinking cap. You've got one customer that's (arguably) more important than any other. And it's blind. The web spider. It likes to have high content-to-markup ratio's. An easy way to achieve that is by having all of your presentation separated out into a single external file that the spider doesn't care about... your css. Add to that, semantically appropriate markup that gives spiders hints as to which pieces of text in a page should be considered important and you'll be well on your way to good search engine placement. okay, I'm done. someone put the soap box away for me. I need a smoke. - Stephen The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] RE: CSS boxes etc
To add to Stephen's description of what a float is the closes HTML analogy is align. Basically allows text wrapping. Another site to look at for CSS layouts but this time featuring current live sites is http://cssvault.com/ Cheryl D. Wise Certified Professional Web Developer MS-MVP-FrontPage www.wiserways.com mailto: [EMAIL PROTECTED] 713.353.0139 Office -Original Message- From: Stephen Caudill Oh so many of the floats I have seen move around with scrolling, or change shape and/or position as the page downloads (maybe not only a box problem, but encouraged by the technique). I think you're unclear on what a float is. Maybe it's an issue of terminology, but it sounds like you're talking more about the liquid width layouts than floats. So, first a definition: quote src=http://www.w3.org/TR/REC-CSS2/visuren.html#floats; 9.5 Floats A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or floated or floating box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property)... /quote I will presume you mean liquid layouts (correct me if I'm wrong). Again, what you've said of liquid CSS layouts is just as true of liquid table based layouts. The premise is the same. You have a portion of the screen which stretches to fit the available area. Content reflow is going to behave precisely the same regardless. In fact here's a demo page: http://mechavox.com/sandbox/squishy.html So I am not just asking for adivce and help on how to go about it (I am already sold on css itself) but for a part of the discussion MOU referred to: can I make this new (to me anyway) method as flexible in different sized bowsers as I can make tables (visually comfortable is what I mean) without suffering a fluidity that ageing and imperfect eyes will find uncomfortable? Well, I can't speak on the matter of what is and is not easy on the eyes, but I can say with much certainty that you may not only find as much flexibility, but much more with CSS layouts. Here's a good example: http://www.csszengarden.com/?cssfile=/063/063.csspage=0 Try changing your font size on that page. At the moment I am planning to stay with tables for my redesign (if I ever get it done!!!) but I could still be convinced that I shouldn't; but it is viewr experience I am concerned with. In respect to viewer experience: By laying out with CSS, you allow more viewers to experience your site. A semantically coded, valid site, with separated presentation goes a long way to being accessible by default. This means more user agents (PDA's, cell phones, braille and screen readers, web-enabled toilets, etc.) can get your content in an easily digested format. That, to me, *is* good viewer experience. Sorry to go on at length, but I think this is an important aspect. So do I :) Here's another tidbit for your thinking cap. You've got one customer that's (arguably) more important than any other. And it's blind. The web spider. It likes to have high content-to-markup ratio's. An easy way to achieve that is by having all of your presentation separated out into a single external file that the spider doesn't care about... your css. Add to that, semantically appropriate markup that gives spiders hints as to which pieces of text in a page should be considered important and you'll be well on your way to good search engine placement. okay, I'm done. someone put the soap box away for me. I need a smoke. The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] RE: CSS boxes etc
Will, I saw this after I had sent out my earlier reply. I have Top Style Lite (from a much earlier recommendation by Cheryl) and I agree it is a great help. And thanks Cheryl for the further link. I clicked back to my own (tables) site to check I was talking (and writing) sense and I find that some pages re-adjust to more or less fit a smaller browser window and some don't - or do so to a lesser degree!! My skills (and time to hone them) are by necessity limited, so I'm not too ashamed of that, but my object is a site which offers a good experience however the browser window is. I have taken on board Stephen's further highly informative and helpful remarks. Now I have (since I have noted boxes) understood that there are great similarities in appearance between tables and boxes; and previously that css cleans up the html (the added SE positioning value I had not registered before, though). I will download and see how I get on with Stephen's Firefox advice. The mobile boxes I have seen which I have been describing (inadequately) are not the ones that fill a width, but those that float so that if the browser is scrolled a section (usually with transparency but not always) bounces around at the top ot side or bottom of the window, often obscuring some part of the main text; the movement can be uncomfortable. I am starting to understand this is not what I had thought, but what is that? Thanks again for all the comments, teachers. Joseph (who thought he had a good gripe) Joseph, Also google for css columns. That will help you get a foundational understanding of how css does layouts. I try to shy away from absolute positioning as much as I can. Check out: http://www.simplebits.com He has some wonderful CSS designs and tutorials (although many are advanced). Here is the exact link to his CSS section: http://www.simplebits.com/notebook/css/index.html Purchase TopStyle3 Pro. I cannot say enough about how this program has helped me. It will give you instruction on what certain CSS elements are and help you keep syntactically correct. Take a lot of code apart. This is my best way of learning. I'm like the apprentice brain surgeon: I touch a brain lobe and then see what part of the body twitched! :) Hope that helped, Will Professional Graphics Artist Certified Web Designer (BCIP) Stewart and Company -- www.stewartandcompany.net [EMAIL PROTECTED] -- W: 304.550.2687 Rt. 1 Box 364 Buffalo, WV 25033 -Original Message- From: Joseph Harris [mailto:[EMAIL PROTECTED] Sent: Monday, September 13, 2004 7:44 PM To: [EMAIL PROTECTED] Subject: [wdvltalk] CSS boxes etc With Cascade DTP I have just been experimenting with absolute positioning. My impression is that this forces a very rigid approach to design and layout. And I have not felt there is comfortable surfing with the floats I have viewed. If I am missing the point how, with the latest css (oft-praised on wdvl talk), can I achieve the flow and adaptability of tables - which I find a much more comfortable viewing experience? Intertwined in this, I suppose, is the question: just because it can be done, should it?I hope this is a sensible question; I have my dunce's cap ready if not. Joseph Harris . The WDVL Discussion List from WDVL.COM . To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to %%email.unsub%% To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with. The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] RE: CSS boxes etc
Joseph Just a little thing. Don't confuse floats with fluid as they're different things. All the behaviour you seem to be referring to is fluid design, whereby the layout of a page flows with the sizing of the browser. Note however that it's not really common user practice to constantly size your browser - users will have their preferences on how big they want their browser window and what text size they want and generally leave it at that. Fluid design will ensure that your design work will flow accordingly and fit to what canvas it's been provided with with the beneift of rejigging itself should the user resize. But fixed sized design is also perfectly valid: A List Apart, Happy Cog and Macromedia sites all look mighty fine with their fixed-width, centered display area design. Enjoy yourself on this one Joseph - it's a big scary world at first but you'll come to love it... MOU The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] RE: CSS boxes etc
Just to follow up... I had meant to mention earlier that there are quite a few /benefits/ to fixed width layouts. While you noted they seem inflexible, until we get a bit better CSS support from IE (namely min-width and max-width, which will enable us to blend fluid and fixed width layouts a bit more freely), they're actually a boon to usability: http://psychology.wichita.edu/surl/usabilitynews/3S/layout.htm http://www.humanfactors.com/downloads/feb03.asp The basics of it being that shorter lines are easier for people to read. I'm not dyslexic, but it's still sometimes easy for me to lose my place in the midst of reading lengthy texts with longish lines... I can only imagine how crapulent that must be for people with genuine disabilities (even relatively minor ones like dyslexia). I'm fairly sure the 'mobile boxes' you're refferring to are actually DHTML (JS, CSS and HTML) layers which are being positioned relative to the viewport. Interestingly enough, this is a really just a hack for the CSS2 property 'position:fixed', which does the same thing in browsers that support it, but without the annoying bumping around you describe. - Stephen On Tue, 14 Sep 2004 22:44:57 +0100, Joseph Harris [EMAIL PROTECTED] wrote: Will, I saw this after I had sent out my earlier reply. I have Top Style Lite (from a much earlier recommendation by Cheryl) and I agree it is a great help. And thanks Cheryl for the further link. I clicked back to my own (tables) site to check I was talking (and writing) sense and I find that some pages re-adjust to more or less fit a smaller browser window and some don't - or do so to a lesser degree!! My skills (and time to hone them) are by necessity limited, so I'm not too ashamed of that, but my object is a site which offers a good experience however the browser window is. I have taken on board Stephen's further highly informative and helpful remarks. Now I have (since I have noted boxes) understood that there are great similarities in appearance between tables and boxes; and previously that css cleans up the html (the added SE positioning value I had not registered before, though). I will download and see how I get on with Stephen's Firefox advice. The mobile boxes I have seen which I have been describing (inadequately) are not the ones that fill a width, but those that float so that if the browser is scrolled a section (usually with transparency but not always) bounces around at the top ot side or bottom of the window, often obscuring some part of the main text; the movement can be uncomfortable. I am starting to understand this is not what I had thought, but what is that? Thanks again for all the comments, teachers. Joseph (who thought he had a good gripe) The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] Re: CSS boxes etc
Hi Joseph The question you ask is a mighty discussion all to itself! There are so many things to say, from beginner stuff all the way to super-advanced, I just don't know where to start. Best do some reading first I think. Hunt around http://www.alistapart.com for articles on CSS design (but you'll need to look at the earlier stuff to get the theory and starting material - try Flexible Layouts with CSS Positioning http://www.alistapart.com/articles/flexiblelayouts/ to throw you in at the deep end!! Might not mean a lot but the theory might be useful - it's probably an intermediate document). Also there's a great load of stuff on WHY to do it (specifically the articles Better Living Through XHTML http://www.alistapart.com/articles/betterliving/ and To Hell With Bad Browsers http://www.alistapart.com/articles/tohell/) Try the CSS intro at http://www.w3schools.com/css/ And some books off the top of my head: Jeffrey Zeldman's Designing With Web Standards, Eric Meyer's Eric Meyer on CSS and W3 Schools are advertising Designing WIthout Tables Using CSS by Dan Shafer. Just generally Google around I guess for things like tableless design, css positioning and web standards to see what you can dig up. Once you start reading you'll (hopefully) see why we always moan about table-based design in contemporary web development and want to ditch them forever. I can dig out a ton more stuff once you get going. MOU *dreams of a web where table-based design was killed by having Netscape 4.x's corpse rammed down its throat* The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
[wdvltalk] Re: CSS boxes etc
MOU, Thanks for the prompt and thorough response. It will take me a while to fit in your suggestions, though I note your enthusiasm! Might a good starting point for my education be a couple of urls where you consider this is well done and a good advertisement for the technique? Again many thanks, Joseph Hi Joseph The question you ask is a mighty discussion all to itself! There are so many things to say, from beginner stuff all the way to super-advanced, I just don't know where to start. Best do some reading first I think. Hunt around http://www.alistapart.com for articles on CSS design (but you'll need to look at the earlier stuff to get the theory and starting material - try Flexible Layouts with CSS Positioning http://www.alistapart.com/articles/flexiblelayouts/ to throw you in at the deep end!! Might not mean a lot but the theory might be useful - it's probably an intermediate document). Also there's a great load of stuff on WHY to do it (specifically the articles Better Living Through XHTML http://www.alistapart.com/articles/betterliving/ and To Hell With Bad Browsers http://www.alistapart.com/articles/tohell/) Try the CSS intro at http://www.w3schools.com/css/ And some books off the top of my head: Jeffrey Zeldman's Designing With Web Standards, Eric Meyer's Eric Meyer on CSS and W3 Schools are advertising Designing WIthout Tables Using CSS by Dan Shafer. Just generally Google around I guess for things like tableless design, css positioning and web standards to see what you can dig up. Once you start reading you'll (hopefully) see why we always moan about table-based design in contemporary web development and want to ditch them forever. I can dig out a ton more stuff once you get going. MOU *dreams of a web where table-based design was killed by having Netscape 4.x's corpse rammed down its throat* The WDVL Discussion List from WDVL.COM To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] Send Your Posts To: [EMAIL PROTECTED] To set a personal password send an email to [EMAIL PROTECTED] with the words: set WDVLTALK pw=yourpassword in the body of the email. To change subscription settings to the wdvltalk digest version: http://wdvl.internet.com/WDVL/Forum/#sub http://www.wdvl.com ___ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
