1. WEB DESIGN Multimedia and Web

2. Today’s Objectives  Quick review selector types  Layout and positioning

3. SELECTORS

4. Types of selectors  Tag or HTML Selectors: Page-Wide Styling p {color: #333333;}  Class Selectors: Pinpoint Control.myclass {color: #333333;}  ID Selectors: Specific Page Element #main-nav {color: #333333;}  Group Selectors h1, h2, h3, p, div {color: #333333;}  Pseudo class a:link {}  Pseudo elements p:first-letter {}  Attribute a[href^="http://"] { color : yellow; }

5. Pseudo-Classes  a:link| a:link { color : #EFEFEF; }  a:visited | a:visited { color : #CCCCCC; }  a:hover| a:hover { color : # F33333; }  a:active | a:active {color : #B2F511;}  Hover: (these will also work)  h1:hover { color : #FFFFFF; } .hiLite:hover { color : #FFFFFF; }

6. Structural pseudo-classes Beginning with second item select every 4 th items Source: McFarland, D.S. (2009), CSS: The missing manual, O’Reilly.

7. Pseudo-elements  :first-letter – p:first-letter {font-size : 2em; font-weight: bold; color: red;}  :first-line – p:first-line {font-size : 2em; font-weight: bold; color: red;} L orem ipsum dolor sit amet, consectetuer adipiscing elit. Duis non ipsum quis sapien rhoncus vehicula.

8. Attribute Selectors | ^ and $ Format external links: a[href^="http://"] { color : yellow; } ^ - begins with Any link that begins with “http://” is yellow a[href$=".zip"] { color : green; } $ - Ends with Any link URL that ends with “zip” is green.

9. Attribute Selectors | * img[src*="Ire"] {border : solid 5px green;}

10. LAYOUTS | FLOATS |POSITIONING

11. HTML Tree My Web Page Main Topic A web page about the days of the week, specifically Tuesday. Remember the document flow/tree (DOM)

12. HTML Tree Hierarchy Ancestor to all tags Ancestor to h1, p, span Siblings Child of Descendent of Descendent of and

13. HTML Tree My Web Page Main Topic A web page about the days of the week, specifically Tuesday.

14. HTML Tree My Web Page Main Topic A web page about the days of the week, specifically Tuesday. Normal Document Flow

15. HTML Tree My Web Page Main Topic A web page about the days of the week, specifically Tuesday. Elements (tags) create boxes - stack on top of each other

16. NORMAL DOCUMENT FLOW

17. HEADER id=“banner” NAV id=“main-nav” DIV id=“main-content” FOOTER id=“site-info” Div id=“wrapper” Normal Flow

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

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

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

21. HEADER id = banner NAV id = main-nav DIV id = main-content FOOTER id = site-info DIV id = wrapper FLOAT LEFT

22. HEADER id = banner NAV id = main-nav DIV id = main-content FOOTER id = site-info DIV id = wrapper FLOAT LEFT #wrapper,#banner,#main-nav, #main-content, #site-info {padding:10px;} #wrapper {border:1px solid #0C0;background-color:#F90;} #banner {border:1px solid #0C0; background-color:#099;} #main-nav {border:1px solid #099; background-color:#069; width:200px; float:left; } #main-content {border:1px solid #03F; background-color:#09C; margin-left:222px; } #site-info {border:1px solid #933; background-color:#CC9;}

23. HEADER id = banner NAV id = main-nav DIV id = main-content FOOTER id = site-info DIV id = wrapper FLOAT LEFT #wrapper,#banner,#main-nav, #main-content, #site-info {padding:10px;} #wrapper {border:1px solid #0C0;background-color:#F90;} #banner {border:1px solid #0C0; background-color:#099;} #main-nav {border:1px solid #099; background-color:#069; width:200px; float:left; } #main-content {border:1px solid #03F; background-color:#09C; margin-left:222px; } #site-info {border:1px solid #933; background-color:#CC9;} With positioning, can place boxes anywhere on screen.

24. POSITIONING

25. 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

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

27. Detached from document flow. Other 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

28. 1. BANNER 2. NAVIGATION 3. CONTENT 4. EVENTS 1. BANNER position: absolute; left:10px; top:100px 3. CONTENT 4. EVENTS Content below absolute positioned element moves up to fill space. Absolute Positioning Normal doc flow.

29. Absolute Positioning  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.

30. Browser no positioning - 150px - position: absolute; left:150px; Create element (DIV) with absolute positioning, any absolute positioned elements inside that element are positioned relative to it’s top, bottom, left, and right edges.

31. Browser no positioning - 150px - position: absolute; left:150px; Content below fills vacated space.

32. Browser absolute or relative position: absolute; left:150px; - 150px -

33. 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. Left:250px This space does not get filled in.

34. 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 elements (tags).

35. Relative positioning Example  Set 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.

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

37. 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 (child) another tag with absolute, relative, or fixed positioning.

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

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

40. 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.

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

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

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

44. Z-index  This stacking of elements takes place on what’s called the z-index..logo1 { position: absolute; z-index: 0; left: 810px; top: 10px; }