fss and css layout question
Michael S Elledge
elledge at msu.edu
Tue Feb 17 18:25:29 UTC 2009
Ahh...thanks for the clarification. I didn't think it would be
overlooked, but better to be safe than sorry.
Mike
Jacob Farber wrote:
> In this case, I knew before hand the site is locked to 950px wide, so
> that severely limits the usefulness of flexible width content, but
> normally this would be ideal.
>
> On Tue, Feb 17, 2009 at 1:03 PM, Michael S Elledge <elledge at msu.edu
> <mailto:elledge at msu.edu>> wrote:
>
> You may also want to use percentages rather than pixels to keep
> your layout liquid...
>
> Mike
>
> Jacob Farber wrote:
>
> If your looking for 7 containers, then I would use the
> technique you mentioned in #2, and overwrite the width to
> 135px instead of keeping the 150/100 px width.
> Jacob
>
> On Tue, Feb 17, 2009 at 10:39 AM, Laurel A. Williams
> <laurel.williams at utoronto.ca
> <mailto:laurel.williams at utoronto.ca>
> <mailto:laurel.williams at utoronto.ca
> <mailto:laurel.williams at utoronto.ca>>> wrote:
>
> Hi Jacob,
>
> Actually, the original examples (sent Friday) both did have
> 7 columns.
>
> What I really wanted was 7 columns of approximately equal
> widths
> in a 950px wide container.
>
> Since the flex columns only go up to 5 in the fss, I tried a
> grouping of 4 columns and a grouping of 3 columns - as per your
> suggestion. You can see an example of this at:
> http://fluidproject.org/dev/index.php/partners in the Fluid
> Academic partner institutions section.
>
> I used the second style on:
> http://fluidproject.org/dev/index.php/collaborate to
> position the
> images and text at the bottom of the page. I used 100 and 150
> width containers alternately because 100 was way too small (700
> total width ended up too narrow) and 150 was too big (total
> would
> have been 1050px - larger than 950px container).
>
> So - would the more simple technique be to write my own fss
> classes for 7 columns?
>
> Laurel
>
> Jacob Farber wrote:
>
> The most critical mechanism in the fss files for laying
> something out is just to use one of the many
> "fl-container..."
> or "fl-col..." class names, so that we can easily linearize
> it. It's not as critical how you use them, just that
> you do.
> That being said.....
>
> Occam's razor is king when it comes to laying out css +
> markup. It is very important to map out the simplest
> solution
> to avoid big cross-browser headaches, bloat, css
> errors, and
> performance.
>
> Truth is, the example above looks incomplete and the two
> techniques do different things (#1 is 7 containers, #2 is 5
> containers.). If your looking for the difference between
> columns and containers, then the answer lies in what your
> laying out and how it should behave. Columns are great for
> flexible consistent width containers. Containers are more
> general purpose. Many times, the two are interchangeable.
>
> In this example, if you just want to lay things out side by
> side of alternating widths, then you have to go with
> technique
> #2 since columns are even and this doesn't look like that's
> what you want.
> Sometimes it's good to have a strong idea of how the
> grid for
> a site should behave: This article on grids might help
>
> <http://www.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/>
>
> I hope that sheds some light!
> Jacob
>
>
>
>
> -- Jacob Farber
> University of Toronto - ATRC
> Tel: (416) 946-3002
> www.fluidproject.org <http://www.fluidproject.org>
> <http://www.fluidproject.org>
> <http://www.fluidproject.org>
>
>
> -- Laurel A. Williams
>
> Adaptive Technology Resource Centre
> University of Toronto
>
>
>
>
> --
> Jacob Farber
> University of Toronto - ATRC
> Tel: (416) 946-3002
> www.fluidproject.org <http://www.fluidproject.org>
> <http://www.fluidproject.org>
> ------------------------------------------------------------------------
>
>
>
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> <mailto:fluid-work at fluidproject.org>
> To unsubscribe, change settings or access archives,
> see http://fluidproject.org/mailman/listinfo/fluid-work
>
>
>
>
>
> --
> Jacob Farber
> University of Toronto - ATRC
> Tel: (416) 946-3002
> www.fluidproject.org <http://www.fluidproject.org>
More information about the fluid-work
mailing list