Biography ƒ

Founder/Principal - W3Conversions LLC - Redesigns for Web Standards and Accessibility

ƒ

Speaker and Corporate Trainer

ƒ

Consultant & sub-contractor for XHTML/CSS development

ƒ

Adobe Community Expert

ƒ

Dreamweaver Task Force for WaSP

ƒ

Partner - CommunityMX.com

ƒ

Author - DW MX 2004 Magic, Web Developer’s & Designer’s Journal (formerly WDDJ), Adobe’s DevNet Center, and other web publications

Corporate Consultant/Trainer

ƒ

International Advisory Board for Web Developer’s and Designer’s Journal

W3Conversions LLC

ƒ

List Mom for WebWeavers

MAX 2006 Beyond Boundaries Stephanie Sullivan

CSS Part 3: Advanced CSS Concepts and Theory 2006 Adobe Systems Incorporated. All Rights Reserved.

2006 Adobe Systems Incorporated. All Rights Reserved.

Session Overview

Quick Review ƒ

Descendant Selectors

ƒ

Opacity

ƒ

Splitting images for reuse

ƒ

Using images for negative space

ƒ

Multiple backgrounds & wrappers

ƒ

Using Negative Margins

ƒ

Directory specific CSS for more control

ƒ

Common bugs and how to swat them

ƒ

What is the Box Model?

margin

border

Content within

padding CSS Part 3: Advanced CSS Concepts and Theory 2006 Adobe Systems Incorporated. All Rights Reserved.

2006 Adobe Systems Incorporated. All Rights Reserved.

Quick Review

Quick Review

ƒ

What is an inline element?

ƒ

What is a block element?

ƒ

What is meant by the “flow of the document?”

ƒ

What are the different positioning methods? ƒ

Static

ƒ

Relative

ƒ

Absolute

ƒ

Fixed

2006 Adobe Systems Incorporated. All Rights Reserved.

ƒ

ƒ

How do you write efficient CSS? ƒ

Class vs. ID

ƒ

Avoid classitis using type and descendant selectors

ƒ

Use shorthand

What is a descendant selector? ƒ

#nav a:link

ƒ

#content .pod h1

ƒ

ul ul li

2006 Adobe Systems Incorporated. All Rights Reserved.

1

Principles of Floating ƒ

A float must be given a width

ƒ

A float must be given a directional value of left or right (there is no top or bottom)

ƒ

If you want a float to appear alongside another element, it must precede that element in the source order of the document

ƒ

A float never covers text or inline images

ƒ

Avoid using a width on a block element following a float; use a margin on the same side of the float instead

ƒ

Since a float is taken "out of the flow" of the document, a float inside another container must be cleared in order for the parent container to enclose it properly

Two-column Layout - Out of Bounds

2006 Adobe Systems Incorporated. All Rights Reserved.

2006 Adobe Systems Incorporated. All Rights Reserved.

Real World Examples - PopStick

Real World Examples - PopStick

ƒ

Faux columns, opacity & multiple wrappers

ƒ

Faux columns, opacity & multiple wrappers

2006 Adobe Systems Incorporated. All Rights Reserved.

2006 Adobe Systems Incorporated. All Rights Reserved.

Multiple Wrappers - XHTML

Multiple Wrappers - CSS



#mostOuter { background: #FFF url(assets/most_outer.gif) repeat-y left top; /* the narrow lines and boxes */



margin-top: 25px;

}

Content of column one

#outerBox {

Content of column two

background: url(assets/outer_box.gif) no-repeat left top; /* Shows the thicker grey bars */

Content of column three


position:relative; } #boxContainer {



width: 620px;



}




#boxContainer div { float: left;



width: 165px; padding: 3px 0 10px 15px; margin: 0 10px 0 0; }

2006 Adobe Systems Incorporated. All Rights Reserved.

2006 Adobe Systems Incorporated. All Rights Reserved.

2

Opacity - CSS

Real World Examples - Anteo

#mostOuter { background: #FFF url(assets/most_outer.gif) repeat-y left top; /* the narrow lines and boxes */

ƒ

Multiple wrappers, sIFR & split backgrounds

margin-top: 25px; position: relative; /* forces the moz opacity to work */ filter: alpha(opacity=80); /* IE opacity */ -moz-opacity: 0.80; /* mozilla opacity */ opacity: 0.8; /* CSS3 opacity */ } /* forces the proprietary alpha filter to work in IE \*/ * html #mostOuter { height: 1% } /* end hack */

2006 Adobe Systems Incorporated. All Rights Reserved.

2006 Adobe Systems Incorporated. All Rights Reserved.

Real World Examples - Anteo

Multiple Wrappers link one link two link three

Rollovers




Left side

Right side

2006 Adobe Systems Incorporated. All Rights Reserved.

2006 Adobe Systems Incorporated. All Rights Reserved.

Real World Examples - Anteo

Real World Examples - Anteo

ƒ

sIFR

ƒ

ƒ

Use any font - even when only on your machine

ƒ

Uses JavaScript and Flash - falls back to pure text/CSS

ƒ

Create Flash swf of a dynamic alphabet

ƒ

Insert JavaScript, CSS and tune

Split backgrounds

tops

Common bottoms

Sari Medium - sIFR

Helvetica - CSS 2006 Adobe Systems Incorporated. All Rights Reserved.

2006 Adobe Systems Incorporated. All Rights Reserved.

3

Split Backgrounds

Real World Examples - FlexRight



Local CSS, dependant selectors and AP divs