Download - CONTROLLING Page layout
![Page 1: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/1.jpg)
Lesson 8 – Unit H
CONTROLLING PAGE LAYOUT
![Page 2: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/2.jpg)
![Page 3: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/3.jpg)
The Box Model Box model: used by CSS to represent characteristics of every Web page element◦Treats element as rectangular box ◦Border: border surrounding element◦Margin: space from border to neighboring/parent element◦Padding: space between border and element content
3
![Page 4: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/4.jpg)
Box Model Layout
4
![Page 5: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/5.jpg)
Box Model – Sizing it up Size of padding, margin, and border increase the amount of space occupied by an element. Dimensions of these properties not included in specified width / height. Specified width and height refer only to the content of an element.
5
![Page 6: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/6.jpg)
What is the size of this example?
30 top margin 30 top border 30 top padding 80 content width 30 bottom padding 30 bottom border 30 bottom margin Add them all up and you get: 260
6
![Page 7: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/7.jpg)
Box Model – Sizing it up When fitting elements into limited space, subtract padding, margin, and border area to get width or height.Separate property for each side of padding and margin◦e.g., padding-top:7px; margin-right:2em;
Can set a common value using generic property◦e.g., padding:5;
7
![Page 8: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/8.jpg)
Box Model – Collapse When bottom margin of one element is adjacent to top margin of another, the margins are combine to the size of the larger of the two.
Element 1 margin 10Element 2 margin 5 Result margin 10 (border to border)
8
Element 1
Element 2
{
![Page 9: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/9.jpg)
Box Model – Specify Values Can use shorthand to set different values.◦e.g., margin: 1em 2em 1em 3em◦Values applied clockwise, first value for top
◦If less than four values provided:◦Three values: top, left and right, bottom◦Two values: top and bottom, left and right
9
![Page 10: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/10.jpg)
Box Model – Example <head> <style> h1 { border:15px solid blue; margin:20px; padding:20px; width:200px; } </style> </head> <body> <h1>CIS133</h1>
10
![Page 11: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/11.jpg)
A few more items on the box model and css shorthand.HTML5 Semantic Elements
![Page 12: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/12.jpg)
Multicolumn Layout with Float Since html code is rendered from the top down it is easy to create layouts with elements stacked vertically. Use float, clear, and width properties to create columns of text and graphic parallel to each other. Use width property to assign width to each of the columns.
12
![Page 13: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/13.jpg)
Float
An element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts.Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.The elements after the floating element will flow around it. The elements before the floating element will not be affected.If an image is floated to the right, a following text flows around it, to the left:img { float: right; }
13
![Page 14: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/14.jpg)
Float and Clear If you place several floating elements after each other, they will float next to each other if there is room.
Here we have made an image gallery using the float property:
.thumbnail { float:left; width:110px; height:90px; margin:5px; }
Elements after the floating element will flow around it. To avoid this, use the clear property.
The clear property specifies which sides of an element other floating elements are not allowed.
Add a text line into the image gallery, using the clear property:
.text_line { clear: both; }
14
![Page 15: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/15.jpg)
article, body, dd, div, dl, dt, figcaption, figure, footer, h1, h2, h3, li, nav, ol, p, section, table, th, td, ul { margin: 0; padding: 0; } :#content { display: block; float: right; width: 32em; }#content p { margin: 0.5em 0; } :#mainnav { text-align: left; padding: 0.25em; padding-left: 0.5em; float: left; width: 7em; position: absolute; left: 15px; }#mainnav a { text-decoration: none; }#mainnav li { list-style-type: none; padding: 0.25em 1em; margin: 0.25em 0; background: #B8944D;
15
![Page 16: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/16.jpg)
Relative Positioning Page flow: the order of elements in the HTML document Relative positioning: adjusting default position of an element◦Preserves space allotted to element in default page flow◦Set position property to “relative”◦Style exact location using left and top properties
16
![Page 17: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/17.jpg)
Relative Positioning (continued)
17
X
![Page 18: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/18.jpg)
Absolute Positioning
Absolute positioning: takes element out of page flow entirely◦Allows other elements to flow into space element would have occupied
◦Set position property to “absolute”◦Style exact location using left, right, top, and bottom properties
◦Location is calculated relative to closest ancestor element that has position applied to it
18
![Page 19: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/19.jpg)
Absolute Positioning (continued)
19
![Page 20: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/20.jpg)
CSS Absolute and Relative Positioning Tutorial
![Page 21: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/21.jpg)
Stacking Elements Stacking elements: positioning two elements so that they can overlap on a Web page◦Additional possibilities for layouts◦Applies only to positioned element◦Elements placed in new layer◦Requires careful planning
Stacking order controlled by values assigned to z-index property
21
![Page 22: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/22.jpg)
Stacking Positioned Elements
22
![Page 23: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/23.jpg)
Z-Index CSS Tutorial
![Page 24: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/24.jpg)
Multicolumn Layout Using Positioning
Can use positioning to create multicolumn layouts◦Look and behave just like float multicolumn layouts◦More flexible for 3-column, allows for 4-column layouts
Can position both columns, or position one and let the other flow around it◦Leave large enough margin for positioned element
24
![Page 25: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/25.jpg)
Comparing multicolumn layout methods
25
![Page 26: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/26.jpg)
Fluid Layout Fixed layout: specifying a fixed width for Web page content◦Ensure consistency of visual design on different window sizes and resolutions
Fluid layout: gives Web page flexibility to adjust its width while maintaining intended layout◦A.k.a. Liquid layout◦Uses min-width and max-width properties
26
![Page 27: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/27.jpg)
27
Web page at different widths
![Page 28: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/28.jpg)
Controlling the Visibility of Elements
You can use CSS to style whether element is displayed◦Set visibility property to “hidden”◦Element content not visible◦Space reserved for invisible element
◦Set display property to “none”◦Element content not visible◦Other elements reflow into space that would have been occupied by invisible element
28
![Page 29: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/29.jpg)
29
Alternatives for hiding Web page elements
![Page 30: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/30.jpg)
HTML5 Structure Elements<header>: Used to contain the header content of a site.<footer>: Contains the footer content of a site.<nav>: Contains the navigation menu, or other navigation functionality for the page.<article>: Contains a standalone piece of content that would make sense if syndicated as an RSS item, for example a news item.<section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.<aside>: Defines a block of content that is related to the main content around it, but not central to the flow of it.
![Page 31: CONTROLLING Page layout](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1b197f8b9ab059992bbc/html5/thumbnails/31.jpg)