Lecture 13 - Layout With Styles (2)_2008_sp1

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.

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 by Midnight on Monday, Jun 2 : 1. By upload, to the Final Project folder of this class’s 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’

Lecture 13 – Layout with Styles (2)

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 element box properties: 

 

Setting element size (height and width) Positioning elements in 3D 

 

Border, Padding, and Margin widths;

Via the z-index.

Controlling Overflow Making elements Float 

in a ‘sea of text’.

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....

The Box Model (Let’s 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 page’s layout. 

Box Format 1: Setting the Border 

You may create a border around an element… 

And set its style, width, and/or color, using the border property. #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: 



The border-width property sets the border thickness: 



  

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: 



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 style’s effect. 



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… 



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

The border-color property sets the border’s color: 



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

Here, e = {width, style, color} (Ex: border-style; border-left-style)

Note: Borders are not inherited.

Box Format 2: Setting the Padding 

You may set the space between an element’s 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-ground’s 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 element’s 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 3: Setting the Margins 

The amount of transparent space between elements… 

May be set using the margin property. 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;} #navigation a{display:block; text-decoration:none; color:#fff; 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 element’s 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. 



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… 



See last page to review the behavior.

Will collapse to the value of the larger margin when stacked.

Note: Margins are not inherited.

Box Format 4: Setting the Height/Width 

The height and width of elements, including images and text blocks… 

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%} 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}



Values are specified as usual for a length: Using either absolute units (e.g., 100px);  or relative units (e.g., 0.1em, 10% (of the parent element’s 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 5: 3D Positioning 

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} #navigation a{display:block; text-decoration:none; color:#fff; padding-left:10px; padding-right:10px;} #navigation{width:27%; z-index:3} 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}



Here, larger z-index values are at a higher level in the ‘stack’: 

Thus, the z-index is a measure of elevation. 



If you have nested z-indices, the ordering becomes hierarchical ...  



Both positive and negative values may be used (only relative values count); 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 6: Overflow 

Occasionally, an element may not be contained in its parent’s box… 

For instance, consider the guest student, shown below... h2{margin:0} h3{margin:15px 0 0 0} p{margin:5px 0} #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 (cont.) 

However, consider when space becomes limited… 

And the extra width and height are lost... h2{margin:0} h3{margin:15px 0 0 0} p{margin:5px 0} #guest img{background:#339; padding:5px; margin-left:5px;width:100px border:1px solid black; margin-top:7px;} #guest{width:140px; height:100px;overflow:auto; background:purple



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

That is…the image part that is ‘out of the box’… 





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 of auto was selected, which provides scrollbars… 



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

Necessary for the height only.

Box Format 7: Making Elements Float 

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; border:1px solid black; margin-top:7px;} #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… 



The trick to making an element float inside of content: 



Always place the element directly before the content to be floated into/on.

The clear property can be used repel floating elements… 



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

Values of right, left, both, or none keep the indicated sides clear of floating elements.

Note: The float property is not inherited.

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. 



Nice for demonstration; However, not so robust to browser re-sizing. 



‘fluid layout’ refers to the use of %-values for positioning and sizing. Best only when the browser window size is set appropriately.

Version 2: Non-fluid layout 

Uses absolute (pixel) values for positioning the div’s. 



Much nicer behavior (layout robust to browser window resizing).

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

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.