html&css 6 - advanced css
DESCRIPTION
Slides for my in-house HTML & CSS trainning at SAPO. Intermediate CSS: position and float.TRANSCRIPT
&DINIS CORREIA 2011
cbn
6HTMLCSS
CSS POSITION1FLOAT & CLEAR2
LAYOUT3⇪
CSS
LAYOUT3
⇪
na sessão anterior...
É UMAELEMENTOCADA
CAIXAFOTO DE Z287MARC c HTTP://FLIC.KR/P/5S7L11
POSICIONAMENTOposition
p { position: static; }
p { position: relative; }
p { position: absolute; }
p { position: fixed; }
CSS
RELATIVE
p { position: relative;
}
CSS
p { position: relative;top: 10px;right: 10px;
}
CSS
p { position: relative;bottom: 10px;left: 10px;
}
CSS
span { padding: 4px;background: yellow;position: relative;
}
CSS
span { padding: 4px;background: yellow;position: relative;top: 2px;left: 10px;
}
CSS
<span>
<span>
<span>10px
2px
ABSOLUTE
span { padding: 4px;background: yellow;position: absolute;top: 2px;left: 10px;
}
CSS
A posição de um elemento posicionado absolutamente é calculada a partir do elemento "posicionado" mais próximo.
!
HTML
BODY
.HEADER
.CONTENT
PSPAN
.FOOTER
HTML
BODY
.HEADER
.CONTENT
PSPAN
.FOOTER
HTML
BODY
.HEADER
.CONTENT
PSPAN
.FOOTER
POSICIONADO
HTML
BODY
.HEADER
.CONTENT
PSPAN
.FOOTER
POSICIONADO
HTML
BODY
.HEADER
.CONTENT
PSPAN
.FOOTER
POSICIONADO
HTML
BODY
.HEADER
.CONTENT
PSPAN
.FOOTER
ÚLTIMO CASO
span { padding: 4px;background: yellow;position: absolute;top: 2px;left: 10px;
}
CSS
p { position: relative; }
span { padding: 4px;background: yellow;position: absolute;top: 2px;left: 10px;
}
CSS
.outer { position: relative; }
.inner { }
CSS
.outer { position: relative; }
.inner { position: absolute; top: 0;left: 0;
}
CSS
.outer { position: static; }
.inner { position: absolute; top: 0;left: 0;
}
CSS
.outer { position: relative; height: 40px;
}
.inner { position: absolute; top: 0;left: 0;width: 400px;height: 200px;
}
CSS
.outer { position: relative; height: 40px;
}
.inner { position: absolute; top: 0;left: 10px;right: 10px;height: 200px;
}
CSS
.outer { position: relative; height: 40px;
}
.inner { position: absolute; top: 0;left: 10px;right: 10px;height: 200px;
}
CSS
FIXED
.inner { position: fixed; top: 10px;left: 10px;
}
CSS
.inner { position: fixed; top: 10px;left: 10px;
}
CSS
.inner { position: fixed; top: 10px;left: 10px;
}
CSS
.inner { position: fixed; top: 10px;left: 10px;
}
CSS
Z-INDEX
Z-INDEXA 3ª DIMENSÃO DO CSSFOTO DE MATT NEALE c HTTP://FLIC.KR/P/8947YE
x y
x y
leftright
topbottom
x y z
leftright
topbottom z-‐index
z-‐index: 1;
z-‐index: 3;
z-‐index: 2;
z-‐index: 1;
z-‐index: 10;
z-‐index: 2;
.box1 { position: absolute;
}
.box2 { position: absolute;
}
CSS
.box1 { position: absolute;
}
.box2 { position: absolute;
}
CSS
.box1 { position: absolute;z-‐index: 1;
}
.box2 { position: absolute;
}
CSS
FLOAT & CLEAR
FLOAT
p { float: none; }
p { float: right; }
p { float: left; }
CSS
À semelhança dos elementos posicionados absolutamente, também são removidos do flow.!
span.a { padding: 2px;background: yellow;
}
CSS
span.a { padding: 2px;background: yellow;float: left;
}
CSS
span.a { padding: 2px;background: yellow;float: left;
}
span.b {padding: 2px;background: grey;float: left;
}
CSS
span.a { padding: 2px;background: yellow;float: left;height: 200px;
}span.b {
padding: 2px;background: grey;float: left;
}
CSS
Flutuar um elemento torna-a num elemento block-level.!
span.a { padding: 2px;background: yellow;float: left;height: 200px;width: 34%;
}span.b {
padding: 2px;background: grey;float: left;width: 34%;
}
CSS
span.c {padding: 2px;background: #ccc;float: left;width: 34%;
}
span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0;
}
CSS
span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0;
}
p {padding: 5px;border: 2px solid #9a2a03
}
CSS
span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0;
}
p {padding: 5px;border: 2px solid #9a2a03
}
span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0;
}
p {padding: 5px;border: 2px solid #9a2a03
}
CSS
CLEAR
span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0;
}
p {padding: 5px;border: 2px solid #9a2a03clear: both;
}
CSS
span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0;
}
p {padding: 5px;border: 2px solid #9a2a03clear: both;
}
span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0;
}
p {padding: 5px;border: 2px solid #9a2a03clear: both;
}
CSS
span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0;
}
p {padding: 5px;border: 2px solid #9a2a03clear: both;
}
CSS
span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0;
}
p {padding: 5px;border: 2px solid #9a2a03clear: both;
}
span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0;
}
p {padding: 5px;border: 2px solid #9a2a03clear: right;
}
span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0;
}
p {padding: 5px;border: 2px solid #9a2a03clear: left;
}
CSS
CONTER UM FLOAT
...
<div style="clear: both"></div>
</div>
HTML
...
<div style="clear: both"></div>
</div>
HTML
p { overflow: auto;
}
CSS
<p class="clearfix"> ... </p>
HTML
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; }
http://bit.ly/html_clearfix