lecture 13 - layout with styles (2)_2008_sp1

8/14/2019 Lecture 13 - Layout With Styles (2)_2008_SP1

1/16

Course Final Exam (Mandatory)

*YOU MUST TAKE THE FINAL.*

Students who do not attend will be assigned a grade of F for this course.

Time: Tuesday Jun 3, Exam Period 1 Place: IPS8 Students must bring their ID to enter the room to take the Exam. Students who are more than 20 min late will not be admitted.

The FINAL EXAM will cover all of CSS

[1] CSS Basics:(a) Style Rules and Style Rule Construction.

(b) Targeting elements by: Name, Class, ID, Context, State, etc

(c) Internal Style Sheets, etc.

[2] External Style Sheets, Alternate Sheets, and the Cascade

[3] Formatting with CSS:(a) Font characteristics: font-families, sizes, etc.

(b) Text characteristics: text and background colors, spacing, etc.

[4] Layout with CSS:

(a) Basics, including the Flow, the Box Model, etc

(b)Absolute, Fixed, and Relative Positioning.

[5] XHTML: questions will assume appropriate XHTML knowledge.


2/16

Course Project (continued)Task: Apply CSS to the Web Directory you created for Mid-term:

[1] Formatting with CSS: Create a set of style rules which specify:

(a) Font characteristics of your site: font-families, sizes, etc.(b) Text characteristics of your site: text and background colors, spacing, etc.

(c) Demonstrate targeting elements by: Name, Class, ID, Context, and State.

[2] Style Application: Create a set of sheets to apply your style-rules:

(a) An External style sheet containing a common set of styles: To provide a common look and feel for the pages in your directory.

(b) An Internal style sheet for each page, containing page-specific styles: To provide central control for page-by-page variations.

[3] Layout with CSS: Create a new page for your directory, in which you:

(a) Define multiple divisions, and set the page layout with CSS By moving the elements out of the normal flow.

(b) Demonstrate at least 2 of: Absolute, Fixed, and Relative Positioning.

[4] Include a 1-2 page Word file, explaining your CSS format/layout: Describing how each above requirement (1a-c; 2a-b; 3a-b) is fulfilled.

Submit byMidnight on Monday, Jun 2 :

1. By upload, to the Final Project folder of this classs Submit Folder.

Name your submission using your Last Name, Student ID, and the word, Final.

I will prepare a folder for you called Spring 2008 Final Project


3/16

Lecture 13 Layout with Styles (2)


4/16

Introduction

In the last Lecture, we began our discussion of CSS Layout:

Lecture 12: Layout with Styles Positioning elements in the Flow and the Box Model In the context of a detailed, step-by-step example:

A simple DNA Computing Web-page.

In this Lecture, we continue our treatment:

Setting elementbox properties:

Border, Padding, and Margin widths;

Setting element size (height and width)

Positioning elements in 3D

Via the z-index. Controlling Overflow

Making elements Float

in a sea of text.


5/16

XHTML Code for Examples We will be using the XHTML code shown below for examples:

Note 1: The text (body) continues past the illustrated code....


6/16

The Box Model (Lets Review)

Recall that in CSS every element in an xhtml page is enclosed

by an invisible, multi-layered box:

From the inside-out, these 4 properties are: Content: The central portion, which contains the element;

Padding: The space surrounding the content;

Border: The outside edge of the padding;

Margin: The space surrounding the border.

Together, these determine the size of an element.

Note: We have seen this before, with table data cells

For each element, we can control the size and position of each

box.

And each of these box properties (and parts of properties), individually.

This gives us very nice control over a pages layout.


7/16

You may create a border around an element And set its style, width, and/or color, using the borderproperty.

#content{position:absolute; top:0px; left:30%; background-color:#fff; border-left:1px solid black}

First type border, then specify one or more of: The border-style property defines the border style:

Values: none (default),dashed, solid, double, groove,ridge, inset, oroutset.

The border-width property sets the border thickness: Value is the desired width, using the usual units (e.g., border-width: 4px)

The border-colorproperty sets the borders color: Value is a color name, or rgb color (e.g., border-color: red);

