Laying out Elements with CSS Unit D Laying out Elements with CSS
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
The CSS box model
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 properties
Commonly used CSS units of measure Relative units: ems, percent, rems Absolute units: pixels Commonly used CSS units of measure
Calculating web page space occupied by an element
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
Set Margins and Padding Use the shorthand property to assign multiple values Separate each value with a space Meaning of different number of values Assign auto to left and right margins to center the element horizontally.
Specific properties for the box model Reset rule: resets one or more common properties to a common baseline, e.g. border: 0;
Box Model – Example <head> <style> h1 { border:15px solid blue; margin:20px; padding:20px; width:200px; } </style> </head> <body> <h1>CIS133</h1>
Code with width and border declarations
width and border declarations rendered in a browser and developer tools opened to show box model
Example of padding using three values and margin using two values Example of margin set to auto
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
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.
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
Align Elements with float Page flow: the order of elements in the HTML document User agents render HTML top to bottom Easy to create layouts with elements stacked vertically Use float, clear, and width properties to create columns of text and graphics parallel to each other Use width property to assign width to each of the columns
Example of float applied to element Use float to create multicolumn layouts
Code with float and result in browser
Control Page Flow with clear float gives basic control over layout clear gives more precise control Prevents floated elements from being displayed to the left, right, or on the side of another element clear property values
Example of clear property
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:
Without float <h3>Without float</h3> <figure><img src="poles.jpg" alt="Agility poles"></figure> <p>Weave poles are a series of 5 to 12 upright poles, each about 3 feet tall and spaced about 24 inches apart. The dog must always enter with the first pole to his left, and must not skip poles. For many dogs, weave poles are one of the most difficult obstacles to master.</p>
Float Left p {padding: 5px;} figure {float: left;}
Float Right p {padding: 5px;} figure {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;
Part Two
Example of clear property
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
Commonly used position properties Positioning Commonly used position properties
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
This is important so one more time 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 the properties left and right for horizontal positioning top and bottom for vertical positioning
Implementing relative positioning and page flow
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 example
This is important so one more time 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 and page flow
Code to absolutely position an element and the result in a browser
CSS Absolute and Relative Positioning Tutorial
Implement Fixed Positioning fixed positioning keeps an element in the same location, even when the page is scrolled Use the position property with the value of fixed Then specify Horizontal position using left or right Vertical positing using top or bottom
Properties and values for fixed positioning
Implement Fixed Positioning
Control stacking order Stacking elements: positioning elements so that they can overlap 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
When numbering z-index it is best to use multiples of 10. Why? Z-Index CSS Tutorial
What do you call each of the items below?
I want everyone named Jones I want everyone named Jones. I want everyone named Jones who lives in Glendale. I want everyone named Jones who lives in Glendale who drives a truck.
Specifying your selection Select the paragraph elements. p {….} Select the paragraph elements nested in the article element. article p {…} Select the paragraph elements nested in the article element with the class of imp. article p.imp {…}
3
2
Last one