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

Column backgrounds are on #wrapper

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

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