css
play

CSS POSITIONING (PUTTING HTML IN ITS PLACE) BLOCK VS. INLINE H1 - PowerPoint PPT Presentation

Oct 24, 2023 •221 likes •741 views

CSS POSITIONING (PUTTING HTML IN ITS PLACE) BLOCK VS. INLINE H1 PAGE H2 P FLOW P P BLOCK VS. INLINE H1 width: 300px STILL DOWN HERE H2 P P P BLOCK-LEVEL ELEMENTS INSIST ON TAKING UP THEIR OWN LINE. ON THE OTHER HAND, INLINE

  1. CSS POSITIONING (PUTTING HTML IN ITS PLACE)

  2. BLOCK VS. INLINE H1 PAGE H2 P FLOW P P

  3. BLOCK VS. INLINE H1 width: 300px STILL DOWN HERE H2 P P P

  4. BLOCK-LEVEL ELEMENTS INSIST ON TAKING UP THEIR OWN LINE.

  5. ON THE OTHER HAND, INLINE ELEMENTS...

  6. INLINE ELEMENTS P Before they sold out DIY Cosby sweater, master cleanse sartorial american apparel +1 pour-over ennui raw denim pork belly gastropub. Vegan skateboard, craft beer DIY wayfarers high life photo booth gastropub Austin. Narwhal cliche umami blog. Cardigan street art high life kale chips, P

  7. INLINE ELEMENTS P Before they sold out DIY Cosby sweater, master cleanse sartorial american apparel +1 pour-over ennui raw denim pork belly gastropub. Vegan skateboard, craft beer DIY wayfarers high life photo booth gastropub Austin. Narwhal cliche umami blog. Cardigan street art high life kale chips, P <a>

  8. INLINE ELEMENTS P Before they sold out DIY Cosby sweater, master cleanse sartorial american apparel +1 pour-over ennui raw denim pork belly gastropub. Vegan skateboard, craft beer P <img> <em> <u>

  9. <div>’S YOUNGER, CUTER, INLINE BROTHER <span>

  10. SPAN .dropcap { font-size: 48px; float: left; } .acroynm { font-size: .8em; text-transform: uppercase; }

  11. SO, EVERYTHING IS EITHER BLOCK-LEVEL OR INLINE. THAT SEEMS PRETTY EFFIN’ LIMITING.

  12. DISPLAY h2 { display: inline; } img { display: block; }

  13. THE BOX MODEL WIDTH Pork belly etsy beard fixie. Chillwave banh mi HEIGHT american apparel, trust fund bushwick skateboard viral. PADDING Wolf messenger bag twee, raw denim terry richardson MARGIN forage selvage single-origin coffee. Food truck raw denim fixie pinterest chillwave mumblecore. American apparel photo booth truffaut pour-over high life pop-up. BORDER

  14. THE BOX MODEL TOTAL WIDTH = 2 × PADDING + 2 × BORDER + WIDTH Pork belly etsy beard fixie. Chillwave banh mi HEIGHT american apparel, trust fund bushwick skateboard viral. PADDING Wolf messenger bag twee, raw denim terry richardson MARGIN forage selvage single-origin coffee. Food truck raw denim fixie pinterest chillwave mumblecore. American apparel photo booth truffaut pour-over high life pop-up. BORDER

  15. THE NEWER, BETTER WAY

  16. BOX-SIZING: BORDER-BOX Pork belly etsy beard fixie. Chillwave banh mi american apparel, trust fund bushwick skateboard viral. Wolf messenger bag twee, raw denim terry richardson forage selvage single-origin coffee. WIDTH Pork belly etsy beard fixie. Chillwave banh mi american apparel, trust fund bushwick skateboard viral. Wolf messenger bag twee, raw denim terry richardson forage selvage single- origin coffee.

  17. BOX-SIZING: BORDER-BOX TOTAL WIDTH = WIDTH Pork belly etsy beard fixie. Chillwave banh mi HEIGHT american apparel, trust fund bushwick skateboard viral. PADDING Wolf messenger bag twee, raw denim terry richardson forage selvage single-origin coffee. Food truck raw denim fixie pinterest chillwave mumblecore. American apparel photo booth truffaut pour-over high life pop-up.

  18. BOX-SIZING: BORDER-BOX * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

  19. CSS RESET

  20. CONTAINERS <body> <div class=“container”> <h1>WELCOME TO CRYING KITTENS</h1> <p>I LOVE TO SEE KITTENS CRY ALL DAY</p> <img src=“sadkitten.jpg”> </div> </body>

  21. CONTAINERS .container { width: 900px; margin: 100px auto; }

  22. CONTAINERS .container { width: 900px; margin: 100px auto; } CENTERS CONTAINER IN WINDOW

  23. CONTAINERS WHAT HAPPENS IF WE DON’T INCLUDE A WIDTH? .container { width: 900px; margin: 100px auto; }

  24. CONTAINERS <body> <section class=“sidebar”> <h1>SIDEBAR CONTENT</h1> <p>THIS WILL BE ON THE LEFT SIDE</p> </section> <section class=“main”> <h1>MAIN CONTENT</h1> <p>THIS WILL BE IN THE MAIN COLUMN</p> <img src=“sadkitten.jpg”> </section> </body>

  25. FLOAT & CLEAR

  26. FLOAT & CLEAR BEST FOR: - SIDEBARS - PAGE COLUMNS - PULL QUOTES - WRAP-AROUND IMAGES - ANYTIME WHERE THE REST OF YOUR PAGE COMPOSITION RELIES ON THE ELEMENT

  27. FLOAT & CLEAR h2 { float: left; width: 300px; } p { clear: both; }

  28. FLOAT & CLEAR .sidebar { float: left; width: 130px; } .main { margin-left: 150px; }

  29. FLOAT & CLEAR NOTES ON FLOATS: - ADJACENT ELEMENT’S MARGINS “PUSH THROUGH” FLOATED ELEMENTS - FLOATED ITEMS TAKE UP NO SPACE UNLESS YOU STATE A WIDTH AND HEIGHT

  30. PROTIP! FLOAT & CLEAR FLOATS DON’T TAKE UP SPACE IN THE NORMAL WAY, SO HOW CAN WE GET BOXES TO HOLD THEM? CLEARFIX!

  31. PROTIP! CLEARFIX .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }

  32. CLEARFIX <div class=“container”> <div class=“floatleft”>Gallery Item #1</div> <div class=“floatleft”>Gallery Item #2</div> <div class=“floatleft”>Gallery Item #3</div> <div class=“floatleft”>Gallery Item #4</div> <div class=“floatleft”>Gallery Item #5</div> </div>

  33. CLEARFIX #container GALLERY ITEM #1 GALLERY ITEM #2 GALLERY ITEM #3 GALLERY ITEM #4 GALLERY ITEM #5

  34. CLEARFIX <div class=“container clearfix”> <div class=“floatleft”>Gallery Item #1</div> <div class=“floatleft”>Gallery Item #2</div> <div class=“floatleft”>Gallery Item #3</div> <div class=“floatleft”>Gallery Item #4</div> <div class=“floatleft”>Gallery Item #5</div> </div>

  35. CLEARFIX #container GALLERY ITEM #1 GALLERY ITEM #2 GALLERY ITEM #3 GALLERY ITEM #4 GALLERY ITEM #5

  36. POSITION .container { position: relative; } .badge { position: absolute; } .nav { position: fixed; }

  37. RELATIVE POSITIONING H1 PAGE H2 P FLOW P P

  38. ABSOLUTE POSITIONING BEST FOR: - BADGES, BACKGROUND ELEMENTS, ORNAMENTS - ITEMS THAT ARE FIXED WIDTH + HEIGHT - LAYERED/STACKED ELEMENTS - ANYTIME WHERE YOU NEED AN ELEMENT TO BE EXPLICITLY IN ONE PLACE

  39. ABSOLUTE POSITIONING H1 P P P H2

  40. H2 ABSOLUTE POSITIONING H1 P P P

  41. ABSOLUTE POSITIONING H1 H2 P P P

  42. ABSOLUTE POSITIONING H1 H2 WHEREVER THE P P F*@# YOU WANT IT. P

  43. ABSOLUTE POSITIONING H1 H2 P P P PAGE FLOW

  44. WHY DON’T WE JUST ALWAYS USE ABSOLUTE POSITIONING?

  45. ABSOLUTE POSITIONING NOT GOOD FOR: - RESPONSIVE DESIGN - PAGE STRUCTURAL ELEMENTS - UPDATABILITY - MOST THINGS

  46. ABSOLUTE POSITIONING .header { position: absolute; top: 40px; right: 10px; }

  47. PROTIP! ABSOLUTE POSITIONING .header { position: absolute; top: 40px; right: 10px; z-index: 100; }

  48. PROTIP! ABSOLUTE POSITIONING .header { position: absolute; top: 40px; right: 10px; left: 10px; bottom: 10px; }

  49. CONTAINED ABSOLUTES .container { position: relative; margin: 40px auto; } .header { position: absolute; top: 40px; right: 10px; }

  50. PROTIP! SPACING ABSOLUTE POSITIONING = TOP, LEFT, RIGHT, BOTTOM RELATIVE POSITIONING = MARGINS

  51. PROTIP! AND IT ONLY GETS MORE COMPLICATED

Recommend

More recommend