CSS LayoutDoncho MinkovTechnical Trainerhttp://minkov.itTelerik Web Design Coursehtml5course.telerik.com
Table of Contents   Positioning     Positioning inline elements   Floating     Left and right     Clearing Opacity ...
Positioning
Positioning position: defines the positioning of the    element in the page content flow   The value is one of:     sta...
Positioning (2) Margin VS relative positioning Fixed and absolutely positioned elements do not influence the page normal...
Positioning (3) top, left, bottom, right: specifies offset of absolute/fixed/relative positioned element as numerical val...
Positioning      Live Demopositioning-rules.html
Inline element positioning vertical-align: sets the vertical-alignment of an inline element, according to the line height...
Alignment and Z-Index           Live Demoalignments-and-z-index-rules.html
Floating
Float float: the element “floats” to one side   left: places the element on the left and    following content on the rig...
Float (2) How floated elements are positioned                                            12
Clear clear     Sets the sides of the element where other      floating elements are NOT allowed     Used to "drop" ele...
Clear (2)   Clearing floats (continued)     :after { content: ""; display: block;      clear: both; height: 0; }     Tr...
Floating Elements     Live Demo   float-rules.html
Opacity
Opacity opacity: specifies the opacity of the element   Floating point number from 0 to 1   For old Mozilla browsers us...
Opacity   Live Demoopacity-rule.html
Visibility
Visibility visibility  Determines whether the element is visible  hidden: element is not rendered, but still   occupies...
Visibility    Live Demovisibility-rule.html
Display
Display display: controls the display of the element and the way it is rendered and if breaks should be placed before and...
Display (2) display: controls the display of the element and the way it is rendered and if breaks should be placed before...
Display   Live Demodisplay-rule.html
CSS Layouthttp://html5course.telerik.com
Homework1.   Create the following Web page using HTML and     external CSS. Using tables, inline styles and     deprecated...
Homework (2)1.   Create the following     Web page using     external CSS styles.     Buttons should consist     of PNG im...
Homework (3)1.   Create the following Web page using HTML with     external CSS file. Note that the images should be     P...
Homework (4)1.       Given the picture below create the Web site          Use CSS and HTML 5                             ...
Homework (5)1.    Create the following HTML 5 Page      Do it without tables                                             ...
Upcoming SlideShare
Loading in...5
×

CSS Layout

617

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

CSS Layout

  1. 1. CSS LayoutDoncho MinkovTechnical Trainerhttp://minkov.itTelerik Web Design Coursehtml5course.telerik.com
  2. 2. Table of Contents Positioning  Positioning inline elements Floating  Left and right  Clearing Opacity Visibility Display 2
  3. 3. Positioning
  4. 4. Positioning position: defines the positioning of the element in the page content flow The value is one of:  static (default)  relative – relative position according to where the element would appear with static position  absolute – position according to the innermost positioned parent element  fixed – same as absolute, but ignores page scrolling 4
  5. 5. Positioning (2) Margin VS relative positioning Fixed and absolutely positioned elements do not influence the page normal flow and usually stay on top of other elements  Their position and size is ignored when calculating the size of parent element or position of surrounding elements  Overlaid according to their z-index  Inline fixed or absolutely positioned elements can apply height like block-level elements 5
  6. 6. Positioning (3) top, left, bottom, right: specifies offset of absolute/fixed/relative positioned element as numerical values z-index : specifies the stack level of positioned elements  Understanding stacking context Each positioned element creates a stacking context. Elements in different stacking contexts are overlapped according to the stacking order of their containers. For example, there is no way for #A1 and #A2 (children of #A) to be placed over #B without increasing the z-index of #A. 6
  7. 7. Positioning Live Demopositioning-rules.html
  8. 8. Inline element positioning vertical-align: sets the vertical-alignment of an inline element, according to the line height  Values: baseline, sub, super, top, text-top, middle, bottom, text-bottom or numeric  Also used for content of table cells (which apply middle alignment by default) 8
  9. 9. Alignment and Z-Index Live Demoalignments-and-z-index-rules.html
  10. 10. Floating
  11. 11. Float float: the element “floats” to one side  left: places the element on the left and following content on the right  right: places the element on the right and following content on the left  floated elements should come before the content that will wrap around them in the code  margins of floated elements do not collapse  floated inline elements can apply height 11
  12. 12. Float (2) How floated elements are positioned 12
  13. 13. Clear clear  Sets the sides of the element where other floating elements are NOT allowed  Used to "drop" elements below floated ones or expand a container, which contains only floated children  Possible values: left, right, both Clearing floats  additional element (<div>) with a clear style 13
  14. 14. Clear (2) Clearing floats (continued)  :after { content: ""; display: block; clear: both; height: 0; }  Triggering hasLayout in IE expands a container of floated elements  display: inline-block;  zoom: 1; 14
  15. 15. Floating Elements Live Demo float-rules.html
  16. 16. Opacity
  17. 17. Opacity opacity: specifies the opacity of the element  Floating point number from 0 to 1  For old Mozilla browsers use –moz-opacity  For IE use filter:alpha(opacity=value) where value is from 0 to 100; also, "binary and script behaviors" must be enabled and hasLayout must be triggered, e.g. with zoom:1 17
  18. 18. Opacity Live Demoopacity-rule.html
  19. 19. Visibility
  20. 20. Visibility visibility  Determines whether the element is visible  hidden: element is not rendered, but still occupies place on the page (similar to opacity:0)  visible: element is rendered normally 20
  21. 21. Visibility Live Demovisibility-rule.html
  22. 22. Display
  23. 23. Display display: controls the display of the element and the way it is rendered and if breaks should be placed before and after the element  inline: no breaks are placed before and after (<span> is an inline element)  block: breaks are placed before AND after the element (<div> is a block element) 23
  24. 24. Display (2) display: controls the display of the element and the way it is rendered and if breaks should be placed before and after the element  none: element is hidden and its dimensions are not used to calculate the surrounding elements rendering (differs from visibility: hidden!)  There are some more possible values, but not all browsers support them  Specific displays like table-cell and table-row 24
  25. 25. Display Live Demodisplay-rule.html
  26. 26. CSS Layouthttp://html5course.telerik.com
  27. 27. Homework1. Create the following Web page using HTML and external CSS. Using tables, inline styles and deprecated tags is not allowed. 27
  28. 28. Homework (2)1. Create the following Web page using external CSS styles. Buttons should consist of PNG images with text over them. 28
  29. 29. Homework (3)1. Create the following Web page using HTML with external CSS file. Note that the images should be PNG with transparent background. 29
  30. 30. Homework (4)1. Given the picture below create the Web site  Use CSS and HTML 5 30
  31. 31. Homework (5)1. Create the following HTML 5 Page  Do it without tables 31

×