Submit Search
Upload
HTML&CSS 6 - Advanced CSS
•
4 likes
•
2,011 views
Dinis Correia
Follow
Slides for my in-house HTML & CSS trainning at SAPO. Intermediate CSS: position and float.
Read less
Read more
Technology
Report
Share
Report
Share
1 of 79
Download now
Download to read offline
Recommended
Plantilla miskinidea original
Plantilla miskinidea original
mickore
Johny coba dulu
Johny coba dulu
sipali
CSS Pra Gente Grande
CSS Pra Gente Grande
Shankar Cabus
Drop Down
Drop Down
tutynaryanty
Css positioning
Css positioning
Gerson Abesamis
CSS Layout
CSS Layout
景智 張
Css position
Css position
Webtech Learning
CSS Layouting #5 : Position
CSS Layouting #5 : Position
Sandhika Galih
Recommended
Plantilla miskinidea original
Plantilla miskinidea original
mickore
Johny coba dulu
Johny coba dulu
sipali
CSS Pra Gente Grande
CSS Pra Gente Grande
Shankar Cabus
Drop Down
Drop Down
tutynaryanty
Css positioning
Css positioning
Gerson Abesamis
CSS Layout
CSS Layout
景智 張
Css position
Css position
Webtech Learning
CSS Layouting #5 : Position
CSS Layouting #5 : Position
Sandhika Galih
WordPress & Custm Post Types
WordPress & Custm Post Types
Dinis Correia
HTML&CSS 5 - Intermediate CSS (2/2)
HTML&CSS 5 - Intermediate CSS (2/2)
Dinis Correia
HTML&CSS 4 - Intermediate CSS (1/2)
HTML&CSS 4 - Intermediate CSS (1/2)
Dinis Correia
HTML&CSS 3 - Introduction to CSS
HTML&CSS 3 - Introduction to CSS
Dinis Correia
HTML&CSS 1 - Introduction to HTML
HTML&CSS 1 - Introduction to HTML
Dinis Correia
HTML&CSS 2 - Intermediate HTML
HTML&CSS 2 - Intermediate HTML
Dinis Correia
More Related Content
More from Dinis Correia
WordPress & Custm Post Types
WordPress & Custm Post Types
Dinis Correia
HTML&CSS 5 - Intermediate CSS (2/2)
HTML&CSS 5 - Intermediate CSS (2/2)
Dinis Correia
HTML&CSS 4 - Intermediate CSS (1/2)
HTML&CSS 4 - Intermediate CSS (1/2)
Dinis Correia
HTML&CSS 3 - Introduction to CSS
HTML&CSS 3 - Introduction to CSS
Dinis Correia
HTML&CSS 1 - Introduction to HTML
HTML&CSS 1 - Introduction to HTML
Dinis Correia
HTML&CSS 2 - Intermediate HTML
HTML&CSS 2 - Intermediate HTML
Dinis Correia
More from Dinis Correia
(6)
WordPress & Custm Post Types
WordPress & Custm Post Types
HTML&CSS 5 - Intermediate CSS (2/2)
HTML&CSS 5 - Intermediate CSS (2/2)
HTML&CSS 4 - Intermediate CSS (1/2)
HTML&CSS 4 - Intermediate CSS (1/2)
HTML&CSS 3 - Introduction to CSS
HTML&CSS 3 - Introduction to CSS
HTML&CSS 1 - Introduction to HTML
HTML&CSS 1 - Introduction to HTML
HTML&CSS 2 - Intermediate HTML
HTML&CSS 2 - Intermediate HTML
HTML&CSS 6 - Advanced CSS
1.
HTML
6 & CSS DINIS CORREIA 2011 cbn
2.
CSS
1 POSITION 2 FLOAT & CLEAR 3 LAYOUT
3.
3
LAYOUT CSS ⇪ na sessão anterior...
4.
5.
CADA ELEMENTO É UMA CAIXA FOTO DE
Z287MARC c HTTP://FLIC.KR/P/5S7L11
6.
POSICIONAMENTO
position
7.
CSS
p { position: static; } p { position: relative; } p { position: absolute; } p { position: fixed; }
8.
RELATIVE
9.
CSS
p { position: relative; }
10.
CSS
p { position: relative; top: 10px; right: 10px; }
11.
CSS
p { position: relative; bottom: 10px; left: 10px; }
12.
CSS span {
padding: 4px; background: yellow; position: relative; }
13.
CSS span {
padding: 4px; background: yellow; position: relative; top: 2px; left: 10px; }
14.
<span>
15.
<span>
16.
2px 10px
<span>
17.
ABSOLUTE
18.
CSS span {
padding: 4px; background: yellow; position: absolute; top: 2px; left: 10px; }
19.
A posição de
um elemento ! posicionado absolutamente é calculada a partir do elemento "posicionado" mais próximo.
20.
HTML BODY
.HEADER .CONTENT P SPAN .FOOTER
21.
HTML BODY
.HEADER .CONTENT P SPAN .FOOTER
22.
HTML BODY
.HEADER .CONTENT P POSICIONADO SPAN .FOOTER
23.
HTML BODY
.HEADER .CONTENT POSICIONADO P SPAN .FOOTER
24.
HTML BODY
POSICIONADO .HEADER .CONTENT P SPAN .FOOTER
25.
HTML
ÚLTIMO CASO BODY .HEADER .CONTENT P SPAN .FOOTER
26.
CSS span {
padding: 4px; background: yellow; position: absolute; top: 2px; left: 10px; }
27.
CSS p {
position: relative; } span { padding: 4px; background: yellow; position: absolute; top: 2px; left: 10px; }
28.
CSS .outer {
position: relative; } .inner { }
29.
CSS .outer {
position: relative; } .inner { position: absolute; top: 0; left: 0; }
30.
CSS .outer {
position: static; } .inner { position: absolute; top: 0; left: 0; }
31.
CSS .outer {
position: relative; height: 40px; } .inner { position: absolute; top: 0; left: 0; width: 400px; height: 200px; }
32.
CSS .outer {
position: relative; height: 40px; } .inner { position: absolute; top: 0; left: 10px; right: 10px; height: 200px; }
33.
CSS .outer {
position: relative; height: 40px; } .inner { position: absolute; top: 0; left: 10px; right: 10px; height: 200px; }
34.
FIXED
35.
CSS .inner {
position: fixed; top: 10px; left: 10px; }
36.
CSS .inner {
position: fixed; top: 10px; left: 10px; }
37.
CSS .inner {
position: fixed; top: 10px; left: 10px; }
38.
CSS .inner {
position: fixed; top: 10px; left: 10px; }
39.
Z-INDEX
40.
Z-INDEX A 3ª DIMENSÃO
DO CSS FOTO DE MATT NEALE c HTTP://FLIC.KR/P/8947YE
41.
x
y
42.
x
y left top right bottom
43.
x
y z left top z-‐index right bottom
44.
z-‐index: 1;
z-‐index: 2; z-‐index: 3;
45.
z-‐index: 1;
z-‐index: 2; z-‐index: 10;
46.
CSS .box1 {
position: absolute; } .box2 { position: absolute; }
47.
CSS .box1 {
position: absolute; } .box2 { position: absolute; }
48.
CSS .box1 {
position: absolute; z-‐index: 1; } .box2 { position: absolute; }
49.
50.
FLOAT & CLEAR
51.
FLOAT
52.
CSS
p { float: none; } p { float: right; } p { float: left; }
53.
!
À semelhança dos elementos posicionados absolutamente, também são removidos do flow.
54.
CSS span.a {
padding: 2px; background: yellow; }
55.
CSS span.a {
padding: 2px; background: yellow; float: left; }
56.
CSS span.a {
padding: 2px; background: yellow; float: left; } span.b { padding: 2px; background: grey; float: left; }
57.
CSS span.a {
padding: 2px; background: yellow; float: left; height: 200px; } span.b { padding: 2px; background: grey; float: left; }
58.
!
Flutuar um elemento torna-a num elemento block-level.
59.
CSS span.a {
span.c { padding: 2px; padding: 2px; background: yellow; background: #ccc; float: left; float: left; height: 200px; width: 34%; width: 34%; } } span.b { padding: 2px; background: grey; float: left; width: 34%; }
60.
CSS span.a {
padding: 2px; background: yellow; float: left; padding: 10px; margin: 0 10px 10px 0; }
61.
CSS span.a {
padding: 2px; background: yellow; float: left; padding: 10px; margin: 0 10px 10px 0; } p { padding: 5px; border: 2px solid #9a2a03 }
62.
}
63.
CSS span.a {
padding: 2px; background: yellow; float: left; padding: 10px; margin: 0 10px 10px 0; } p { padding: 5px; border: 2px solid #9a2a03 }
64.
CLEAR
65.
CSS span.a {
padding: 2px; background: yellow; float: left; padding: 10px; margin: 0 10px 10px 0; } p { padding: 5px; border: 2px solid #9a2a03 clear: both; }
66.
}
67.
CSS span.a {
padding: 2px; background: yellow; float: left; padding: 10px; margin: 0 10px 10px 0; } p { padding: 5px; border: 2px solid #9a2a03 clear: both; }
68.
CSS span.a {
padding: 2px; background: yellow; float: left; padding: 10px; margin: 0 10px 10px 0; } p { padding: 5px; border: 2px solid #9a2a03 clear: both; }
69.
p {
padding: 5px; border: 2px solid #9a2a03 clear: both; }
70.
p {
padding: 5px; border: 2px solid #9a2a03 clear: right; }
71.
CSS span.a {
padding: 2px; background: yellow; float: left; padding: 10px; margin: 0 10px 10px 0; } p { padding: 5px; border: 2px solid #9a2a03 clear: left; }
72.
CONTER UM FLOAT
73.
74.
75.
HTML ...
<div style="clear: both"></div> </div>
76.
HTML ...
<div style="clear: both"></div> </div>
77.
CSS p {
overflow: auto; }
78.
HTML
<p class="clearfix"> ... </p> CSS .clearfix:after { visibility: hidden; display: block; font-‐size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } *:first-‐child+html .clearfix { zoom: 1; }
79.
http://bit.ly/html_clearfix
Download now