1 / 15

CA 272 - Professional Web Site Development

CA 272 - Professional Web Site Development. Class 23 - CSS Positioning, Image Replacement & Print Styles. 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

cai
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 Class 23 - CSS Positioning, Image Replacement & Print Styles

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

  3. CSS Layouts with Floats: 3-column layout • Divide div#rtCol into two divs:#mainContent and #sidebar • Float #mainContentleft and #sidebar right • Modify background image on #wrapper to include color for third column

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

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

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

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

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

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

  10. Exercise: Liquid Layout • Examine the sample “liquid layout” from the class homepage (ca272.com/exercises/liquid-layout.html) • This layout uses floated divs to create two columns of text content as previously demonstrated. However, this layout resizes with the browser window. It also contains a masthead, a ‘marketing message’ area, and horizontal navigation. • Draw a wireframe of the layout (divs only), using boxes to show divs. Label the divs with their IDs. Pay close attention to how the divs are nested.

  11. Exercise: Liquid Layout • Using your wireframe and viewing the source code and browser display, answer the following questions: • resize your browser window – what style declaration is primarily controlling the width of the layout? (Hint: it is not a width property.) • why are there two wrapper divs (#wrapper and #wrapper2)? • in Firefox, resize your browser window to a very small width and very large width – what style declarations are setting an upper and lower limit on the width of the layout?

  12. Exercise: Liquid Layout • open the “liquid layout background image” (used for the column backgrounds) from the class homepage (ca272.com/images/liquid-bg.gif) – scroll all the way to the right to see the whole image • note that the dividing line between the columns does not move when the browser window is resized – how is this accomplished? • (Hint: the dividing line in the background graphic is at 2100px – 70% of the background image’s width) • the slogan, “Sometimes Average Is Good Enough”, uses image replacement – what declaration is hiding the text?

  13. Exercise: Liquid Layout • p#slogan is absolutely positioned at right: 13px – why is it better here to use the right offset than the left offset? • why is div#masthead set to position: relative? what would happen if this was not set? • resize the browser window smaller and note how the image of the woman slides under the graphic text, “I want to do what’s right…” • – what CSS property determines the stacking order of these two absolutely positioned images?

  14. Exercise: Liquid Layout • the horizontal CSS navigation in this example is similar to the vertical navigation we created earlier (both are lists with anchors as buttons) • – what declaration is making the navigation buttons sit horizontally? • how are the custom bullets in the “Side Column” created? • why is there no separator line to the right of “Nav8” in the footer section? • what would happen without clear: both; on div#footer?

  15. Homework • Create a full-color mockup of your Web page layouts • Create a markup guide • Read the class handout on Microformats

More Related