1 / 33

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.

mendel
Download Presentation

CA 272 - Professional Web Site Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. CA 272 - Professional Web Site Development CSS Positioning

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  25. Web Layout Patterns

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

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

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

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

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

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

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

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

More Related