Play as Webslides

XHTML Teacher's List: C111-09: CSS Layout

Readings

Assigned weekly Readings.
Beginning CSS for Web Development

www.diigo.com/...1c66f23b01938a19f529925c7bcce9 - Preview

on 2009-07-07
- Read Chapter 3: CSS Building Blocks and Chapter 10: Layout Basics. Skim through Chapters 11 and 12; you will be looking for ideas on how you will lay out your web site. You can use any CSS template example from the book or other resources to get you started.
22: Generic containers—the div and span elements - Opera Developer Community

dev.opera.com/...ic-containers-8212-the-div-and - Preview

div span containers layout css on 2009-07-06 and saved by 2 people
36: CSS static and relative positioning - Opera Developer Community

dev.opera.com/...tatic-and-relative-positioning - Preview

positioning layout on 2009-07-20 and saved by 3 people
37: CSS absolute and fixed positioning - Opera Developer Community

dev.opera.com/...absolute-and-fixed-positioning - Preview

layout positioning on 2009-07-20 and saved by 2 people
Videos
CSS for Designers

www.diigo.com/...0bb2a913a729e2cc08235fe80c3f3f - Preview

on 2009-07-07
- Watch all movies in a chapter unless otherwise indicated.
  6. Working with Color and Contrast, first three movies only (intro, color values and applying color)
  9. CSS Floats
  10. CSS Positioning
  Link
Tutorials
6 Keys to Understanding Modern CSS-based Layouts

Links to popular tutorials to help you grasp CSS layout basics. There is a lot of material here, don't be afraid if you don't understand everything at once.

snook.ca/...s_to_understanding_css_layouts - Preview

layout box model floats pixy sprite image replacement on 2009-07-24 and saved by 90 people
Floatutorial: Step by step CSS float tutorial

Some step by step instructions to get you floating without fail; an essential skill for effective layout with CSS.

css.maxdesign.com.au/...index.htm - Preview

tutorial float layout css on 2009-07-06 and saved by 164 people
Resources
Page Design | Web Style Guide 3

webstyleguide.com/...index.html - Preview

page design best practices style guide on 2009-07-06 and saved by 2 people
Interactive CSS Box Model Demo

redmelon.net/box_model - Preview

on 2009-07-06 and saved by 11 people
9: Building up a site wireframe - Opera Developer Community

This is a little advanced. Presented for reference only.

dev.opera.com/...9-building-up-a-site-wireframe - Preview

wireframe planning on 2009-06-21 and saved by 4 people
10: Colour schemes and design mockups - Opera Developer Community

Advanced. For reference only.

dev.opera.com/...our-schemes-and-design-mockups - Preview

planning design best practices fonts typography alignment on 2009-06-21 and saved by 4 people
Simple Clearing of Floats

www.sitepoint.com/...simple-clearing-of-floats - Preview

floats positioning layout on 2009-07-16 and saved by 43 people

1 - 16 of 16

Showing 20▼ items per page

List Comments (0)

List Info

XHTML Teacher

16 items | 13 visits

Updated on 2009-07-24
Created on 2009-06-05

Category: Computers & Internet

css layout box model floats

URL:

XHTML Teacher's List: C111-09: CSS Layout

Beginning CSS for Web Development

22: Generic containers—the div and span elements - Opera Developer Community

36: CSS static and relative positioning - Opera Developer Community

37: CSS absolute and fixed positioning - Opera Developer Community

CSS for Designers

6. Working with Color and Contrast, first three movies only (intro, color values and applying color)

9. CSS Floats

10. CSS Positioning

6 Keys to Understanding Modern CSS-based Layouts

Floatutorial: Step by step CSS float tutorial

Page Design | Web Style Guide 3

Interactive CSS Box Model Demo

9: Building up a site wireframe - Opera Developer Community

10: Colour schemes and design mockups - Opera Developer Community

Simple Clearing of Floats

List Info

Sponsored Links

XHTML Teacher's Public Lists (33)