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

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

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, CSS-P Styles Positioning by Professor Al Fichera

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

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, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera

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

Z-Indexed Images Z-index as 1, 2, 3 Z-index as 3, 2, 1 Z-index as 2, 3, 1 September 22, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera

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

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, CSS-P Styles Positioning by Professor Al Fichera

#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, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera

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

Relative Positioning September 22, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera

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

Static Positioning September 22, CSS-P Styles Positioning by Professor Al Fichera

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

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, CSS-P Styles Positioning by Professor Al Fichera

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

All Styles Together September 22, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera

Example Newsletter Created with the Absolute Positioning. September 22, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera

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, CSS-P Styles Positioning by Professor Al Fichera