GDI Seattle Intro to HTML and CSS - Class 4
2 likes494 views
This document discusses various CSS positioning techniques including static, relative, absolute, and float positioning. Static positioning is the default and positions elements in normal flow from top to bottom. Relative positioning offsets an element from its static position. Absolute positioning positions elements within a relatively positioned container using coordinates. Float positioning moves elements left or right until they bump against other elements or containers, allowing text to wrap around them. The document provides examples and explanations of how to implement each technique.
More Related Content
Viewers also liked (10)
Similar to GDI Seattle Intro to HTML and CSS - Class 4 (10)
More from Heather Rock (7)
Recently uploaded (20)
GDI Seattle Intro to HTML and CSS - Class 4
- 1. Up here BEGINNING HTML AND CSS CLASS 4 HTML/CSS ~ Girl Develop It ~
- 2. WHAT WE'LL LEARN IN THIS SECTION Positioning elements with CSS Static position Relative position Absolute position The "float" property
- 3. POSITIONING The placement of elements on your webpage The default position is called "static"
- 4. STATIC POSITIONING FOR INLINE ELEMENTS In normal flow, inline boxes flow from left to right, wrapping to next line when needed. <m sc"mgscoi1pg/ ig r=iae/oke.n"> <m sc"mgscoi2pg/ ig r=iae/oke.n"> <m sc"mgscoi3pg/ ig r=iae/oke.n"> .. . <m sc"mgscoi2pg/ ig r=iae/oke.n"> <m sc"mgscoi3pg/ ig r=iae/oke.n">
- 5. STATIC POSITIONING FOR BLOCK ELEMENTS In normal flow, block boxes flow from top to bottom, making a new line after every box. <>reig<p pGetns/> <>el<p pHlo/> <>itee<p pH hr!/> Greetings Hello Hi there!
- 6. RELATIVE POSITIONING Tells an element to be displayed in a different place relative to its static position. How? By defining where the top, right, bottom, or left edge should be. The elements around it behave like it is still in the static spot.
- 7. RELATIVE POSITIONING Example: .eaie rltv{ psto:rltv; oiin eaie lf:8p; et 0x tp 2p; o: 0x hih:10x egt 0p; bcgon-oo:ylo; akrudclr elw } This sentence "sees" the relatively positioned div as if it were still in its static position. Hello, hi! This sentence does the same.
- 8. ABSOLUTE POSITIONING Tells an element exactly where you want it placed within a defined container element. You define the container element by giving it a position of "relative". Use the top, bottom, left, or right of the defined container as coordinates. Other elements completely ignore the absolutely positioned element.
- 9. ABSOLUTE POSITIONING Example: .o{ tp psto:aslt; oiin boue tp -0x o: 2p; rgt 4p; ih: 0x bcgon-oo:ylo akrudclr elw } .otm bto{ psto:aslt; oiin boue bto:-0x otm 2p; lf:0x et6p; bcgon-oo:gen akrudclr re }
- 10. EXAMPLE: ABSOLUTE POSITIONING Here's an example of an image with a caption absolutely positioned over top of it. The containing div has a position of relative, and the caption has a position of absolute.
- 11. ZINDEX When positioned elements overlap others, use "z-index" to define "who's on top". The element with highest z-index goes on top. .otm bto{ psto:aslt; oiin boue bto:1p; otm 0x lf:0x et6p; bcgon-oo:ylo; akrudclr elw zidx 1 -ne: ; } .o{ tp psto:aslt; oiin boue bto:1p; otm 5x lf:0x et6p; bcgon-oo:gen akrudclr re; zidx 2 -ne: ; }
- 12. LET'S SEE A DEMO!
- 13. FLOAT "Floating" an element causes it to move left or right till it bumps against another element or its container. Elements below it will "rise up" to fill the space it vacated. Inline elements and text will make room for the floated element by wrapping.
- 14. FLOAT: EXAMPLE Below a <blockquote> is floated to the left, allowing text to wrap around it on the right
- 15. FLOAT .la{ fot fotlf; la:et wdh20x it:0p; bcgon:elw akrudylo; } Inline content wraps around the floated div. The parent div containing the inline content occupies all the space behind the "float". The inline content moves over to make room. Hi, I'm a yellow box with black text. I like to hang out on the left side.
- 16. USING FLOATS TO PLACE ELEMENTS SIDE BY SIDE If you want two block elements to be side by side: float both elements. give them the same "float" value. give them widths.
- 17. CLEAR The "clear" property tells the element not to "rise up" behind the floated div. "Clear: right" tells the element not to rise up behind a right-floated element. "Clear: left" tells the element not to rise up behind a leftfloated element. There is also "clear: both" and "clear: none"
- 18. CLEAR .la{ fot fotlf; la:et wdh5p; it:0x bcgon:elw akrudylo; } .la-et cerlf{ cerlf la:et } hi This element has no clear property. hi This element has no clear property. hi This element has a class of .clear-left
- 19. Floated elements and the elements around them often behave unexpectedly! Floated elements get "hung up" underneath others. If all the contents of a div are floated, the div collapses. A div that "rises up" below a floated div will sometimes leave its content stuck below.
- 20. Despite its shortcomings, the "float" property is used extensively. For a good slideshow explaining floats, go to: http://www.slideshare.net/maxdesign/css-floats-explained
- 21. LET'S DEMO IT
- 22. QUESTIONS? ?