lecture 12 layout with styles_2008_spr1

8/14/2019 Lecture 12 Layout With Styles_2008_Spr1

1/18

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/18

Lecture 12 Layout with Styles


3/18

Introduction

Over the previous 4 Lectures, we have discussed CSS: Lecture 8: Style Creation

Targeting Elements via the Selector

Lecture 9: Style Application via External and Internal Sheets, and Local Styles,

And the Cascade.

Lectures 10-11: Formatting with Styles Formatting Font Properties and CSS Colors (L10) Formatting Text Properties (L11)

In this Lecture, we continue our discussion of CSS: 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.


4/18

Layout With Styles

We have already seen several old school layout methods:

Layout with Tables

Where we may create box-like layouts using Cells and Column Groups.

Layout with Frames (not yet supported in XHTML 1.1) Where we place multiple html pages in a single organized Frameset

CSS also supports sophisticated layout-creation capabilities. Layout with Styles has several advantages:

1. Supports creation ofLiquid layouts: Layouts that expand or contract smoothly, with the visitors monitor

2. Allows Global control and application of your layout: Layouts that can be quickly applied to an entire site, at once.

Excellent maintenance, reusability, and portability.

3. Produces smallertotal file sizes: Result: faster visitor viewing.

4. IsRequiredfor Professional Web Designers: Since XHTML/CSS is the current standard

As well as a current modest disadvantage:

Older Browsers do not support it (also, IE6 provides imperfect support).


5/18

The Importance of Page Structuring

Recall the main point of using XHTML/CSS:

To separate formatting from content and structure

to achieve logical simplicity.

This frees your page from rigid, local instructions. And gives you the freedom to organize simply and logically.

CSS formatting thus begins with properpage structure: This is established prior to applying styles.

Basically: A well-structured document is easy to format with CSS.

Use the following guides, when you structure your pages:

1. Use divelements to divide your document into logical elements So that each division is a logically-coherent section.

2. Define your divisions in a logical order

So that if CSS layout is NOT supported, you will degrade gracefully!

3. Use header elements consistently, to identify/prioritize information.

4. Provide comments to explain the meaning of each division

(I will omit these in our example for space reasons)


6/18

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.... Note 2: All style rules used in this example: Will be placed in an internal style sheet, as applied; And thus, are in the document (within a element).


7/18

The Box Model

To 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 the 4 box properties (and parts of properties), individually.

This gives us very nice control over a pages layout.


8/18

Flow

As we discussed earlier, there are two types of element boxes:

Block-level: Elements which generate a new paragraph. In-line: Elements which do not.

This trait governs a pages initial (starting) layout

Initially, block-level elements in a page flow from top to bottom

in the order of appearance in the xhtml document (left-justified). With line breaks at the top/bottom of each Block-level element

This default positioning is called the normal flow.

In our example, all block-level elements are displayed in Flow.

One by one, left-aligned, and from top to bottom


9/18

Positioning Elements in the Flow

There are 4 ways to actively position an element box:

1. Static Positioning (default): Leaving the box in the normal Flow;

2. Absolute Positioning: Removing the box from normal Flow; Specifying the boxs position relative to its parent element;

3. Fixed Positioning:

Removing the box from normal Flow; Specifying the boxs position relative to the browser window;

4. Relative Positioning: Removing the box from normal Flow: Specifying the boxs position relative to its normal in-flow position.

After positioning all elements, some boxes may overlap If so, the order of overlap should be specified:

The z-index (since this is 3-D).

The properties of each box may be individually controlled Space properties: alignment, padding, border, margin;

Appearance: e.g., Overall size, alignment, color, etc


10/18

You may preferentially hide or display particular elements:

Using the display property:

#navigation a{display:block}

The display property can take a variety of values: none: hides the targeted element (and its descendants):

No space will remain where the element would have been.

To keep the space, use: visibility:hidden instead (default val.:visible).

block: displays the element as block-level (new paragraph) However, empty space above and below the elements is not provided.

Above, we display all links in the #navigation division at block-level.

inline: displays the element as inline (no new paragraph);

list-item: displays the element as if the li tag had been used.

Interesting point:

As we noted earlier, Netscape places extra space under images in Table

cells.

This can be eliminated by displaying the images as block-level.

Positioning 1: Displaying/Hiding Elements


11/18


12/18

You may remove an element from the normal flow

