Tut03 Quick Check

What is the difference between a fixed grid and a fluid grid?

In a fixed grid, the grid dimensions use absolute units such as pixels, while with a fluid grid, the dimensions are based on percentages and will change in response to changes in the screen size.

Your layout has four floated elements in a row but unfortunately the last element has wrapped to a new line. What is the source of the layout mistake?

The width of the floated elements exceed the available width of their container.

Provide a style rule to shift the 'aside' element 5% to the right and 10% down from its default position in the document flow.

aside { position: relative; top: 10%; left: 5%; }

Provide a style rule to set the width of the 'aside' element to 240 pixels and to float on the right margin of its container.

aside { width: 240px; float: right; }

Provide a style rule to horizontally center the 'header' element within the 'body' element. Assume that the header is a direct child of the page body.

body > header { margin-left: auto; margin-right: auto; }

Using the proposed specifications for CSS-based grids, create a grid for the 'body' element that has three rows with heights automatically defined by the page content and five columns with widths of 25%, 2.5%, 50%, 2.5%, and 20%. Place the 'nav' element in the first column, the 'article' element in the third column, and the 'aside' element in the fifth column.

body { display: grid; grid-template-rows: auto auto auto; grid-template-columns: 25% 2.5% 50% 2.5% 20%; } nav {grid-column: 1;} article {grid-column: 3;} aside {grid-column: 5;}

Provide a style rule to set the width of the page body to 90% of the browser window ranging from 320 pixels up to 960 pixels.

body { min-width: 320px; max-width: 960px; width: 90%; }

Provide a style rule to place the 'div' element with the id 'graph1' 50 pixels to the right and 15 pixels down from the top-left corner of its container element.

div#graph1 { position: absolute; top: 15px; left: 50px; }

In a proposed grid, all of the grid rows have the class name 'container'. Create a style rule to expand those grid rows around their floating columns.

div.container { content: ""; display: table; clear: both; }

Create a style rule for the grid rows described in question 3 above so that their sizes are measured using the Border Box model.

div.container, div[class^='span-'] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Create a style rule to set the width of columns belonging to the span-4 class to 25% of the row width.

div.span-4 { width: 25%; }

In a proposed grid, the columns all have the class names "span-integer" where 'integer' indicates the size of the column. Create a style rule to float every grid column on the left margin.

div[class^='span-'] { float: left; }

Provide a style rule to change the 'width' property for the 'header' element so that it measures the total width of the header content, padding, and border spaces. Include web extensions for older browsers.

header { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Provide a style rule to prevent the 'header' element from collapsing around its floating content.

header { clear: both; content: ""; display: table; }

Provide a style rule to display all hypertext links within a navigation list as block elements with a gray background.

nav a { display: block; background-color: gray; }

Provide a style rule to set the height of a navigation list with the id 'nav1' to 300 pixels but to be displayed with a scrollbar if there are too many entries to fit within the navigation list's boundaries.

nav#nav1 { height: 300px; overflow: auto; }

One element has a z-index value of 1; a second element has a z-index value of 5. Will the second element always be displayed on top of the first? Explain why or why not.

Only if they share the same parent; otherwise if they are in different containers the z-indexes do not refer to the same stacking order.

Briefly describe the three types of page layouts.

A fixed layout is one in which the size of the page and the size of the page elements are fixed, usually using pixels as the unit of measure. A fluid layout sets the width of page elements based on a percent of the available width. An elastic layout is one in which all measurements are expressed in em units and are based on the default font size used in the page.

What is the difference between relative positioning and absolute positioning?

Relative positioning shifts an object from its default placement in the document flow but it remains part of the document flow. Absolute positioning places the object at specified page coordinates and takes it out of the document flow.

Provide a style rule to display the 'footer' element only after all floated elements have cleared.

footer { clear: both; }

What is a CSS framework?

A CSS framework is a software package that provides a library of tools to design your website, including style sheets for grid layouts and built-in scripts, in order to provide support for a variety of browsers and devices.

What must be true about a container element to have objects positioned absolutely within it?

It must have a position property of relative or absolute.

What is lorem ipsum?

Placeholder text (latin?) used in page design prior to having readily-available text content.

Create a style that adds a 2 pixel green dotted outline around all block quotes in the document.

blockquote { outline: 2px dotted green; }

An inline image with the id 'logo_img' is 400 pixels wide by 300 pixels high. Provide a style rule to clip this image by 10 pixels on each edge.

img#logo_img { clip: rect(10, 390, 290, 10); } (clip is deprecated, use clip-path instead)