CA 272 - Professional Web Site Development

CA 272 - Professional Web Site Development CSS Positioning

Announcements • CA/CS Advising Day in Faculty Dining Room: Wed., 11/28 from 3:00 to 6:30 p.m. • I am speaking with Prof. Lizmi’s ColdFusion class about the Web design/development business: Wed., 11/28 at 6:00 p.m., HU 313

Review - Positioning Schemes • Static - a.k.a. ‘normal flow’ • Relative - offset by some value • Absolute - positioned at specified coordinates outside normal flow • Fixed - positioned to viewport • (Float - displaces text only)

Static Positioning • Normal flow - not ‘positioned’ • Block-level elements generate an (invisible) box • Elements ‘flow’ one after another; elements are displaced by previous elements in code • Elements cannot appear side by side • One-column layout

Relative Positioning • Element is offset by some value (relative to original position) • Element retains shape it would have had in normal flow • Normal flow preserves space originally taken up by element • Element may overlap other elements • Good for establishing positioning context

Relative Positioning • Example: relative positioned div • Exercise: relative positioned span • Open blank HTML document • Insert a few paragraphs of text • Wrap (CTRL-T) some text in <span class=“example”>…</span> • Create style rule for span with positioning type ‘relative’ and some offset values

Absolute Positioning • Element is completely removed from normal flow (and space it occupied disappears) • Placement is specified by offset values (relative to containing block) • Always generates block-level box • Absolutely positioned elements do not interact with each other (except for stacking order) • Must know exact coordinates to position elements • See example

Fixed Positioning • Just like Absolute Positioning, except… • Elements positioned relative to viewport (browser window) - scrolling window does not affect element • Good for frame-like layouts • IE 6 and under do not support fixed positioning • See example

Floats • (Not actually a positioning scheme - elements can be floated AND positioned) • Elements removed from normal flow… • EXCEPT floated elements displace text in normal flow (but NOTHING ELSE) • Floated elements displace other floated elements! • Margins on floats do not collapse • Use clear: left | right | both; on OTHER elements to keep them from being beside a floated element

Positioning Context - the Containing Block • Containing block determines where positioned element is placed • For static and relative positioning, containing block is nearest block-level, table cell or inline box parent

Positioning Context (continued) • For absolute positioning, containing block is nearest positioned element (relative, absolute or fixed) • Default positioning context is <body> element (document window) • For fixed positioning, containing block is viewport

Offset Values • Top, Bottom, Right, Left • Units: length (px) or percentage (%) • Offset values are relative to containing block • Positive values move element inward (relative to containing block) • Negative values move element outwards • % values are relative to height and width of containing block • Should give top or bottom AND side value • Default is top: 0; left: 0;

Stacking Order: z-index • Elements can be positioned 3-dimensionally along the z axis using z-index (only ‘positioned’ elements) • Higher values of z-index are further on top • z-index can be negative • Normal flow elements are z-index: 0; • Local stacking context

Other Layout Properties • Width/Height - important for constraining size of layout elements • >> Floated elements MUST have width specified • Display: block; - when we want inline element to behave as block element (e.g., anchor as button) • Overflow: visible | hidden | scroll • Max-width/max-height & min-width/min-height • >> very useful for liquid layouts • Unsupported by older versions of IE

Exercise: Absolute Positioning • Open a blank HTML document in DW • Go to the Layout tab in the Insert Bar • Draw some boxes in Design View (these will be absolutely positioned divs) • Go to Code View and view the CSS • position: absolute; left; top; width; height; z-index

Exercise: Absolute Positioning (continued) • Click on one of your divs and add some text; make text a paragraph • Click on AP div ‘handle’ to select it • Delete height value in Property Inspector • You can change left, top, width, height (also drag with handle and bounding box)

Exercise: Absolute Positioning (continued) • Set background color on divs • Drag one div to overlap another • Change z-index values (set lowest one to highest value) • Select overlapping div and Edit > Cut • Click in other div and Edit > Paste • Why is div in different place?

