TRUELOGIC SOFTWARE SOLUTIONS
Layout“   Layout is the sizing, spacing, and placement ofcontent within a window or page                                  ...
No layout        Table layout                                 Box layout1995                                              ...
Layout > No layout                     w w w . t r u e l o g i c s o f t w a r e . com
Layout > Table layout                        w w w . t r u e l o g i c s o f t w a r e . com
Layout > Box layout                      w w w . t r u e l o g i c s o f t w a r e . com
Box Modelw w w . t r u e l o g i c s o f t w a r e . com
Box Model > Element                                         display: inline-block;                      w w w . t r u e l ...
Box Model > Dimensions                         w w w . t r u e l o g i c s o f t w a r e . com
Box Model > Padding                      w w w . t r u e l o g i c s o f t w a r e . com
Box Model > Border                     w w w . t r u e l o g i c s o f t w a r e . com
Box Model > Margin                     w w w . t r u e l o g i c s o f t w a r e . com
Box Model > Offsets                                     margin-left, margin-right                      w w w . t r u e l o...
Layout is thesizing, spacing, a                                                     widthnd placement of                  ...
Placementw w w . t r u e l o g i c s o f t w a r e . com
left                               right   float                       none                                left  clear    ...
Placement > Float                    w w w . t r u e l o g i c s o f t w a r e . com
Placement > Float                    w w w . t r u e l o g i c s o f t w a r e . com
Placement > Absolute                       w w w . t r u e l o g i c s o f t w a r e . com
Placement > Absolute                       w w w . t r u e l o g i c s o f t w a r e . com
Placement > Relative                       w w w . t r u e l o g i c s o f t w a r e . com
Placement > Relative                       w w w . t r u e l o g i c s o f t w a r e . com
Placement > Fixed                    w w w . t r u e l o g i c s o f t w a r e . com
Placement > Fixed                    w w w . t r u e l o g i c s o f t w a r e . com
Upcoming SlideShare
Loading in...5
×

Layout

162

Published on

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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
162
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Layout

  1. 1. TRUELOGIC SOFTWARE SOLUTIONS
  2. 2. Layout“ Layout is the sizing, spacing, and placement ofcontent 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 . com
  3. 3. No layout Table layout Box layout1995 2010 w w w . t r u e l o g i c s o f t w a r e . com
  4. 4. Layout > No layout w w w . t r u e l o g i c s o f t w a r e . com
  5. 5. Layout > Table layout w w w . t r u e l o g i c s o f t w a r e . com
  6. 6. Layout > Box layout w w w . t r u e l o g i c s o f t w a r e . com
  7. 7. Box Modelw w w . t r u e l o g i c s o f t w a r e . com
  8. 8. Box Model > Element display: inline-block; w w w . t r u e l o g i c s o f t w a r e . com
  9. 9. Box Model > Dimensions w w w . t r u e l o g i c s o f t w a r e . com
  10. 10. Box Model > Padding w w w . t r u e l o g i c s o f t w a r e . com
  11. 11. Box Model > Border w w w . t r u e l o g i c s o f t w a r e . com
  12. 12. Box Model > Margin w w w . t r u e l o g i c s o f t w a r e . com
  13. 13. Box Model > Offsets margin-left, margin-right w w w . t r u e l o g i c s o f t w a r e . com
  14. 14. Layout is thesizing, spacing, a widthnd placement of heightcontent within awindow or page. w w w . t r u e l o g i c s o f t w a r e . com
  15. 15. Placementw w w . t r u e l o g i c s o f t w a r e . com
  16. 16. left right float none left clear right bothposition absolute relative fixed static w w w . t r u e l o g i c s o f t w a r e . com
  17. 17. Placement > Float w w w . t r u e l o g i c s o f t w a r e . com
  18. 18. Placement > Float w w w . t r u e l o g i c s o f t w a r e . com
  19. 19. Placement > Absolute w w w . t r u e l o g i c s o f t w a r e . com
  20. 20. Placement > Absolute w w w . t r u e l o g i c s o f t w a r e . com
  21. 21. Placement > Relative w w w . t r u e l o g i c s o f t w a r e . com
  22. 22. Placement > Relative w w w . t r u e l o g i c s o f t w a r e . com
  23. 23. Placement > Fixed w w w . t r u e l o g i c s o f t w a r e . com
  24. 24. Placement > Fixed w w w . t r u e l o g i c s o f t w a r e . com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×