gdi seattle intro to html and css - class 4

BEGINNING HTML AND CSSCLASS 4

Up here

HTML/CSS ~ Girl Develop It ~

WHAT WE'LL LEARN IN THIS SECTIONPositioning elements with CSSStatic positionRelative positionAbsolute positionThe "float" property

POSITIONINGThe placement of elements on your webpage

The default position is called "static"

STATIC POSITIONING FOR INLINEELEMENTS

In normal flow, inline boxes flow from left to right, wrappingto next line when needed.

<img src="images/cookie1.png"/><img src="images/cookie2.png"/><img src="images/cookie3.png"/>...<img src="images/cookie2.png"/><img src="images/cookie3.png"/>

STATIC POSITIONING FOR BLOCKELEMENTS

In normal flow, block boxes flow from top to bottom,making a new line after every box.

GreetingsHelloHi there!

<p>Greetings</p> <p>Hello</p> <p>Hi there!</p>

RELATIVE POSITIONINGTells an element to be displayed in a different placerelative to its static position.

How? By defining where the top, right, bottom, or left edgeshould be.

The elements around it behave like it is still in the staticspot.

RELATIVE POSITIONINGExample:

This sentence "sees" the relatively positioned div as if itwere still in its static position.

This sentence does the same.

.relative{ position: relative; left: 80px; top: 20px; height: 100px; background-color: yellow; }

Hello, hi!

ABSOLUTE POSITIONINGTells an element exactly where you want it placed withina defined container element.

You define the container element by giving it a positionof "relative".

Use the top, bottom, left, or right of the defined containeras coordinates.

Other elements completely ignore the absolutelypositioned element.

ABSOLUTE POSITIONINGExample:

.top{ position: absolute; top: -20px; right: 40px; background-color: yellow }

.bottom{ position: absolute; bottom: -20px; left:60px; background-color: green }

Here's an example of animage with a captionabsolutely positioned overtop of it.

The containing div has aposition of relative, andthe caption has a positionof absolute.

EXAMPLE: ABSOLUTE POSITIONING

Z­INDEXWhen positioned elements overlap others, use "z-index" todefine "who's on top".The element with highest z-index goes on top.

.bottom{ position: absolute; bottom: 10px; left:60px; background-color: yellow; z-index: 1; }

.top{ position: absolute; bottom: 15px; left:60px; background-color: green; z-index: 2; }

LET'S SEE A DEMO!

FLOAT"Floating" an element causes it to move left or right till itbumps against another element or its container.Elements below it will "rise up" to fill the space itvacated.Inline elements and text will make room for the floatedelement by wrapping.

FLOAT: EXAMPLEBelow a <blockquote> is floated to the left, allowing text to

wrap around it on the right

Hi, I'm a yellow boxwith black text.I like to hang out onthe left side.

FLOAT

Inline content wraps around thefloated div. The parent divcontaining the inline content occupies all

the space behind the "float". The inline content moves overto make room.

.float{ float:left; width:200px; background:yellow; }

USING FLOATS TO PLACE ELEMENTS SIDEBY SIDE

If you want two block elements to be side by side:float both elements.give them the same "float" value.give them widths.

CLEARThe "clear" property tells the element not to "rise up"behind the floated div.

"Clear: right" tells the element not to rise up behind aright-floated element.

"Clear: left" tells the element not to rise up behind a left-floated element.

There is also "clear: both" and "clear: none"

hihihi

CLEAR

This element has no clear property.This element has no clear property.

This element has a class of .clear-left

.float{ float:left; width:50px; background:yellow; } .clear-left{ clear:left }

Floated elements and the elements around them oftenbehave 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 sometimesleave its content stuck below.

Despite its shortcomings, the "float" property is usedextensively.

For a good slideshow explaining floats, go to:http://www.slideshare.net/maxdesign/css-floats-explained

LET'S DEMO IT

QUESTIONS?

?Down hereBottomTop

Down hereBottomTop