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 ELEMENTS...
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
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>
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>
<div>’S YOUNGER, CUTER, INLINE BROTHER <span>
SPAN .dropcap { font-size: 48px; float: left; } .acroynm { font-size: .8em; text-transform: uppercase; }
SO, EVERYTHING IS EITHER BLOCK-LEVEL OR INLINE. THAT SEEMS PRETTY EFFIN’ LIMITING.
DISPLAY h2 { display: inline; } img { display: block; }
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
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
THE NEWER, BETTER WAY
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.
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.
BOX-SIZING: BORDER-BOX * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
CSS RESET
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>
CONTAINERS .container { width: 900px; margin: 100px auto; }
CONTAINERS .container { width: 900px; margin: 100px auto; } CENTERS CONTAINER IN WINDOW
CONTAINERS WHAT HAPPENS IF WE DON’T INCLUDE A WIDTH? .container { width: 900px; margin: 100px auto; }
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>
FLOAT & CLEAR
FLOAT & CLEAR BEST FOR: - SIDEBARS - PAGE COLUMNS - PULL QUOTES - WRAP-AROUND IMAGES - ANYTIME WHERE THE REST OF YOUR PAGE COMPOSITION RELIES ON THE ELEMENT
FLOAT & CLEAR h2 { float: left; width: 300px; } p { clear: both; }
FLOAT & CLEAR .sidebar { float: left; width: 130px; } .main { margin-left: 150px; }
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
PROTIP! FLOAT & CLEAR FLOATS DON’T TAKE UP SPACE IN THE NORMAL WAY, SO HOW CAN WE GET BOXES TO HOLD THEM? CLEARFIX!
PROTIP! CLEARFIX .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
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>
CLEARFIX #container GALLERY ITEM #1 GALLERY ITEM #2 GALLERY ITEM #3 GALLERY ITEM #4 GALLERY ITEM #5
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>
CLEARFIX #container GALLERY ITEM #1 GALLERY ITEM #2 GALLERY ITEM #3 GALLERY ITEM #4 GALLERY ITEM #5
POSITION .container { position: relative; } .badge { position: absolute; } .nav { position: fixed; }
RELATIVE POSITIONING H1 PAGE H2 P FLOW P P
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
ABSOLUTE POSITIONING H1 P P P H2
H2 ABSOLUTE POSITIONING H1 P P P
ABSOLUTE POSITIONING H1 H2 P P P
ABSOLUTE POSITIONING H1 H2 WHEREVER THE P P F*@# YOU WANT IT. P
ABSOLUTE POSITIONING H1 H2 P P P PAGE FLOW
WHY DON’T WE JUST ALWAYS USE ABSOLUTE POSITIONING?
ABSOLUTE POSITIONING NOT GOOD FOR: - RESPONSIVE DESIGN - PAGE STRUCTURAL ELEMENTS - UPDATABILITY - MOST THINGS
ABSOLUTE POSITIONING .header { position: absolute; top: 40px; right: 10px; }
PROTIP! ABSOLUTE POSITIONING .header { position: absolute; top: 40px; right: 10px; z-index: 100; }
PROTIP! ABSOLUTE POSITIONING .header { position: absolute; top: 40px; right: 10px; left: 10px; bottom: 10px; }
CONTAINED ABSOLUTES .container { position: relative; margin: 40px auto; } .header { position: absolute; top: 40px; right: 10px; }
PROTIP! SPACING ABSOLUTE POSITIONING = TOP, LEFT, RIGHT, BOTTOM RELATIVE POSITIONING = MARGINS
PROTIP! AND IT ONLY GETS MORE COMPLICATED
Recommend
More recommend
