gdi seattle intro to html and css - class 4
Post on 01-Nov-2014
401 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
ZINDEXWhen 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
top related