lesson 8 – unit h controlling page layout. the box model box model: used by css to represent...
TRANSCRIPT
Lesson 8 – Unit H
CONTROLLING PAGE LAYOUT
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
Box Model Layout
4
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
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:
2606
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
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
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
Box Model – Example
<head> <style> h1 { border:15px solid blue; margin:20px; padding:20px; width:200px; } </style> </head> <body> <h1>CIS133</h1>
10
A few more items on the box model and css shorthand.
HTML5 Semantic Elements
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
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
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
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
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
Relative Positioning (continued)
17
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
Absolute Positioning (continued)
19
CSS Absolute and Relative Positioning Tutorial
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
Stacking Positioned Elements
22
Z-Index CSS Tutorial
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
Comparing multicolumn layout methods
25
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
27
Web page at different widths
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
29
Alternatives for hiding Web page elements
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.
