Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Applying CSS and YUI for business applications(?)

Expand Messages
  • John A. Vieth
    I m glad you mentioned hybrid layouts. I definitely endorse them, and I think people that are anti-table Nazis go a little bit overboard. In an ideal world,
    Message 1 of 4 , Apr 4, 2007
      I'm glad you mentioned hybrid layouts.  I definitely endorse them, and I think people that are anti-table Nazis go a little bit overboard.  In an ideal world, no tables would be necessary except for tabular data.  But this is the *REAL* world, and we have things like the CSS box model bug that throws a wrench in the works.  (Thanks Microsoft!)  So, rather than banning tables, I just try to avoid them, and I do a pretty good job, but I don't rule out using a table for multi-column layouts just to create the column skeleton and then using divs everywhere else.  That can solve two problems: (1) the box model bug and other bugs and (2) table cell heights stretch in unison, whereas floating divs don't know the height of their neighboring divs.  Yes you can dynamically fix the height of these using JavaScript, but that's just as bad of a work-around as tables.  So I do use tables for layout occassionally.  (They're good enough for Word and InDesign, so why not web pages?)  But I try to *MINIMIZE* the use of tables, and I don't rely on attributes like cellpadding, cellspacing, border, width, and bgcolor--I use CSS.  The table is just there for the skeleton.

      Just my two cents.

      - John

      ----- Original Message ----
      From: Nick Fitzsimons <nick@...>
      To: ydn-javascript@yahoogroups.com
      Sent: Wednesday, April 4, 2007 5:05:36 AM
      Subject: Re: [ydn-javascript] Applying CSS and YUI for business applications(?)

      On 3 Apr 2007, at 20:35:46, djgroncki wrote:

      > Most all of the examples I find describing
      > the creative and liberal uses of CSS and removing HTML tables for
      > layout purposes (which I agree with as a worthy goal) seem to apply
      > more to web sites that are more "informational" , "brochure-y"
      > (sorry, a made up word),... but not "application- like". The
      > frustrating thing is that I realize that the web and browsers were
      > not initially intended to run "desktoppy" applications but instead
      > offer up pages more in style to brochure-ware. Yet our product
      > managers (who are themselves not at all web designers [nor is anyone
      > in our company]) try to emulate a look in our web solution that
      > mimicks our client-server product as closely as possible.

      I personally have never regarded the techniques I've spent the last
      ten years learning as related solely to brochureware sites: in fact,
      the majority of the work I have done in this field has been
      developing web applications, not web sites. So it can be done.

      > So we have a fixed-height page structure that contains a top-level
      > banner and menu. On the bottom we have a small fixed-height footer
      > area that is supposed to remain at the bottom of the screen at all
      > times (no scrolling, please) that displays our copyright. In
      > between, we have a left column that contains a secondary treeview
      > menu and a right column that contains the main page body. Now if
      > either the menu or the body content exceeds the browser height,
      > those areas scroll (independently) , but not the header or footer.
      > The main body column has two subtypes. One has the entire column
      > filled with the main content. The other has some percentage of the
      > top of the column filled with the main (detail) view of a record and
      > the bottom portion filled with a "history" view showing other
      > records that can be chosen to populate the detail view. Of course,
      > both these are fixed height as well so any overflow to either causes
      > scroll bars to appear in the respective sections independently of
      > anything else.

      Definitely possible to do with CSS. In fact, these requirements could
      be described as FAQs in that field.

      > So... right now this is implemented as a mess of tables within
      > tables and clear gif's like you wouldn't believe. (The funny thing
      > is we actually contracted out to a web design company to produce our
      > specs and the shell of our layout). The header, for instance,
      > contains table nestings at least 3 deep.

      The vast majority of "web design companies" are staffed exclusively
      by people who haven't bothered learning anything that would be out of
      place on antiquated technology like Netscape Navigator 3 :-(

      > My issue is that I see many examples of CSS usage that has removed
      > html tables and greatly simplified the design. However, when you're
      > dealing with a look & feel that is not necessarily free to adapt to
      > what might be "natural" to do on the web, these constraints such as
      > the fixed height issue have proved difficult to find a starting
      > point for basing a layout on CSS.

      As I mention above, these problems have been solved many times, and
      the best solutions have been refined to the point where they can be
      regarded as stable cross-browser. (Usually the main problem is
      getting Internet Explorer to display things correctly.) On the other
      hand (and I'll probably be booed out of the room for this) there's
      not _necessarily_ anything wrong with using a hybrid layout: one
      outer table to provide the basic structure of the page, and
      everything within that done "properly". If it gets you moving, rather
      than you being bogged down at the first hurdle, then go for it. It's
      the kind of nested table layout you describe above that's truly evil.

      > I have seen the YUI grid system and would love to use something such
      > as this to simplify our layout, but I just can't picture it adapting
      > to the constraints we've imposed. Maybe it could, but the examples
      > I've seen don't quite match the behavior. I've also looked at many
      > CSS-focused sites with all kinds of cool ideas, but again just have
      > not found a layout that provides a fit.

      I haven't done much work with YUI Grids, but I would be very
      surprised if they can't support the scenario you describe. It's
      worthy of note that the YUI library (from the conversations I've had
      with those involved in creating and supporting it) isn't really
      supposed to be seen as offering a pre-packaged solution: you have to
      know how to use the technologies in the first place to be able to
      make the best use of YUI's components. One important thing about YUI
      is that it takes care of cross-browser differences for you, but
      you'll still have to be able to code your solution.

      > Can anyone recommend any source of guidelines, tutorials, tips,
      > code, more or less ANYTHING regarding web design with a focus on
      > business applications? Where maybe the CSS (or non-CSS) usage
      > combined with the more modern principles of separation of
      > context/style is followed for more framelike layouts is described?

      As I said above, requirements such as no scrolling of the main
      viewport, independent scrolling of a navigation column, fixed footer
      on the viewport, have all been solved many times before. Apart from
      asking YUI-related questions here, you might find some useful sources
      of information at the CSS Discuss list <http://css-discuss. org/> and,
      in particular, the list wiki contains links to articles and examples
      that should help towards a solution satisfying exactly the
      requirements you list.

      > I am excited that once I get past this initial hurdle I can focus
      > more on the Javascript side and am so impressed with what I've seen
      > in the YUI! It is just finding a place to begin that is proving the
      > challenge.

      As the footer problem is one of the trickier things to get going, and
      will give you an idea about the way to approach this kind of problem,
      have a look at Cameron Adam's "footerStickAlt" : <http://
      www.themaninblue. com/writing/ perspective/ 2005/08/29/ > (linked from
      the CSS Discuss wiki page "FooterInfo" . Cameron has a lot of other
      informative and inspirational articles on his site that should whet
      your appetite for the JS side of things, too.

      > Thanks so much!
      > Dave

      Hope this helps, and good luck! Believe me, it's fun once you get
      past the bits that aren't :-)


      Nick Fitzsimons
      http://www.nickfitz .co.uk/

    Your message has been successfully submitted and would be delivered to recipients shortly.