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

▶
css
SMART_READER_LITE
LIVE PREVIEW

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

slide-1
SLIDE 1

CSS

POSITIONING

(PUTTING HTML IN ITS PLACE)

slide-2
SLIDE 2

BLOCK VS. INLINE

H1

H2 P P P

PAGE FLOW

slide-3
SLIDE 3

BLOCK VS. INLINE

H1

H2 P P P

STILL DOWN HERE width: 300px

slide-4
SLIDE 4

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

slide-5
SLIDE 5

ON THE OTHER HAND, INLINE ELEMENTS...

slide-6
SLIDE 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
slide-7
SLIDE 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>

slide-8
SLIDE 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>

slide-9
SLIDE 9

<div>’S YOUNGER, CUTER, INLINE BROTHER

<span>

slide-10
SLIDE 10

.dropcap { font-size: 48px; float: left; }

SPAN

.acroynm { font-size: .8em; text-transform: uppercase; }

slide-11
SLIDE 11

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

slide-12
SLIDE 12

h2 { display: inline; }

DISPLAY

img { display: block; }

slide-13
SLIDE 13

THE BOX MODEL

WIDTH HEIGHT 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. Food truck raw denim fixie pinterest chillwave mumblecore. American apparel photo booth truffaut pour-over high life pop-up. MARGIN PADDING BORDER
slide-14
SLIDE 14

THE BOX MODEL

TOTAL WIDTH = 2×PADDING + 2×BORDER + WIDTH HEIGHT 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. Food truck raw denim fixie pinterest chillwave mumblecore. American apparel photo booth truffaut pour-over high life pop-up. MARGIN PADDING BORDER
slide-15
SLIDE 15

THE NEWER, BETTER WAY

slide-16
SLIDE 16 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

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-
  • rigin coffee.
slide-17
SLIDE 17 TOTAL WIDTH = WIDTH HEIGHT 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. Food truck raw denim fixie pinterest chillwave mumblecore. American apparel photo booth truffaut pour-over high life pop-up. PADDING

BOX-SIZING: BORDER-BOX

slide-18
SLIDE 18

* {

  • webkit-box-sizing: border-box;
  • moz-box-sizing: border-box;

box-sizing: border-box; }

BOX-SIZING: BORDER-BOX

slide-19
SLIDE 19

CSS RESET

slide-20
SLIDE 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>
slide-21
SLIDE 21

CONTAINERS

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

slide-22
SLIDE 22

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

CONTAINERS

CENTERS CONTAINER IN WINDOW

slide-23
SLIDE 23

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

CONTAINERS

WHAT HAPPENS IF WE DON’T INCLUDE A WIDTH?

slide-24
SLIDE 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>
slide-25
SLIDE 25

FLOAT & CLEAR

slide-26
SLIDE 26

BEST FOR:

  • SIDEBARS
  • PAGE COLUMNS
  • PULL QUOTES
  • WRAP-AROUND IMAGES
  • ANYTIME WHERE THE REST OF YOUR PAGE

COMPOSITION RELIES ON THE ELEMENT

FLOAT & CLEAR

slide-27
SLIDE 27

h2 { float: left; width: 300px; }

FLOAT & CLEAR

p { clear: both; }

slide-28
SLIDE 28

.sidebar { float: left; width: 130px; }

FLOAT & CLEAR

.main { margin-left: 150px; }

slide-29
SLIDE 29

NOTES ON FLOATS:

  • ADJACENT ELEMENT’S MARGINS “PUSH

THROUGH” FLOATED ELEMENTS

  • FLOATED ITEMS TAKE UP NO SPACE

UNLESS YOU STATE A WIDTH AND HEIGHT

FLOAT & CLEAR

slide-30
SLIDE 30

FLOATS DON’T TAKE UP SPACE IN THE NORMAL WAY, SO HOW CAN WE GET BOXES TO HOLD THEM?

CLEARFIX!

FLOAT & CLEAR

PROTIP!

slide-31
SLIDE 31

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

CLEARFIX

PROTIP!

slide-32
SLIDE 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>
slide-33
SLIDE 33

CLEARFIX

GALLERY ITEM #1 GALLERY ITEM #2 GALLERY ITEM #3 GALLERY ITEM #4 GALLERY ITEM #5 #container
slide-34
SLIDE 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>
slide-35
SLIDE 35

CLEARFIX

GALLERY ITEM #1 GALLERY ITEM #2 GALLERY ITEM #3 GALLERY ITEM #4 GALLERY ITEM #5 #container
slide-36
SLIDE 36

.badge { position: absolute; }

POSITION

.nav { position: fixed; } .container { position: relative; }

slide-37
SLIDE 37

H1

H2 P P P

PAGE FLOW RELATIVE POSITIONING

slide-38
SLIDE 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

slide-39
SLIDE 39

H1

H2 P P P

ABSOLUTE POSITIONING

slide-40
SLIDE 40

H1

H2 P P P

ABSOLUTE POSITIONING

slide-41
SLIDE 41

H1

H2 P P P

ABSOLUTE POSITIONING

slide-42
SLIDE 42

H1

H2 P P P

WHEREVER THE F*@# YOU WANT IT. ABSOLUTE POSITIONING

slide-43
SLIDE 43

H1

H2 P P P

PAGE FLOW

ABSOLUTE POSITIONING

slide-44
SLIDE 44

WHY DON’T WE JUST ALWAYS USE ABSOLUTE POSITIONING?

slide-45
SLIDE 45

ABSOLUTE POSITIONING

NOT GOOD FOR:

  • RESPONSIVE DESIGN
  • PAGE STRUCTURAL ELEMENTS
  • UPDATABILITY
  • MOST THINGS
slide-46
SLIDE 46

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

ABSOLUTE POSITIONING

slide-47
SLIDE 47

.header { position: absolute; top: 40px; right: 10px; z-index: 100; }

ABSOLUTE POSITIONING PROTIP!

slide-48
SLIDE 48

.header { position: absolute; top: 40px; right: 10px; left: 10px; bottom: 10px; }

ABSOLUTE POSITIONING PROTIP!

slide-49
SLIDE 49

CONTAINED ABSOLUTES

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

slide-50
SLIDE 50

ABSOLUTE POSITIONING = TOP, LEFT, RIGHT, BOTTOM RELATIVE POSITIONING = MARGINS

SPACING

PROTIP!

slide-51
SLIDE 51

PROTIP!

AND IT ONLY GETS MORE COMPLICATED