HTML                 6& CSSDINIS CORREIA 2011              cbn
CSS    1      POSITION       2      FLOAT &       CLEAR       3      LAYOUT
3                        LAYOUTCSS                        ⇪na sessão anterior...
CADAELEMENTOÉ UMACAIXAFOTO DE Z287MARC cHTTP://FLIC.KR/P/5S7L11
POSICIONAMENTO    position
CSS      p	  {	  position:	  static;	  }      p	  {	  position:	  relative;	  }      p	  {	  position:	  absolute;	  }    ...
RELATIVE
CSS      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; }
<span>
<span>
2px10px             <span>
ABSOLUTE
CSS span	  {	       padding:	  4px;     background:	  yellow;     position:	  absolute;     top:	  2px;     left:	  10px; }
A posição de um elemento!   posicionado absolutamente é    calculada a partir do elemento    "posicionado" mais próximo.
HTML  BODY       .HEADER       .CONTENT           P               SPAN       .FOOTER
HTML  BODY       .HEADER       .CONTENT           P               SPAN       .FOOTER
HTML  BODY       .HEADER       .CONTENT           P   POSICIONADO               SPAN       .FOOTER
HTML  BODY       .HEADER       .CONTENT   POSICIONADO           P               SPAN       .FOOTER
HTML  BODY   POSICIONADO       .HEADER       .CONTENT           P                SPAN       .FOOTER
HTML   ÚLTIMO CASO  BODY        .HEADER        .CONTENT               P                     SPAN        .FOOTER
CSS span	  {	       padding:	  4px;     background:	  yellow;     position:	  absolute;     top:	  2px;     left:	  10px; }
CSS p	  {	  position:	  relative;	  } span	  {	       padding:	  4px;     background:	  yellow;     position:	  absolute; ...
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;	       ...
CSS .outer	  {	        position:	  relative;	        height:	  40px;	   } .inner	  {	        position:	  absolute;	       ...
CSS .outer	  {	        position:	  relative;	        height:	  40px;	   } .inner	  {	        position:	  absolute;	       ...
FIXED
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 .inner	  {	       position:	  fixed;	       top:	  10px;     left:	  10px; }
Z-INDEX
Z-INDEXA 3ª DIMENSÃO DO CSSFOTO DE MATT NEALE c HTTP://FLIC.KR/P/8947YE
x   y
x        y left     topright   bottom
x        y         z left     top                 z-­‐indexright   bottom
z-­‐index:	  1;       z-­‐index:	  2;z-­‐index:	  3;
z-­‐index:	  1;       z-­‐index:	  2;z-­‐index:	  10;
CSS .box1	  {	       position:	  absolute;	   } .box2	  {	       position:	  absolute;	   }
CSS .box1	  {	       position:	  absolute;	   } .box2	  {	       position:	  absolute;	   }
CSS .box1	  {	       position:	  absolute;     z-­‐index:	  1;	   } .box2	  {	       position:	  absolute;	   }
FLOAT & CLEAR
FLOAT
CSS      p	  {	  float:	  none;	  }      p	  {	  float:	  right;	  }      p	  {	  float:	  left;	  }
!    À semelhança dos elementos    posicionados absolutamente,    também são removidos do flow.
CSS 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;   ...
CSS span.a	  {	        padding:	  2px;      background:	  yellow;      float:	  left;      height:	  200px; } span.b	  {  ...
!   Flutuar um elemento torna-a    num elemento block-level.
CSS span.a	  {	                 span.c	  {      padding:	  2px;              padding:	  2px;      background:	  yellow;   ...
CSS span.a	  {	       padding:	  2px;     background:	  yellow;     float:	  left;     padding:	  10px;     margin:	  0	  ...
CSS span.a	  {	        padding:	  2px;      background:	  yellow;      float:	  left;      padding:	  10px;      margin:	 ...
}
CSS span.a	  {	        padding:	  2px;      background:	  yellow;      float:	  left;      padding:	  10px;      margin:	 ...
CLEAR
CSS span.a	  {	        padding:	  2px;      background:	  yellow;      float:	  left;      padding:	  10px;      margin:	 ...
}
CSS span.a	  {	        padding:	  2px;      background:	  yellow;      float:	  left;      padding:	  10px;      margin:	 ...
CSS span.a	  {	        padding:	  2px;      background:	  yellow;      float:	  left;      padding:	  10px;      margin:	 ...
p	  {         padding:	  5px;         border:	  2px	  solid	  #9a2a03         clear:	  both;}
p	  {         padding:	  5px;         border:	  2px	  solid	  #9a2a03         clear:	  right;}
CSS span.a	  {	        padding:	  2px;      background:	  yellow;      float:	  left;      padding:	  10px;      margin:	 ...
CONTER UM FLOAT
HTML ...   <div	  style="clear:	  both"></div> </div>
HTML ...   <div	  style="clear:	  both"></div> </p>
CSS p	  {	         overflow:	  auto; }
HTML       <p	  class="clearfix">	  ...	  </p>CSS    .clearfix:after	  {       	      visibility:	  hidden;       	      d...
http://bit.ly/html_clearfix
HTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSS
Upcoming SlideShare
Loading in …5
×

HTML&CSS 6 - Advanced CSS

1,844 views

Published on

Slides for my in-house HTML & CSS trainning at SAPO.

Intermediate CSS: position and float.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,844
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
649
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML&CSS 6 - Advanced CSS

  1. 1. HTML 6& CSSDINIS CORREIA 2011 cbn
  2. 2. CSS 1 POSITION 2 FLOAT & CLEAR 3 LAYOUT
  3. 3. 3 LAYOUTCSS ⇪na sessão anterior...
  4. 4. CADAELEMENTOÉ UMACAIXAFOTO DE Z287MARC cHTTP://FLIC.KR/P/5S7L11
  5. 5. POSICIONAMENTO position
  6. 6. CSS p  {  position:  static;  } p  {  position:  relative;  } p  {  position:  absolute;  } p  {  position:  fixed;  }
  7. 7. RELATIVE
  8. 8. CSS p  {   position:  relative; }
  9. 9. CSS p  {   position:  relative; top:  10px; right:  10px; }
  10. 10. CSS p  {   position:  relative; bottom:  10px; left:  10px; }
  11. 11. CSS span  {   padding:  4px; background:  yellow; position:  relative; }
  12. 12. CSS span  {   padding:  4px; background:  yellow; position:  relative; top:  2px; left:  10px; }
  13. 13. <span>
  14. 14. <span>
  15. 15. 2px10px <span>
  16. 16. ABSOLUTE
  17. 17. CSS span  {   padding:  4px; background:  yellow; position:  absolute; top:  2px; left:  10px; }
  18. 18. A posição de um elemento! posicionado absolutamente é calculada a partir do elemento "posicionado" mais próximo.
  19. 19. HTML BODY .HEADER .CONTENT P SPAN .FOOTER
  20. 20. HTML BODY .HEADER .CONTENT P SPAN .FOOTER
  21. 21. HTML BODY .HEADER .CONTENT P POSICIONADO SPAN .FOOTER
  22. 22. HTML BODY .HEADER .CONTENT POSICIONADO P SPAN .FOOTER
  23. 23. HTML BODY POSICIONADO .HEADER .CONTENT P SPAN .FOOTER
  24. 24. HTML ÚLTIMO CASO BODY .HEADER .CONTENT P SPAN .FOOTER
  25. 25. CSS span  {   padding:  4px; background:  yellow; position:  absolute; top:  2px; left:  10px; }
  26. 26. CSS p  {  position:  relative;  } span  {   padding:  4px; background:  yellow; position:  absolute; top:  2px; left:  10px; }
  27. 27. CSS .outer  {  position:  relative;  } .inner  {  }
  28. 28. CSS .outer  {  position:  relative;  } .inner  {   position:  absolute;   top:  0; left:  0; }
  29. 29. CSS .outer  {  position:  static;  } .inner  {   position:  absolute;   top:  0; left:  0; }
  30. 30. CSS .outer  {   position:  relative;   height:  40px;   } .inner  {   position:  absolute;   top:  0; left:  0; width:  400px; height:  200px; }
  31. 31. CSS .outer  {   position:  relative;   height:  40px;   } .inner  {   position:  absolute;   top:  0; left:  10px; right:  10px; height:  200px; }
  32. 32. CSS .outer  {   position:  relative;   height:  40px;   } .inner  {   position:  absolute;   top:  0; left:  10px; right:  10px; height:  200px; }
  33. 33. FIXED
  34. 34. CSS .inner  {   position:  fixed;   top:  10px; left:  10px; }
  35. 35. CSS .inner  {   position:  fixed;   top:  10px; left:  10px; }
  36. 36. CSS .inner  {   position:  fixed;   top:  10px; left:  10px; }
  37. 37. CSS .inner  {   position:  fixed;   top:  10px; left:  10px; }
  38. 38. Z-INDEX
  39. 39. Z-INDEXA 3ª DIMENSÃO DO CSSFOTO DE MATT NEALE c HTTP://FLIC.KR/P/8947YE
  40. 40. x y
  41. 41. x y left topright bottom
  42. 42. x y z left top z-­‐indexright bottom
  43. 43. z-­‐index:  1; z-­‐index:  2;z-­‐index:  3;
  44. 44. z-­‐index:  1; z-­‐index:  2;z-­‐index:  10;
  45. 45. CSS .box1  {   position:  absolute;   } .box2  {   position:  absolute;   }
  46. 46. CSS .box1  {   position:  absolute;   } .box2  {   position:  absolute;   }
  47. 47. CSS .box1  {   position:  absolute; z-­‐index:  1;   } .box2  {   position:  absolute;   }
  48. 48. FLOAT & CLEAR
  49. 49. FLOAT
  50. 50. CSS p  {  float:  none;  } p  {  float:  right;  } p  {  float:  left;  }
  51. 51. ! À semelhança dos elementos posicionados absolutamente, também são removidos do flow.
  52. 52. CSS span.a  {   padding:  2px; background:  yellow; }
  53. 53. CSS span.a  {   padding:  2px; background:  yellow; float:  left; }
  54. 54. CSS span.a  {   padding:  2px; background:  yellow; float:  left; } span.b  { padding:  2px; background:  grey; float:  left; }
  55. 55. CSS span.a  {   padding:  2px; background:  yellow; float:  left; height:  200px; } span.b  { padding:  2px; background:  grey; float:  left; }
  56. 56. ! Flutuar um elemento torna-a num elemento block-level.
  57. 57. 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%; }
  58. 58. CSS span.a  {   padding:  2px; background:  yellow; float:  left; padding:  10px; margin:  0  10px  10px  0; }
  59. 59. CSS span.a  {   padding:  2px; background:  yellow; float:  left; padding:  10px; margin:  0  10px  10px  0; } p  { padding:  5px; border:  2px  solid  #9a2a03 }
  60. 60. }
  61. 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. 62. CLEAR
  63. 63. 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; }
  64. 64. }
  65. 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. 66. 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; }
  67. 67. p  { padding:  5px; border:  2px  solid  #9a2a03 clear:  both;}
  68. 68. p  { padding:  5px; border:  2px  solid  #9a2a03 clear:  right;}
  69. 69. 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; }
  70. 70. CONTER UM FLOAT
  71. 71. HTML ... <div  style="clear:  both"></div> </div>
  72. 72. HTML ... <div  style="clear:  both"></div> </p>
  73. 73. CSS p  {   overflow:  auto; }
  74. 74. 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;  }
  75. 75. http://bit.ly/html_clearfix

×