1. Today’s objectives  Announcements  Positioning  Measurement units

2. First-child ul :first-child  Space between ul and :first-child, “locate first child of tag.” ul:first-child  no space, is much different:  Selects all tags that are a first child of another tag.

3. First-child #quickSummary p:first-child { font-weight: bold; color: #777; background-color:#ccc; }  Selects first child of #quickSummary that is a

4. First-child #quickSummary :first-child { font-weight: bold; color: #777; background-color:#ccc; } Selects all first children in #quickSummary Paragraph1 Paragraph 2 hello head 2 head 2 a head 2 B

5. First-child.quickSummary:first-child { font-weight: bold; color: #777; background-color:#ccc; } Selects all.quickSummary that are a first child of some tag

6. LAYOUTS – LAST TIME

7. Layouts  Fixed Width - regardless of the browser window’s width, the page content’s width remains the same.  Liquid. Design adjusts to fit the browser’s width— whatever it may be.  Elastic. A fixed width with type size flexibility. Define page’s width using em values. An em changes size when the browser’s font size changes, page width is based on the browser’s base font size.

8. </div

9. Layouts

10. 1. BANNER 2. NAVIGATION 3. CONTENT 1.BANNER 2 3.CONTENT FLOAT LEFT L Normal Flow

11. 1. BANNER 2. NAVIGATION 3. CONTENT 1.BANNER 2 3.CONTENT FLOAT RIGHT R Normal Flow

12. 1. BANNER 2. NAVIGATION 4. CONTENT 1.BANNER 3 4.CONTENT FLOAT Left & RIGHT R 3. EVENTS 2 L Normal Flow

13. 1. BANNER 2. NAVIGATION 3. CONTENT 1.BANNER 4 3.CONTENT FLOAT Left & RIGHT R 4. EVENTS 2 LL Normal Flow

14. 2. COL WRAPPER 1. BANNER 4. NAVIGATION 2 3. CONTENT 1.BANNER 5 3.CONTENT FLOAT Left & RIGHT R 5. EVENTS 4 LR 2 Col wrapper 2. COL WRAPPER L Normal Flow

15. 2. COL WRAPPER 2. BANNER 5. NAVIGATION 2 3. CONTENT 2.BANNER 5 3.CONTENT FLOAT Negative margin R 6. EVENTS 4 L 1. WRAPPER L Normal Flow

16. Wrapper banner Nav Content Events Site Information Copyright

17. POSITIONING

18. Positioning  CSS position property lets you control how and where a web browser displays particular elements.  CSS offers four types of positioning:  Absolute  Relative  Fixed  Static

19. Absolute Positioning  Absolute : determine element’s location by specifying a left, right, top, or bottom position in pixels, ems, or percentages.  Move out of the normal flow of the page as determined by the HTML.

20. Detached from document flow. Elements fill-in the space left by an absolutely positioned element. Float and absolute or fixed positioning can’t work together on the same element. Absolute Positioning

21.  Absolutely positioned element is placed relative to the boundaries of its closest ancestor.  When you create element (DIV) with absolute positioning,  any absolutely positioned elements inside that element are positioned relative to it’s top, bottom, left, and right edges.

22. Relative positioning  Relative. Element placed relative to its current position in the normal document flow.  Other elements do NOT fill in the space left in the document flow.

23. Relative positioning  A benefit of relative positioning is to set a new point of reference for absolutely positioned elements that are nested inside it.  Relative positioning creates a positioning context for nested tags.

24. Relative positioning Example  By setting the position of the tag to relative, any absolute positioning you apply to the tag inside the tag is relative to the four edges of the tag, not the browser window.

25. Relative positioning  Here’s what the CSS looks like: h1 { position: relative; } h1 img { position: absolute; top: 0; right: 55px; }

26. Positioning Rules  A tag is positioned relative to the browser window if it has an absolute position and it’s not inside any other tag that has absolute, relative, or fixed positioning applied to it.  A tag is positioned relative to the edges of another element if it’s inside another tag with absolute, relative, or fixed positioning.

27. Fixed Positioning  Fixed. Element is locked into place on the screen.  When scrolling, fixed elements remain onscreen.  Useful for creating a fixed sidebar.

28. Static Positioning  Static. Normal positioning method – what an element appears in the normal document flow.

29. Setting Positioning Values  Display area of a web browser window has top, bottom, left, and right edges.  Each of the four edges has a corresponding CSS property: top, bottom, left, and right.  Don’t need to specify values for all four edges.  Two are usually enough to place an item on the page.

30. Setting Positioning Values  Any of the valid CSS measurements—pixels, ems, percentages, etc. can be used.  You can also use negative values for positioning.

31. Setting Positioning Values  Position element from the top and left edges of window: #banner {position: absolute; left: 100px; top: 50px; width: 760px;}

32. Setting Positioning Values  Position the banner 100 pixels from the right of the window #banner {position: absolute; right: 100px; top: 50px; width: 760px;}