Lecture 12 Layout With Styles_2008_spr1

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

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.

Layout With Styles 

We have already seen several ‘old school’ layout methods: 

Layout with Tables 



Layout with Frames (not yet supported in XHTML 1.1) 



Where we may create box-like layouts using Cells and Column Groups. 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 of Liquid layouts: 

Layouts that expand or contract smoothly, with the visitor’s 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 smaller total file sizes: 

Result: faster visitor viewing.

4. Is Required for 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…).

The Importance of Page Structuring 

Recall the main point of using XHTML/CSS: 

To separate formatting from content and structure… 



This frees your page from rigid, local instructions. 



And gives you the freedom to organize simply and logically.

CSS formatting thus begins with proper page structure: 

This is established prior to applying styles. 



to achieve logical simplicity.

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

Use the following guides, when you structure your pages: 1. Use div elements 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)

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 <style> element).

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 page’s layout. 

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





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

in the order of appearance in the xhtml document (left-justified). 





This trait governs a page’s initial (starting) layout…

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…

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 box’s position relative to its parent element; 

3. Fixed Positioning: Removing the box from normal Flow;  Specifying the box’s position relative to the browser window; 

4. Relative Positioning: Removing the box from normal Flow:  Specifying the box’s 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 

Positioning 1: Displaying/Hiding Elements 

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 2: Absolute Positioning 

You may remove an element from the normal flow… 

And position it relative to its parent element: 

Using the property-value pair, position:absolute … #bg {position:absolute; top: 250px; left:2% } #content{position:absolute; top:0px; left:30% } #navigation{position:absolute; top:10px; left:2% } #navigation a{display:block}





This is called ‘Absolute Positioning’.

One or more attribute:value pairs follow, to specify the absolute position. For each, first type: top, bottom, left, or right…  Then, type :v, the desired offset distance from the indicated edge of the target element’s parent:  Expressed as an absolute (e.g., 10px) or relative (e.g., 1em) value;  Or, as a percentage of the parent element (used for liquid designs).  We position the #bg, #content, and #navigation divisions relative to the body. 

Thus, for positioning, several property-value pairs work together.  Abs. Positioning not inherited (but, parents/descendents do move together.) 

Positioning 3: Affixing an Element 

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 ‘Fixed Positioning’.

Again, attribute:value pairs follow, to specify the fixed position. For each, first type the window side: top, bottom, left, or right …  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 #navigation divisions to fixed positioning. 

Again, for positioning, several property-value pairs work together.  This provides the ideal replacement for Frames… 





Unfortunately, IE7 supports fixed positioning, but not IE6.

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

Positioning 4: Offsetting Elements 

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 ‘Relative Positioning’.

Again, attribute:value pairs follow, to specify the offset. For each, first type: top, bottom, left, or right …  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 h3 elements via relative positioning. 

 

Note: surrounding elements are NOT affected AT ALL.

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

Format 1: Setting Background Color 

As we saw last time, any element’s background color may be set: 

Using the background-color property: 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) 



We also discussed using a background image … 



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

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 2: Setting Foreground Color 

As we also saw last time, any element’s foreground color may be set: 

Using the color property: body{background-color:#fff; color:#000} #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%; color:white} #navigation a{display:block; text-decoration:none} #navigation a:link.current,#navigation a:visited.current{background-color:#ff9} #navigation a:hover{background-color:#fff;color:#339} #navigation a:hover.current{background-color:transparent; color:#ff9} h1{background-color:#339; color:#fff}





The color value can be specified using an RGB color, as we saw earlier…:

Note: The color property is inherited.

Layout 1: Choosing the Cursor 

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

Using the cursor property: body{background-color:#fff; color:#000} #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%; color:white} #navigation a{display:block; text-decoration:none} #navigation a:link.current,#navigation a:visited.current{background-color:#ff9} #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 cursor property can take a number of values: pointer specifies 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. 

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 color and foreground color… 4. Cursor selection. 

In the next Lecture, we continue our treatment of CSS Layout: 

Setting element box 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’.

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.