CS-422 Dr. Mark L. Hornick

1
Webpage layout using CSS

• The box model

2
The ltdivgt element is used to group block-level
elements together
html
html
body
body
head
head
h1
p
p
p
h1
p
div
title
title
p
p
strong
strong
em
em
em
em
em
strong
em
strong
3
A ltdivgt element usually contains an id or class
attribute
html
body

• Setting the style on a ltdivgt element affects all
  nested elements
• Provides a way to split a document into sections
  of related content whose presentation should be
  similar

head
h1
p
div
title
p
p
strong
em
em
em
strong
4
ltspangt essentially allows you to create custom
in-line elements

• HTML ltpgtThis is ltspan idcourier_examplegtCouri
  erlt/spangt text.lt/pgt
• CSSp font-family Arial courier_example
  font-familyCourier
• ltspangt generally must have an id or class
  attribute to be useful

5
The CSS box model
The box model applies to both block and inline
elements

• From the perspective of CSS, every element in an
  HTML doc is a box, including
• Content area
• Imaginary element box surrounding text (or image)
• Optional Padding
• Transparent space between Content and Border
• Optional Border
• Various widths, styles, colors
• Optional Margin
• Transparent space between Border and other
  elements

6
Without Padding, Border, or Margin
7
Padding and Margins can be simultaneously
specified for all 4 sides

• ltstyle type"text/css"gt
• body
• margin 30px
• border 5px solid gray
• padding 20px
• lt/stylegt

8
or individually

• ltstyle type"text/css"gt
• body
• margin-right 30px
• margin-top 5px
• margin-left 100px
• border 5px solid gray
• padding 20px
• padding-right 100px
• padding-bottom80px
• lt/stylegt

9
Specifying Border detail

• border-top-color red rgb(100, 0, 0)
  ff0000
• border-top-style solid double groove
• border-top-width 1px thin medium
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-right-style
• border-right-width
• border-right-color
• border-left-style
• border-left-color
• border-left-width

10
Specifying Padding/Margin detail

• padding-left 20px / negative values ok /
• padding-right 20 / of width of parent
  element /
• padding-top
• padding-bottom
• padding 20px, 10px, 30px, 15px / shorthand /
• margin-left 20px / negative values ok /
• margin-right 20 / of width of parent element
  /
• margin-top auto / auto-fit to containing block
  /
• margin-bottom
• margin 20px, 10px, 30px, 15px / shorthand /

11
The Flow is what a browser uses to layout HTML
elements

• The browser flows block elements from top to
  bottom, inserting a line break between each

lth1gtlt/h1gt
ltdivgt lt/divgt
ltpgtlt/pgt
ltpgtlt/pgt
ltpgtlt/pgt
12
Every character and element in a line of text is
represented by an inline box
lth1gt lt/h1gt
text
text

• Inline elements are flowed from top-left to
  bottom-right
• For text, the inline box size depends on the font
  size and the value of the line-height attribute

ltdivgt lt/divgt
ltpgt
lt/pgt
text
a
img
span
em
text
ltpgt lt/pgt
text
ltpgt lt/pgt
img
img
13
Flow proceeds horizontally from left to right as
long as there is room on the right
lth1gt lt/h1gt
text
text
lth1gt lt/h1gt
text
text
ltdivgt lt/divgt
ltdivgt lt/divgt
ltpgt
lt/pgt
text
img
ltpgt
lt/pgt
text
a
img
a
text
span
em
text
span
em
ltpgt lt/pgt
text
ltpgt lt/pgt
text
ltpgt lt/pgt
img
img
ltpgt lt/pgt
img
img
14
The width and height properties of elements can
be specified

• The width attribute specifies the width of the
  content area only
• Total width left-margin right-margin
  left-border left-padding content
  right-padding right-border right-margin

15
Normal Flow is the default positioning scheme
applied to elements by the browser

• There are four types of positioning
• static (normal, the default)
• relative
• absolute
• fixed

ltstyle type"text/css"gt body position
static lt/stylegt
16
Normal (static) Flow example
17
Absolute positioning removes an element from the
normal flow

• The elements position w.r.t. normal flow is
  eliminated
• Remaining normal elements are used in the flow
• Position is relative to the containing block
  whose position is not static
• E.g when the containing block for a ltpgt is ltdivgt,
  the position is w.r.t. the ltdivgt
• The containing block for ltbodygt is lthtmlgt

ltstyle type"text/css"gt a position
absolute top 70px left 50px width
100px lt/stylegt
18
Absolute positioning example
Scrollbar at top
Scrollbar at bottom
19
Fixed positioning uses the browser window as the
containing block

• Position is fixed with respect to the browser
  window

ltstyle type"text/css"gt a position
fixed top 70px left 50px width
100px lt/stylegt
20
Fixed positioning example
Scrollbar at top
Scrollbar at bottom
21
Relative positioning uses nearest nesting element
as the containing block

• The elements position w.r.t. computation of
  normal flow is preserved
• But the element is actually positioned w.r.t. the
  containing block

ltstyle type"text/css"gt a position
relative top 70px left 50px lt/stylegt
22
Relative positioning example
23
Webpage layout using CSS

• Floating elements

24
The Flow is what a browser uses to layout HTML
elements

• The browser flows block elements from top to
  bottom, inserting a line break between each
• Inline elements are flowed from left to right,
  then top to bottom

25
Absolute positioning removes an element from the
normal flow

• The elements position with respect to normal
  flow is eliminated
• Remaining normal elements are used in the flow as
  if the absolutely positioned element did not
  exist
• Note Elements in the normal flow always appear
  beneath positioned elements
• Z-order only applies to positioned elements

26
Elements are positioned with respect to their
nearest containing ancestor

• whose position is not specified as static
• Static is the default which results in normal flow

Here, the blue ltdivgt is the nearest containing
element, but it is part of the normal flow
(static)
so the green element defaults to being
positioned w.r.t the ltbodygt or lthtmlgt element
27
Relatively positioned elements remain in the
normal flow
Here, the blue ltdivgt is specified as Relative
with an offset of 0px
so the green element is now positioned w.r.t
the blue ltdivgt
28
Floating an element is another way of positioning
it

• The floated elements position with respect to
  normal flow is eliminated
• but the remaining normal elements respect the
  boundary of the floated element
• contents of the normal flow elements will flow
  around it the floated element
• A floated element should be given a specific width

the green element is floated w.r.t the blue ltdivgt
29
Floating positions an element w.r.t. its
containing element
the green element is floated w.r.t the ltbodygt
30
An element floats w.r.t. the element immediately
above it
the green element is floated after the yellow ltpgt
31
An element can be floated either left or right
the green element is floated w.r.t the ltbodygt
the green element is floated w.r.t the ltdivgt
32
Inline elements can be floated as well
the ltimggt elements are floated right w.r.t their
containing ltpgt elements