Note: Individual border properties (e.g., border-style) take 1 to 4 values If you specify 1 value only, it is applied to all 4 sides. 2 values are applied to top/bottom and right/left, respectively. 3 values are applied to the top, right/left, and bottom respectively. 4 values are applied to the top, right, bottom, and left (clockwise).

If desired, a suffix, -l may be applied to localize the styles effect. Here, l = {top, bottom, right, left} (Ex, border-left:1px solid black)

A 2nd suffix, -e may also be used to specify a single effect only: Here, e = {width, style, color} (Ex: border-style; border-left-style)

Note: Borders are not inherited.

Box Format 1: Setting the Border


8/16

You may set the space between an elements content and border using the padding property.

body{background-color:#fff; color:#000; padding:0;}#content{position:absolute; top:0px; left:30%; background-color:#fff;

border-left:1px solid black;padding:20px;}

#navigation a{display:block; text-decoration:none; color:#fff;

padding-left:10px; padding-right:10px;}

h1{background-color:#339; color:#fff; padding:0 10px;}

Note: you may change the padding thickness, but not the color. The color will be the back-grounds color.

The padding value specifies the desired padding width: In absolute units (e.g., 10px); Or in relative units (e.g., 0.1em, 10% (of the parent elements width)).

Similar to the border property, the padding may take from 1 to 4 values. See last page to review the behavior. Note: the last two styles in the above example are equivalent.

You may also add a suffix to apply padding to a single side only: padding-top, padding-right, padding-left, padding-bottom.

Note: Padding is not inherited.

Box Format 2: Setting the Padding


9/16

The amount of transparent space between elements May be set using the margin property.

body{background-color:#fff; color:#000; padding:0;margin: 00 0 0}#content{position:absolute; top:0px; left:30%; background-color:#fff;

border-left:1px solid black; padding:20px;}


padding-left:10px; padding-right:10px;}

h1{background-color:#339; color:#fff; padding:0 10px;margin-top:10px}

h2{margin:0} h3{margin:15px 0 0 0} p{margin:5px 0}

The margin value specifies the desired margin width: In absolute units (e.g., 10px); or relative units (e.g., 0.1em, 10% (of the parent elements width)). Or you may use auto, which centers the element in the available space.

Similar to the border property, the margin may take from 1 to 4 values. See last page to review the behavior.

You may also add a suffix to apply margin to a single side only: margin-top, margin-right, margin-left, margin-bottom.

Note: The margins of several elements with non-zero margins Will collapse to the value of the larger margin when stacked.

Note: Margins are not inherited.

Box Format 3: Setting the Margins


10/16

The height and width of elements, including images and textblocks

May be set using the height and width properties.

body{background-color:#fff; color:#000; padding:0;margin: 0 0 0 0}#content{position:absolute; top:0px; left:30%; background-color:#fff;

border-left:1px solid black; padding:20px;}

#bg{positioning:fixed; top:0px; left:0%} #bg img{width:290px; height:700px}

#navigation a{display:block; text-decoration:none; color:#fff;padding-left:10px; padding-right:10px;}

#navigation{width:27%}



Values are specified as usual for a length: Using eitherabsolute units (e.g., 100px); orrelative units (e.g., 0.1em, 10% (of the parent elements width)). You may also use auto, to let the browser calculate the value.

This is intuitive: width = parent block width (margins + padding + border)

Note: With width / height, you are setting the content size.

If you manually set the box-sizes to be larger than the parent box The browser will over-ride you, and re-set the margins to try to fit.

Box Format 4: Setting the Height/Width


11/16

You may control the 3-D positioning of overlapping elements By setting the z-index properties of each division.

body{background-color:#fff; color:#000; padding:0;margin: 0 0 0 0}#content{position:absolute; top:0px; left:30%; background-color:#fff;

border-left:1px solid black; padding:20px; z-index:2}

#bg{positioning:absolute; top:0px; left:0%; z-index:1}

#bg img{width:290px; height:700px} #bg{positioning:fixed; top:0px; left:0%}

#bg img{width:290px; height:700px}


padding-left:10px; padding-right:10px;}#navigation{width:27%;z-index:3}



