CA 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 Column backgrounds are on #wrapper

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

CSS Layouts with Absolute Positioning Can replicate layout with AP divs BUT, must know placement of all divs 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 button should see dotted box off to left Add outline: none; and preview again

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.

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?

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?

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?

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?

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