Lecture03-Layout.pdf - Page Layout In this lecture we will...

This preview shows 1 out of 8 pages.

Page Layout In this lecture we will discuss the different tools CSS provides for creating a layout. There are a variety of ways to position an element; most of them are based on taking a block level element and placing it in relation to some other block. It is this relationship that becomes the tricky part. The whole is greater than the sum of its parts.
Image of page 1

Subscribe to view the full document.

The CSS Box Model For layout purposes, every element is composed of: The actual element's content A border around the element Padding between the content and the border (inside) A margin between the border and other content (outside) Visual width = content width + L/R padding + L/R border + L/R margin Visual height = content height + T/B padding + T/B border + T/B margin The standard width and height properties refer ONLY to the content's width and height.
Image of page 2
Dimensions For Block elements only , set how wide or tall this element, or set the max/min size of this element in given dimension. width, height, max-width, max-height, min-width, min-height p { width : 350px; } h2 { width : 50%; } Using max-width instead of width in this situation will improve the browser's handling of small windows. This is important when making a site usable on small devices. If width is used, when the browser window is smaller than the width of the element, browser than adds a horizontal scrollbar to the page. Example
Image of page 3

Subscribe to view the full document.

Padding The padding shorthand property sets all the padding properties in one declaration. Padding shares the background color of the element. This property can have from one to four values: padding : 10px5px 15px 20px ; /* Top, right, bottom, left */ padding : 10px5px15px ; /* Top, right and left, bottom */ padding : 10px5px ; /* Top and bottom, right and left */ padding : 10px ; /* All four paddings are 10px */ padding-bottom, padding-left, padding-right, padding-top h1 { padding : 20px; } h2 { padding-left : 200px; padding-top : 30px; }
Image of page 4
Margin Margins are always transparent. This property can have from one to four values: margin : 10px5px 15px 20px ; /* Top, right, bottom, left */ margin : 10px5px15px ; /* Top, right and left, bottom */ margin : 10px5px ; /* Top and bottom, right and left */ margin : 10px ; /* All four margins are 10px */ margin-bottom, margin-left, margin-right, margin-top h1 { margin : 20px; } h2 { margin-left : 200px; margin-top : 30px; }
Image of page 5

Subscribe to view the full document.

Margin Collapse Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins. This does not happen on left or right margins! Only on top and bottom margins! width: 100px; margin: 15px; width: 100px; margin: 5px; 15px width: 100px; margin: 15px; width: 100px; margin: 5px; 20px
Image of page 6