Kapi

1

• Kapiolani Community College
• Art 128 Interface Programming 1
• In-class Presentation
• Week 4B

2
Quiz

• Get ready for todays quiz.

3
Calendar
4
Example

• Valuable resources for CSS bug fixing
• A List Apart (Eric Meyer, Jeffrey Zeldman, and
  others)
• http//www.alistapart.com/
• Stop Design (Douglas Bowman)
• http//www.stopdesign.com
• Glish.com (Eric Costello)
• http//glish.com/css/

5
Todays Agenda

• Today is a working day
• Quick review of last class
• Preserving Normal Flow
• Using a combination of static, relative, and very
  few absolute positioned elements.
• Quick lesson on absolute positioning
• Today we are going to break normal flow using all
  absolute positioning.
• This is not a recommended practice!
• Instead this is an exercise for understanding the
  power of absolute positioning.
• One-on-One meetings
• I will walk around and check in with everyone and
  answer questions

6
Review (updated from last class)

• When to preserve normal flow (use Static/Relative
  positioning)?
• You should try to preserve normal flow most of
  the time!!!
• By default all ltdivgts are set to static!!!
• Most ltdivgt tags, especially
• Container
• Header
• Main body/content sections
• Footer
• We often use a relative positioning value on a
  parent ltdivgt when we need to absolutely position
  a nested div according to its immediate parent.
  In this case the parent div would need to be set
  to relative.

• When to break normal flow (use Absolute
  positioning)?
• Sparingly!!!
• Only with designs with a fixed height!!!
• Only when a ltdivgt needs to be placed at an exact
  location
• A common use is to use absolute positioning with
  nested ltdivgts, or ltdivgts that are inside of
  another. For example the location of a logo
  inside of a header. The header will have a fixed
  height, thus enabling the logo to be positioned
  inside of it using absolute positioning.

7
Review
HEADER
LINKS LINKS
LOGO
NAV

• SUB NAV
• LINK
• LINK
• LINK
• LINK
• LINK

SECTION 1 Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis ultricies
nulla. Donec ipsum lectus, tristique non,
interdum sit amet, placerat vel, sem. Lorem
ipsum dolor sit amet, consectetuer adipiscing
elit. Duis ultricies nulla. Donec ipsum lectus,
tristique non, interdum sit amet, placerat vel,
sem.
SECTION 2 Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis ultricies
nulla. Donec ipsum lectus, tristique non,
interdum sit amet, placerat vel, sem.
FOOTER
8
Review
HEADER
LINKS LINKS
LOGO
Body
NAV

• SUB NAV
• LINK
• LINK
• LINK
• LINK
• LINK

SECTION 1 Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis ultricies
nulla. Donec ipsum lectus, tristique non,
interdum sit amet, placerat vel, sem. Lorem
ipsum dolor sit amet, consectetuer adipiscing
elit. Duis ultricies nulla. Donec ipsum lectus,
tristique non, interdum sit amet, placerat vel,
sem.
Header
Container
SECTION 2 Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis ultricies
nulla. Donec ipsum lectus, tristique non,
interdum sit amet, placerat vel, sem.
FOOTER
9
Review
Absolute (within header)
HEADER
LINKS LINKS
LOGO
Body
NAV

• SUB NAV
• LINK
• LINK
• LINK
• LINK
• LINK

SECTION 1 Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis ultricies
nulla. Donec ipsum lectus, tristique non,
interdum sit amet, placerat vel, sem. Lorem
ipsum dolor sit amet, consectetuer adipiscing
elit. Duis ultricies nulla. Donec ipsum lectus,
tristique non, interdum sit amet, placerat vel,
sem.
Header Relative (parent) Fixed height!!!
Container
SECTION 2 Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis ultricies
nulla. Donec ipsum lectus, tristique non,
interdum sit amet, placerat vel, sem.
FOOTER
10
Review
Absolute (within header)
HEADER
LINKS LINKS
LOGO
Body
NAV

• SUB NAV
• LINK
• LINK
• LINK
• LINK
• LINK

SECTION 1 Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis ultricies
nulla. Donec ipsum lectus, tristique non,
interdum sit amet, placerat vel, sem. Lorem
ipsum dolor sit amet, consectetuer adipiscing
elit. Duis ultricies nulla. Donec ipsum lectus,
tristique non, interdum sit amet, placerat vel,
sem.
Header Relative (parent) Fixed height!!!
Container
Stacked ltdivgts (static) (normal flow)
SECTION 2 Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis ultricies
nulla. Donec ipsum lectus, tristique non,
interdum sit amet, placerat vel, sem.
Floated Left
FOOTER
11
Review

• Floats
• How to set up a testing document to learn more
  about floats.

12
Todays Lesson
HEADER
LINKS LINKS
LOGO
Body
NAV
400px

• SUB NAV
• LINK
• LINK
• LINK
• LINK
• LINK

SECTION 1 Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Container Fixed height!!!
SECTION 2 Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
FOOTER
13
Assignment
due 02.07.07

• 2 pages
• A long scrolling page layout that uses minimal
  absolute positioning and preserves normal flow.
• Uses absolute positioning only for the logo and
  headerlinks within a header with a fixed height.
• Uses floats for the main two sections/column
• A short/fixed height page that breaks normal
  flow.
• Uses all absolute positioning
• Note this layout is not flexible!! The location
  of all major ltdivgt elements are fixed! (this is
  very bad for pages that will be updated
  frequently with content of varying sizes and
  length.)

14
(No Transcript)