Section C.5. CSS Layout


C.5. CSS Layout

CSS layout is so flexible you could spend a lifetime exploring the possibilities. And some people seem to be doing just that. You can gain from their labors by reading articles, checking out online examples, and experimenting with tools that can do some of the CSS work for you.

C.5.1. Box Model Information

  • Interactive CSS Box Model: www.redmelon.net/tstme/box_model/. Fun, interactive tool for visualizing the box model.

  • On Having Layout: www.satzansatz.de/cssd/onhavinglayout.html. Not for the faint of heart, this highly technical analysis of Internet Explorer explains the main cause (and some solutions) for many of the CSS bugs that plague Windows Internet Explorer 6 and earlier.

  • CSS Grid Calculator: www.gwhite.us/downloads/css_grid_calc.html. A Flash application (now that's ironic) that asks for some basic properties of the layout you wantnumber of columns , gutter width, page width, and so onand generates the CSS to make it happen.

C.5.2. Float Layouts

  • In search of the one true layout: www.positioniseverything.net/articles/onetruelayout/. Interestingif slightly mind-bendingpresentation on how to create a float-based layout that overcomes most of the limitations of floats.

  • Any Order Columns: http://bitesizestandards.com/bites/understanding-any-order-columns. A simple introduction to using negative margins for positioning columns regardless of their position in the HTML source code.

  • CSS Discuss Wiki page on float-based layouts: http:// css-discuss .incutio.com/?page=FloatLayouts. Even more links to float-based layout resources.

C.5.3. Absolute Position Layouts

  • CSS-Discuss Wiki on Absolute Layouts: http://css-discuss.incutio.com/?page=AbsoluteLayouts. Good resources with some helpful background information.

  • Learn CSS Positioning in Ten Steps: www.barelyfitz.com/screencast/html-training/css/positioning/. Quick, hands-on overview of CSS positioning.

  • Making the Absolute, Relative: www.stopdesign.com/articles/absolute/. Guide to using absolute positioning for subtle design effects.

C.5.4. Layout Examples

  • Mollio Templates: www.mollio.org. Great set of free CSS-layout templates. Very nice design.

  • Layout Gala: http://blog.html.it/layoutgala/. Forty different CSS designs, running the gambit from two-column to three-column, fixed-width to liquid. (All have been tested in IE, Firefox, and Safari.)

  • Intensivstation Templates: http://intensivstation.ch/en/templates/. Cool templates, weird domain name .

C.5.5. Miscellaneous Layout Resources

  • One clean HTML markup, many layouts: http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp. Great blog post that takes a single HTML page and demonstrates eight different ways to lay it out with just CSS.

  • Variable fixed width layout: www.clagnut.com/blog/1663/. Short blog post about a technique for adjusting the number of columns on a page, based on the width of the browser window.

  • 3-Column Layout Index: http://css-discuss.incutio.com/?page=ThreeColumnLayouts. A nearly exhaustive (or at least exhausting) list of different 3-column layouts.

  • Site in an Hour : http://leftjustified.net/site-in-an-hour/. Slide presentation on how to build a CSS Web site.



CSS[c] The Missing Manual
Dreamweaver CS3: The Missing Manual
ISBN: 0596510438
EAN: 2147483647
Year: 2007
Pages: 154

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net