Download presentation
Presentation is loading. Please wait.
1
Laying out Elements with CSS
Unit D Laying out Elements with CSS
3
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
4
The CSS box model
5
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.
6
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
7
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;
8
Box model properties
9
Commonly used CSS units of measure
Relative units: ems, percent, rems Absolute units: pixels Commonly used CSS units of measure
10
Calculating web page space occupied
by an element
11
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
12
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.
13
Specific properties for the box model
Reset rule: resets one or more common properties to a common baseline, e.g. border: 0;
14
Box Model – Example <head> <style> h1 {
border:15px solid blue; margin:20px; padding:20px; width:200px; } </style> </head> <body> <h1>CIS133</h1>
15
Code with width and border declarations
16
width and border declarations rendered in a browser and developer tools opened to show box model
17
Example of padding using three values and margin using two values
Example of margin set to auto
18
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
19
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
20
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.
21
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
22
Comparing multicolumn layout methods
23
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
24
Example of float applied to element
Use float to create multicolumn layouts
25
Code with float and result in browser
27
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
28
Example of clear property
29
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:
30
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>
31
Float Left p {padding: 5px;} figure {float: left;}
32
Float Right p {padding: 5px;} figure {float: right;}
33
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; }
34
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;
35
Part Two
36
Example of clear property
38
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
39
Web page at different widths
40
Commonly used position properties
Positioning Commonly used position properties
41
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
42
Relative Positioning (continued)
X
43
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
44
Implementing relative positioning
and page flow
46
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
47
Absolute Positioning example
48
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
49
Absolute positioning and page flow
50
Code to absolutely position an element and the result in a browser
51
CSS Absolute and Relative Positioning Tutorial
52
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
53
Properties and values for fixed positioning
54
Implement Fixed Positioning
56
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
57
Stacking positioned elements
59
When numbering z-index it is best to use multiples of 10. Why?
Z-Index CSS Tutorial
60
What do you call each of the items below?
61
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.
62
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 {…}
63
3
64
2
65
Last one
Similar presentations