Here, largerz-index values are at a higher level in the stack: Thus, the z-index is a measure of elevation.

Both positive and negative values may be used (only relative values count); If you have nested z-indices, the ordering becomes hierarchical ...

Indices defined at a high level (i.e., divs) set relative group height orderings; Indices defined at a lower level (i.e., sub-div) set heights within each group;

Note: The z-index property is not inherited.

Box Format 5: 3D Positioning


12/16

Occasionally, an element may not be contained in its parents box

For instance, consider the guest student, shown below...


#guest img{background:#339; padding:5px; margin-left:5px; width:100px;

border:1px solid black; margin-top:7px;}

#guest{width:200px; height:200px; background:purple}

At first, our guest has no trouble... As plenty of space in the parent division (#guest) has been allocated for

him

Box Format 6: Overflow


13/16

However, consider when space becomes limited

And the extra width and height are lost...


#guest img{background:#339; padding:5px; margin-left:5px;width:100px


#guest{width:140px; height:100px;overflow:auto; background:purple

Using the overflow property, we may still allow visitors to see our

guest... That isthe image part that is out of the box

(i.e., too large to fit in the parent #guest division);

While also satisfying the new space limitations.

In particular, the overflow property allows us to handle overflow.

A value of: visible demands that we expand the parent element to allow a fit;

hidden specifies that we hide any portions which are too large;

scroll provides scrollbars (always) to allow free access;

auto provides scrollbars, but only when necessary.

In our case, the value ofauto was selected, which provides scrollbars

Necessary for the height only.

Box Format 6: Overflow (cont.)


14/16

You may make an element appear to float in a sea of text Using the float property.

h2{margin:0} h3{margin:15px 0 0 0} p{margin:5px 0}#guest img{background:#339; padding:5px; margin-left:5px;


#guest{width:140px; height:100px;overflow:auto; background:purple; float:right}

To wrap text around elements: Use the value, left to float the element to the far left; Use the value, right to float the element to the far right.

A few points: This does not provide the exquisite control we are used to with CSS

Furthermore, floating tends to be a bit buggy with browsers.

The trick to making an element float inside of content: Always place the element directly before the content to be floated into/on.

The clearproperty can be used repel floating elements Values ofright, left, both, ornone keep the indicated sides clear of floating

elements.

Note: The float property is not inherited.

Box Format 7: Making Elements Float


15/16

Example Code Available

You may obtain the xhtml/css code for my example: In the folder Examples

This folder contains two versions of the example:

Version 1: Fluid layout The example, just as we did it in class.

fluid layout refers to the use of %-values for positioning and sizing.

Nice for demonstration; However, not so robust to browser re-sizing. Best only when the browser window size is set appropriately.

Version 2: Non-fluid layout

Uses absolute (pixel) values for positioning the divs. Much nicer behavior (layout robust to browser window resizing).

Paragraph text also justified ( #content p{text-align:justify} )


16/16

Course Final Exam (Mandatory)

*YOU MUST TAKE THE FINAL.*

Students who do not attend will be assigned a grade of F for this course.

Time: Tuesday Jun 3, Exam Period 1 Place: IPS8 Students must bring their ID to enter the room to take the Exam. Students who are more than 20 min late will not be admitted.

The FINAL EXAM will cover all of CSS

[1] CSS Basics:(a) Style Rules and Style Rule Construction.

(b) Targeting elements by: Name, Class, ID, Context, State, etc

(c) Internal Style Sheets, etc.

[2] External Style Sheets, Alternate Sheets, and the Cascade

[3] Formatting with CSS:(a) Font characteristics: font-families, sizes, etc.

(b) Text characteristics: text and background colors, spacing, etc.[4] Layout with CSS:

(a) Basics, including the Flow, the Box Model, etc

(b)Absolute, Fixed, and Relative Positioning.

[5] XHTML: questions will assume appropriate XHTML knowledge.

lecture 13 - layout with styles (2)_2008_sp1

Documents