On Mar 19, 2010, at 7:27 AM, Thadeus Burgess wrote: > CSS does not suck, your just doing it wrong! > > Massimo, I have done this layout that you want many many times in css, > without a framework, ez-css makes this even easier.
The author of ez-css is refreshingly candid, at least by implication, about the suckiness of CSS for layout. One reason all his layouts work as well as they do is that all the columns have the same background (white in his examples). You'll notice if you look at the actual dimensions of his divs on the actual pages on the site that the column divs are not in fact the same height; you just don't see it because they're the same color background. It may be that one's best course is to design around the limitations and idiosyncrasies of CSS; I do that, pretty much. My complaint is that its box model from the beginning was unsuited to what designers normally do, and the result is the proliferation of CSS frameworks that exist mainly to work around its limitations. I *ought* to be able to say: put a full-width header and footer on the page. Give me n columns in any reasonable combination of widths that I care to specify, and make them all the size of the tallest, with single-pixel borders all around. And I ought to be able to say it simply. But I can't. I *can* say that trivially with a table. Tables have their own limitations, and CSS corrects some of them. But it seems to me that CSS shouldn't have made the layouts we can get trivially with tables difficult or impossible with CSS. > > And the way you describe it, ez-css does exactly what you want? Look > at their layout 2. So the blue number 1 (1 comes first physically in > the html) must have a size declared (your menu, 200px). The number 2 > (content) comes second, and flows the full width of the container > object. > > To take a quote from their site that is easy to miss. """The numbers > in the modules and layouts above show the source order (the HTML > flow). Blue numbers correspond to columns for which a width needs to > be set (which are all columns in a module but the last one in the > flow).""" > > -Thadeus > > > > > > On Fri, Mar 19, 2010 at 3:05 AM, Abd Shomad <abd.sho...@gmail.com> wrote: >> Dear Massimo, >> >> This is my first post to web2py :) >> >> I proposed to have a look at Fluid 960 Grid System [1] example. >> >> [1] http://www.designinfluences.com/fluid960gs/ >> >> What you want to accomplish is (almost) doable, except for the "static" part. >> If you resize the browser, the static area (left section menu) will >> not "fluid" nicely like the other area. If we can forget about >> "static" area, and just let Fluid 960 Grid System do the magic, we can >> resize the browser and yet still have a proportional display for each >> area. Please try using the above link and resize your browser, you >> will see that the [Section Menu] will fluid nicely alongside the >> other. >> >> As a web framework, web2py developer will deals with lots of form >> elements, and I think that Fluid 960 Grid System [1] will be a good >> alternative to beautify web2py layout, because it contains almost all >> form elements in a very nice design. >> From the basic tutorial [2], I believe everybody here can master the >> grid system in no more than 5 minutes :) >> >> [2] http://divitodesign.com/css/960-css-framework-learn-basics/ >> >> Using Fluid 960 Grid System, what you want to do can be accomplished >> like below: >> >> <html> >> <div class="container_16"> >> <div class="grid_16">web2py brand, 16 grids = 16 * 60 px</div> >> <div class="clear"></div> >> <div class="grid_4"> >> Left Menu, 4 grids = 4 * 60 px >> </div> >> <div class="grid_6"> >> Column 1, 6 grids = 6 * 60 px >> </div> >> <div class="grid_6"> >> Column 2, 6 grids = 6 * 60 px >> </div> >> <div class="clear"></div> >> <div class="grid_16">web2py footer, 16 grids = 16 * 60 px</div> >> <div class="clear"></div> >> </div> >> </html> >> >> Please check. >> >> Side note: >> Some interesting statistic about "css framework" on delicious: >> ------------------------------------------------------------------------- >> No. Title Bookmark Count >> ------------------------------------------------------------------------- >> 1. 960 Grid System: 17,962 >> 2. Blueprint CSS Framework: 8,690 >> 3. Yahoo! UI Library: Grids CSS: 4,651 >> 4. Fluid 960 Grid System: 3,219 <-- based on 960 Grid System (1) >> 4. BlutTrip: 1,394 >> 5. oocss: 1,265 >> 6. the-golden-grid: 1,259 >> 7. SenCSs: 604 >> 8. ez-css: 445 >> >> >> >> >> Abd Shomad >> >> 2010/3/19 mdipierro <mdipie...@cs.depaul.edu>: >>> I played with ez-css (which I like) but yet it reminded why I used >>> tables. Here is my problem and I am sure it is just me being dumb. Say >>> I want a header, a footer and two columns in between. I want the left >>> column of fixed with (a menu, 200px) and a right column to foll the >>> rest of the space (content). Because of the way it works (and most of >>> these frameworks work the same way), the columns float to right >>> therefore I must specifycontent before the menu. Hence I cannot find a >>> way to make the menu fixed width and the content fill the rest of the >>> space without messing up the alignment of the boxes. Can you do it? >>> >>> Massimo >>> >>> On Mar 18, 11:46 pm, Yarko Tymciurak <resultsinsoftw...@gmail.com> >>> wrote: >>>> On Mar 18, 10:31 pm, mdipierro <mdipie...@cs.depaul.edu> wrote: >>>> >>>>> The problem I see is that it is too simple. >>>>> sizeXofY does not seem to guarantee that all columns have the same >>>>> lenght (ez-css does it). >>>>> I like to have the menu column fixed width and the main column elastic >>>>> and it does not do that (not sure if ez-css does). >>>> >>>> I have installed ez-css to try out / play with... it does do fixed >>>> width + variable width columns: >>>> >>>> In multiple ways, actually (depending on how you nest it); >>>> seehttp://www.ez-css.org/layouts >>>> >>>> See module 2A, 2B, layout 2, layout 3, etc.... >>>> >>>> Each of these use "ez-50", a 50% width element, or "ez-33", a 33% >>>> width element. >>>> >>>> ez-css encourages you to create your own width element if the pre- >>>> defined ones don't "do it" for you - so, create a >>>> ez-500px, and you'd have what you want. >>>> >>>> This seems like a really clean, easily modifiable and "combinable" >>>> package... I'm going to play with it in the next few days to see how >>>> my opinion holds up in use. >>>> >>>> - Yarko >>>> >>>> >>>> >>>>> On Mar 18, 8:59 pm, villas <villa...@gmail.com> wrote: >>>> >>>>>> Ez-css seems like a good enough option, but before making your mind >>>>>> up, have a look at the simplicity of oocss.org/grids_docs.html (with >>>>>> Firebug). Oocss might give more possibilities, but admittedly, is >>>>>> heavier. -- You received this message because you are subscribed to the Google Groups "web2py-users" group. To post to this group, send email to web...@googlegroups.com. To unsubscribe from this group, send email to web2py+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/web2py?hl=en.
