CONTROLLING Page layout 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
Box Model Layout
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.
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
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;
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 10 Element 2 margin 5 Result margin 10 (border to border) 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
Box Model – Example <head> <style> h1 { border:15px solid blue; margin:20px; padding:20px; width:200px; } </style> </head> <body> <h1>CIS133</h1>
A few more items on the box model and css shorthand 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.
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; }
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; }
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;
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
Relative Positioning (continued) X
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
Absolute Positioning (continued)
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
Stacking Positioned Elements
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
Comparing multicolumn layout methods
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
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” Other elements reflow into space that would have been occupied by invisible element
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.