CSS Layout Tutorials

Discussion in 'CSS' started by CaffinePhil, May 28, 2008.

  1. #1
    Does anyone have any good links/posts to learn more complex layouts in CSS?

    I know how to create a basic layout with 2 or 3 columns but was looking for something with more boxes on the screen with different sizes.
     
    CaffinePhil, May 28, 2008 IP
  2. cadence

    cadence Peon

    Messages:
    2
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Go to smashingmagazine.com and search for "layout". You'll find a lot of resources for advanced CSS techniques, including layout.
     
    cadence, May 28, 2008 IP
  3. fm1234

    fm1234 Peon

    Messages:
    227
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Just mining my bookmarks folder:

    A great collection of tutorials for specific aspects of CSS:

    http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html

    A good box tutorial w/examples:

    http://www.tantek.com/CSS/Examples/boxmodelhack.html

    An incredible collection of effects, including sliding doors, galleries, menus and others:

    http://www.cssplay.co.uk/menu/index.html

    Some very good examples of finished pages that use CSS to achieve visual effects:

    http://meyerweb.com/eric/css/edge/

    Good variety of basic layouts, very very simply rendered:

    http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

    How to create a "frames" type of layout using CSS rather than frames:

    http://www.webreference.com/programming/css_frames/index.html

    Creating gradients with CSS and JavaScript (no images needed)

    http://slayeroffice.com/code/gradient/

    Some wizards for creating curves, gradients and text/font format:

    http://tools.dynamicdrive.com/gradient/
    http://tools.sitepoint.com/spanky/
    http://www.spiffycorners.com/
    http://www.roundedcornr.com/
    http://www.somacon.com/p334.php

    Some wizards for overall layouts:

    http://code.google.com/p/blueprintcss/
    http://developer.yahoo.com/yui/grids/
    http://960.gs/


    Hope these are of some use.


    Frank
     
    fm1234, May 28, 2008 IP