1. CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and CIS 137

2. Introduction CSS Positioning (CSS-P) is more accurate than either graphics or tables. The results are displayed much faster. September 22, 2010 2 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

3. Overview CSS-P allows us to position elements on the screen either: Exactly where we want them or In relation to other elements on the screen. September 22, 2010 3 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

4. Left & Top Properties The left and top properties are very straightforward: h3 {position: absolute; left:100px; top:20px} September 22, 2010 4 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

5. Left & Top Properties L eft defines the amount of space between the element and the left edge of the browser window. Top defines the space between the element and the top of the window. September 22, 2010 5 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

6. Height Property The height attribute works just like width, only in the vertical direction: div {position: absolute; left:200px; top:80px; height:150px } September 22, 2010 6 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

7. Width Property You can control how far the text flows but only on absolute positions. How wide the box that contains the element should be. September 22, 2010 7 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

8. Layering Text and Images The best way to overlap elements on a Web page. It's not a negative margin or small line-height. It's a combination of position and... z-index September 22, 2010 8 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

9. Using Z-Index When you position multiple elements and they overlap, use z-index to specify which one should appear on top. h2 { position: relative; left:10px; top:0px; z-index:10} h1 { position: relative; left:33px; top:-45px; z-index:1} September 22, 2010 9 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

10. Z-Index Layering Watch these CSS rules play out (I've colored the text green so you can see the difference): LAYERING BY z-index September 22, 2010 10 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

11. Why Does It Work? Since the text has the higher z-index value, it appears on top of the text. Use plain integers for the values. The z-index property works for elements that are positioned absolutely or relatively. September 22, 2010 11 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

12. Z-Indexed Images You can also give images a Z-Index. Consider wrapping the tag in a or tag, and then apply the property to the or if you give them a z-index value. Remember, div tags once closed sets you on the next line. Span tags do not. September 22, 2010 12 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

13. Z-Indexed Images These images were placed without z-indexes. They will wrap to any window configuration. September 22, 2010 13 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

14. Z-Indexed Images Z-index as 1, 2, 3 Z-index as 3, 2, 1 Z-index as 2, 3, 1 September 22, 2010 14 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

15. Positioning Properties CSS-P is best associated with a CLASS or ID, that way they can be applied as needed instead of associated permanently with a particular tag. September 22, 2010 15 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

16. Positioning Type An element can have one of three (3) different position values. Relative Static Absolute (everyone's favorite) September 22, 2010 16 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

17. Relative Positioning Relative positioning flows the element Inline, but allows you to move the element around within the element's natural position on the screen. Relative elements get placed on the screen in the order written, so items can be placed before it or after it. September 22, 2010 17 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

18. #pos1 ID Selector in Use You may wish to add an inline style to the div on the page. #pos1 {position: relative; left:80px; top:50px;} Place any RELATIVE text you want here. September 22, 2010 18 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

19. Relative Style Block Style Block code used in the HEAD for the Boxes example shown. #pos1 {position: relative; left:80px; top:50px;} #pos2 {position: relative; left:160px; top:100px;} #pos3 {position: relative; left:240px; top:150px;} September 22, 2010 19 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

20. Inline DIV ID tag Inline code used in the body. Place any STATIC text you want here... September 22, 2010 20 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

21. Relative Positioning September 22, 2010 21 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

22. Static Positioning Static positioning flows your content Inline, but the position of element can't be touched. (Example, Pink Boxes.) This is the normal default style. September 22, 2010 22 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

23. Static Style Block Style Block code used in the HEAD for the Boxes example shown. #pos4 {position: static; left:80px; top:50px;} #pos5 {position: static; left:160px; top:100px;} #pos6 {position: static; left:240px; top:150px ;} September 22, 2010 23 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

24. Inline DIV ID tag Inline code used in the BODY. Place any STATIC text you want here... September 22, 2010 24 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

25. Static Positioning September 22, 2010 25 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

26. Absolute Positioning An Absolute element is placed independently of other elements on the screen in a specific position in the window. September 22, 2010 26 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

27. Absolute Style Block Style Block code used in the HEAD for the Boxes example shown. #pos7 {position: absolute; left:80px; top:50px;} #pos8 {position: absolute; left:160px; top:100px;} #pos9 {position: absolute; left:240px; top:150px;} September 22, 2010 27 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

28. Inline DIV ID Inline code used in the BODY. Place any ABSOLUTE text you want here. September 22, 2010 28 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

29. All Styles Together September 22, 2010 29 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

30. Newsletter A special Newsletter format used these Absolute positions in the Style Block. #pos1 {position: absolute; left:1em; top:360px;} #pos2 {position: absolute; left:1em; top:450px;} #pos3 {position: absolute; left:23em; top:10px;} September 22, 2010 30 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

31. Newsletter The SPAN tag houses the ID tag and is used for paragraph placement, it adds more information including width and padding, etc. September 22, 2010 31 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

32. Example Newsletter Created with the Absolute Positioning. September 22, 2010 32 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

33. Floating Elements Floating behavior around positioned elements can change dependent upon if they have been fixed absolute. If position: absolute; is set and the top and left margins or the width has been set, the text in the floating element will not wrap around it. If position: absolute; is set but the margins and width are not set, other elements will wrap around it. September 22, 2010 33 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com

34. Floating Elements Margins are not set in this example. p.flt {float: right; font-weight: bold; font-size: 12pt; font-family: arial; color: navy; text-align: justify; width:600px; } Lorem ipsum … September 22, 2010 34 CSS-P Styles Positioning by Professor Al Fichera http://profal2.com