Audio blog:
http://yourlisten.com/channel/content/16906278/css1
BOX model:
The BOX model is used to style elements to specific positions in the screen while using CSS.The above diagram describes about how the page is divided into.The respective wisths are given for each section.Padding is the distance between the border of the element and the content in the element.If the padding border is 0,it is the same as the content border.How we set the widths of these determine the layout of the page perfectly.
-->The margin is the distance outside the given element on all the sides.It is transparent.
-->The border is the border of the element .It has attributes like style,width,color etc..
-->The padding is the distance inside the element to its content on all four sides.
All the sections in the diagram above can set the top,right ,bottom or left widths.They can be either set to fixed widths or in % s.
Positioning of Each an every element you keep in the screen will be placed in this box .The positioning can be either relative ,absolute or fixed.
Fixed positioning:
You would have seen certain web pages where even when you scroll certain elements will stay in the same place irrespective of scrolling.This is achieved by fixed positioning.
Absolute positioning:In this the position is selected with respect to its parent element.If it is the most outermost element then the measurement will be taken with respect to the total screen width.
eg)
#sec1.sec2{
position:absolute;
top:100px
left:80px
}
In this the elements within sec2 class which is in sec1 id will be at a distance of 100px from top and 80px from left wrt the top and left of the 'sec1' id.
Relative positioning:
Initially these elements are laid out in a static way.Now if you want to move it wrt to its original position use the "relative".This is generally used when you want to move it to certain small measurements from its initial positions.
Suiting all devices:
While designing a page it should be designed to suit devices of all screen size.
Fixed design:
-->Used when all elements must be fixed in locations of the screen.
Fluid Design:
-->While specifying widths it is good to give it in %'s ,so that it will take a percentage of what is totally available.
Elastic Design:
-->Combination of both.Specified in em(square of font size).Page changes as the font size increases.User friendly.Elements which should catch user attention is highlighted.
CSS HACKS:
I have specified examples of this in the browser specific tags.It is exploiting the weakness or the bugs of a browser.It is actually not good to use ,because in forthcoming versions the bug will be removed and the layout will be out of place.
- Sourcebits University
Cloud Computing
www.sourcebits.com
http://yourlisten.com/channel/content/16906278/css1
BOX model:
The BOX model is used to style elements to specific positions in the screen while using CSS.The above diagram describes about how the page is divided into.The respective wisths are given for each section.Padding is the distance between the border of the element and the content in the element.If the padding border is 0,it is the same as the content border.How we set the widths of these determine the layout of the page perfectly.
-->The margin is the distance outside the given element on all the sides.It is transparent.
-->The border is the border of the element .It has attributes like style,width,color etc..
-->The padding is the distance inside the element to its content on all four sides.
All the sections in the diagram above can set the top,right ,bottom or left widths.They can be either set to fixed widths or in % s.
Positioning of Each an every element you keep in the screen will be placed in this box .The positioning can be either relative ,absolute or fixed.
Fixed positioning:
You would have seen certain web pages where even when you scroll certain elements will stay in the same place irrespective of scrolling.This is achieved by fixed positioning.
Absolute positioning:In this the position is selected with respect to its parent element.If it is the most outermost element then the measurement will be taken with respect to the total screen width.
eg)
#sec1.sec2{
position:absolute;
top:100px
left:80px
}
In this the elements within sec2 class which is in sec1 id will be at a distance of 100px from top and 80px from left wrt the top and left of the 'sec1' id.
Relative positioning:
Initially these elements are laid out in a static way.Now if you want to move it wrt to its original position use the "relative".This is generally used when you want to move it to certain small measurements from its initial positions.
Suiting all devices:
While designing a page it should be designed to suit devices of all screen size.
Fixed design:
-->Used when all elements must be fixed in locations of the screen.
Fluid Design:
-->While specifying widths it is good to give it in %'s ,so that it will take a percentage of what is totally available.
Elastic Design:
-->Combination of both.Specified in em(square of font size).Page changes as the font size increases.User friendly.Elements which should catch user attention is highlighted.
CSS HACKS:
I have specified examples of this in the browser specific tags.It is exploiting the weakness or the bugs of a browser.It is actually not good to use ,because in forthcoming versions the bug will be removed and the layout will be out of place.
- Sourcebits University
Cloud Computing
www.sourcebits.com
No comments:
Post a Comment