Exercise: Absolute Positioning (continued) • Insert several paragraphs of text in an AP div (e.g., from lipsum.com) • Select div and set height (to value smaller than height of text) - view change • Set overflow to hidden - view change • Set overflow to scroll; preview in browser

Web Layout Patterns • Common elements in Web layouts: • Branding & Marketing • Navigation (main nav, page nav, etc.) • Primary content (often text content) • Supplemental content (sidebars, calls to action, ads, images, etc.) • Footer content and site tools

Review: Page Layout Schemes • Fixed width - width set to fixed px value • Most designers use fixed width because easiest to design for • PRO: easier to design graphics for, can set readable line lengths of text • CON: doesn’t take advantage of screen width for users with large monitors; users with smaller monitors may have to scroll horizontally

Page Layout Dimensions • Fixed design for pixel widths - must account for browser ‘chrome’, scrollbars • 800 x 600 monitor: 750px (or 760px) width • Safest width, but only 12% of users • 1024 x 800 monitor: 950px+ width • Most users have this resolution now (53%) • 1280 x 1024 is gaining (~23%) • Don’t worry about 640 x 480 anymore

Page Layout Schemes • Fluid/Liquid - width set to % value, adjusts to width of browser window • PRO: makes full use of browser window; user can resize • CON: may lead to very long lines of text; harder to design for • See: http://www.drexel.edu/

Page Layout Schemes • Elastic - width set in relative units (ems) • Page elements grow proportionately as user resizes text size • PRO: ideal for accessibility - users can view at whatever scale is comfortable for them • CON: very difficult to code; can lead to very large widths as user increases font size • Rarely used

Web Layouts • Examples: • www.starbucks.com • www.hueylong.com • www.newyorker.com • www.gohawaii.com • www.craigslist.org

Web Layout Patterns

CSS Layouts with Floats and Positioning • Review: two-column float with clearing footer • Wrapper encloses everything • Each column is floated • Footer clears floats and extends wrapper • Column backgrounds are on #wrapper

CSS Layouts with Absolute Positioning • Can replicate layout with AP divs • BUT, must know placement of alldivs • How do you place footer if variable content? • How do you create column backgrounds for unknown height?

CSS Layouts with AP - continued • Absolute positioning is useful for positioning elements WITHIN layouts • E.g., masthead graphics • See “liquid layout” (linked on class homepage)

CSS Image Replacement • What if we want to replace text with a graphic? (using CSS only) • Should leave text in HTML for accessibility and SEO • Many techniques; most common (probably) is ‘Phark’ method: text-indent: -5000px; e.g. • h1#logo { text-indent: -5000px; background: url(logo.gif) 0 0 no-repeat; width and height as needed} • Coca-Cola

CSS Image Replacement • Downsides: • If images are turned off (but CSS is on) nothing will display • Background images usually do not print • If you edit text, you’ll need to edit the graphic

Exercise: Image Replacement • Download from the class site: • Float layout (save to homework folder) • Nav button background image (save to images folder) • Join button jpeg (save to images folder) • Insert a link, “Join Today!”, at the beginning of the second paragraph of simple-page-layout4a.html • Give this link class ‘joinButton’

Exercise: Image Replacement (continued) • Create CSS styles (for default state and :hover) to make link a button with join.jpg as background image (button should be 100px by 100px)(display; width; height; background; etc.) • Float button right and add left and bottom margins • Preview in browser • Need to hide text of link:text-indent: -5000px; • Preview in Firefox - click and hold down buttonshould see dotted box off to left • Add outline: none; and preview again

Homework • Rework homework 16 to float both left and right columns, using wrapper div and clearing footer • Create a third column inside div#rtCol • Read Chapters 8 & 14 in the Visual QuickStart Guide

CA 272 - Professional Web Site Development