Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML&CSS 6 - Advanced CSS

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

Intermediate CSS: position and float.

  • Login to see the comments

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

×