And position it relative to the browser window:

Using the property-value pair, position:fixed

#bg {position:fixed;top:250px; left:2% }

#content{position:absolute; top:0px; left:30% }

#navigation{position:fixed;top:10px; left:2% }

#navigation a{display:block}

This is called FixedPositioning.

Again, attribute:value pairs follow, to specify the fixed position.

For each, first type the window side:top, bottom, left, orright

Then, type :v, the desired offset distance from the browser window:

Expressed as an absolute (e.g., 10px) or relative (e.g., 1em) value; Or, as a percentage of the browser window (used for liquid designs).

Here, we switch the #bg and #navigationdivisions to fixed positioning.

Again, for positioning, several property-value pairs work together.

This provides the ideal replacement forFrames

Unfortunately, IE7 supports fixed positioning, but not IE6.

Again, not inherited(but parents/descendants do move together.)

Positioning 3: Affixing an Element


13/18

You may offset an element within the natural flow And position it relative to its original location

(i.e., from where it used to be in the normal flow): Using the property-value pair, position:relative

#bg {position:fixed; top: 250px; left:2% }

#content{position:absolute; top:0px; left:30% }

#navigation{position:fixed; top:10px; left:2% }

#navigation a{display:block}h2,h3{position:relative; left:-15px}

This is called RelativePositioning.

Again, attribute:value pairs follow, to specify the offset. For each, first type:top, bottom, left, orright

Then, type :v, the desired offset distance from the normal, in-flow position. Again, from the indicate edge, and Expressed as an absolute (e.g., 10px) or relative (e.g., 1em) value;

Here, we offset the h2 and h3elements via relative positioning.

Note: surrounding elements are NOT affected AT ALL.

Again, not inherited(but parents/descendants do move together.)

Positioning 4: Offsetting Elements


14/18

As we saw last time, any elements background color may be set: Using the background-colorproperty:

body{background-color:#fff} /** Note the abbreviation: #xxyyzz = #xyz **/

#bg {position:fixed; top: 250px; left:2%; background-color:black}

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

#navigation{position:fixed; top:10px; left:2% }

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

#navigation a:link.current,#navigation a:visited.current{background-color:#ff9}

#navigation a:hover{background-color:#fff}

#navigation a:hover.current{background-color:transparent}

h1{background-color:#339}

To change the background color type the predefined color(e.g., navy), or the color code (#000080)

To specify No color, use the value, transparent (default value).

We also discussed using a background image Last time, our example was a small chess-board, set with:

background-image: url(../Pictures/chessboard.jpeg);

background-position: top right; background-repeat: no-repeat;

background-attachment: fixed;

Note: The background-color property is not inherited.

Format 1: Setting Background Color


15/18

As we also saw last time, any elements foreground color may be set:

Using the colorproperty:

body{background-color:#fff; color:#000}



#navigation{position:fixed; top:10px; left:2%; color:white}



#navigation a:hover{background-color:#fff;color:#339}

#navigation a:hover.current{background-color:transparent; color:#ff9}

h1{background-color:#339; color:#fff}

The colorvalue can be specified using an RGB color, as we saw

earlier:

Note: The color property is inherited.

Format 2: Setting Foreground Color


16/18

CSS also lets you choose which cursor is displayed (and when):

Using the cursorproperty:

body{background-color:#fff; color:#000}



#navigation{position:fixed; top:10px; left:2%; color:white}



#navigation a:hover{background-color:#fff;color:#339}

#navigation a:hover.current{background-color:transparent;

color:#ff9;cursor:default}

h1{background-color:#339; color:#fff}

The cursorproperty can take a number of values:

pointerspecifies a hand-cursor, which is normal for a link ( )

default specifies an arrow ( )

Others: crosshair( ), move ( ), wait ( ), and help ( );

auto: specifies using the usual cursor for the situation.

Layout 1: Choosing the Cursor


17/18

Summary*

In this Lecture, we have discussed Layout with Styles:

1. The Box Model of element structure And the position of elements the natural flow.

2. Removing elements from the flow, and re-positioning via: Absolute positioning (relative to the parent element); Fixed positioning (relative to the browser window); Relative positioning (relative to the normal position in the flow).

3. Setting element background colorand foreground color

4. Cursorselection.

In the next Lecture, we continue our treatment of CSS Layout: 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.


18/18

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 12 layout with styles_2008_spr1

Documents