Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

HTML&CSS 6 - Advanced CSS

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

Intermediate CSS: position and float.

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

×