![Page 1: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/1.jpg)
CA 272 - Professional Web Site Development
CSS Positioning
![Page 2: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/2.jpg)
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
![Page 3: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/3.jpg)
Review - Positioning Schemes
1. Static - a.k.a. ‘normal flow’
2. Relative - offset by some value
3. Absolute - positioned at specified coordinates outside normal flow
4. Fixed - positioned to viewport
5. (Float - displaces text only)
![Page 4: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/4.jpg)
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
![Page 5: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/5.jpg)
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
![Page 6: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/6.jpg)
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
![Page 7: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/7.jpg)
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
![Page 8: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/8.jpg)
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
![Page 9: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/9.jpg)
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
![Page 10: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/10.jpg)
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
![Page 11: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/11.jpg)
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
![Page 12: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/12.jpg)
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;
![Page 13: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/13.jpg)
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
![Page 14: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/14.jpg)
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
![Page 15: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/15.jpg)
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
![Page 16: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/16.jpg)
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)
![Page 17: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/17.jpg)
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?
![Page 18: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/18.jpg)
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
![Page 19: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/19.jpg)
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
![Page 20: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/20.jpg)
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 21: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/21.jpg)
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 22: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/22.jpg)
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 23: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/23.jpg)
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
![Page 24: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/24.jpg)
Web Layouts
Examples: www.starbucks.com www.hueylong.com www.newyorker.com www.gohawaii.com www.craigslist.org
![Page 25: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/25.jpg)
Web Layout Patterns
QuickTime™ and aNone decompressor
are needed to see this picture.
QuickTime™ and aNone decompressor
are needed to see this picture.
QuickTime™ and aNone decompressor
are needed to see this picture.
QuickTime™ and aNone decompressor
are needed to see this picture.
QuickTime™ and aNone decompressor
are needed to see this picture.
QuickTime™ and aNone decompressor
are needed to see this picture.
QuickTime™ and aNone decompressor
are needed to see this picture.
QuickTime™ and aNone decompressor
are needed to see this picture.
QuickTime™ and aNone decompressor
are needed to see this picture.
QuickTime™ and aNone decompressor
are needed to see this picture.
QuickTime™ and aNone decompressor
are needed to see this picture.
QuickTime™ and aNone decompressor
are needed to see this picture.
![Page 26: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/26.jpg)
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
![Page 27: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/27.jpg)
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?
![Page 28: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/28.jpg)
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)
![Page 29: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/29.jpg)
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
![Page 30: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/30.jpg)
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
![Page 31: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/31.jpg)
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’
![Page 32: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/32.jpg)
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 button
should see dotted box off to left Add outline: none; and preview again
![Page 33: CA 272 - Professional Web Site Development CSS Positioning](https://reader033.vdocuments.site/reader033/viewer/2022052701/56649cd65503460f9499e0be/html5/thumbnails/33.jpg)
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