layout
DESCRIPTION
This presentation given for developers at Truelogic Software Solutions is about CSS and layouting. It is explained all the ways to re-position an element in the screen.TRANSCRIPT
TRUELOGIC SOFTWARE SOLUTIONS
Layout is the sizing, spacing, and
placement of content within a window or
page
w w w . t r u e l o g i c s o f t w a r e . c o m
“ ”
Layout
No layout
w w w . t r u e l o g i c s o f t w a r e . c o m
Table layoutBox layout
1995 2010
Layout > No layout
w w w . t r u e l o g i c s o f t w a r e . c o m
Layout > Table layout
w w w . t r u e l o g i c s o f t w a r e . c o m
Layout > Box layout
w w w . t r u e l o g i c s o f t w a r e . c o m
Box Model
w w w . t r u e l o g i c s o f t w a r e . c o m
Box Model > Element
w w w . t r u e l o g i c s o f t w a r e . c o m
display: inline-block;
Box Model > Dimensions
w w w . t r u e l o g i c s o f t w a r e . c o m
Box Model > Padding
w w w . t r u e l o g i c s o f t w a r e . c o m
Box Model > Border
w w w . t r u e l o g i c s o f t w a r e . c o m
Box Model > Margin
w w w . t r u e l o g i c s o f t w a r e . c o m
Box Model > Offsets
w w w . t r u e l o g i c s o f t w a r e . c o m
margin-left, margin-right
w w w . t r u e l o g i c s o f t w a r e . c o m
widthheight
Layout is the sizing, spacing, and placement of content within a window or page.
Placement
w w w . t r u e l o g i c s o f t w a r e . c o m
float
clear
position
w w w . t r u e l o g i c s o f t w a r e . c o m
absoluterelativefixedstatic
leftrightnone
leftrightboth
Placement > Float
w w w . t r u e l o g i c s o f t w a r e . c o m
w w w . t r u e l o g i c s o f t w a r e . c o m
Placement > Float
Placement > Absolute
w w w . t r u e l o g i c s o f t w a r e . c o m
Placement > Absolute
w w w . t r u e l o g i c s o f t w a r e . c o m
Placement > Relative
w w w . t r u e l o g i c s o f t w a r e . c o m
w w w . t r u e l o g i c s o f t w a r e . c o m
Placement > Relative
w w w . t r u e l o g i c s o f t w a r e . c o m
Placement > Fixed
w w w . t r u e l o g i c s o f t w a r e . c o m
Placement > Fixed