GDI Seattle Intro to HTML and CSS - Class 4

Up here

BEGINNING HTML AND CSS
CLASS 4

HTML/CSS ~ Girl Develop It ~

WHAT WE'LL LEARN IN THIS SECTION
Positioning elements with CSS
Static position
Relative position
Absolute position
The "float" property

POSITIONING
The placement of elements on your webpage
The default position is called "static"

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">

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!

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.

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.

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.

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
}

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.

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: ;
}

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.

FLOAT: EXAMPLE
Below a <blockquote> is floated to the left, allowing text to
wrap around it on the right

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.

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.

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"

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

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.

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

GDI Seattle Intro to HTML and CSS - Class 4

Recommended

More Related Content

Viewers also liked (10)

Similar to GDI Seattle Intro to HTML and CSS - Class 4 (13)

More from Heather Rock (7)

Recently uploaded (20)

GDI Seattle Intro to HTML and CSS - Class 4