html&css 6 - advanced css

&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