Lecture 5 Excerpt

Overflowing AP Elements

Absolute positioning is miraculous, but there is a catch: overflow.

An absolutely positioned element is taken out of the normal flow of the document. This means that it is completely blind to any other divs below it. If an absolutely positioned element expands past another div, it will simply run over it.

The AP content div overlaps the footer rather than pushing it down or floating around it.

The portfolio Web site below uses absolute positioning to place each content area (outlined in red). AP positioning allowed the designer to place an animated flashing TV set squarely on the black-suited executive's shoulders. This kind of precise placement would have been impossible using floats.

AP positioning gives the designer full creative control over the layout of this portfolio site.

The text blocks on the right are also AP elements. It looks perfect at a small font size, but if a farsighted user increases the font size, the divs overlap.

The extra-small font size fits perfectly.	Increasing the font size causes unexpected problems.

The moral is to use AP elements wisely. Start with a standard floated column layout, then add AP elements as necessary. Use AP elements for divs towards the top of the page, where you are less likely experience problems with overflow. Use floats or cleared elements for footers at the bottom of the page.

Open the reviews.html file in the balocal folder. This layout uses four absolutely positioned divs for the main content areas. The advantage is that the four rectangles are exactly the same height, aligned top and bottom. This would be very difficult or next to impossible to achieve with a standard floated layout. The disadvantage is that the fixed height only allows for a certain amount of content. The copy was carefully edited to fit each div, but if the user resizes the text, it will overflow.

Each content area in this layout is aligned via absolute positioning. Take a look at the AP Elements palette to study how it is put together.

The Positioning category of the CSS Rule Definition dialog gives you several options for handing overflow: visible, hidden, scroll, and auto.

When you use absolute positioning, consider your overflow options.

Visible is the default overflow setting. Any content that overflows the div will still be visible. This might mess up your layout, but at least the user will be able to read the all the text.

This div is set to visible overflow.

If you choose the hidden overflow setting, any content that doesn't fit inside the div will get cut off. If the information is really important, this would be a problem. If the overall aesthetics are of greater concern, hidden overflow might be a good option.

This div is set to hidden overflow. The last line of the paragraph is hidden in the browser.

Scroll and auto employ scrollbars to handle overflow. If you choose the "scroll" option, scrollbars will appear inside the div, regardless of the amount of content. If you choose the "auto" option, scrollbars will only appear if the content overflows.

In this div, a scrollbar is handling the overflow.

Fixed Positioning

Absolute positioning has a doppelganger: fixed positioning.

You can set an element to a "fixed" position using the Positioning category of the CSS Styles panel.

The fixed positioning property literally fixes an element in a specific spot in the browser window. When the user scrolls down the page, the element does not scroll along, it stays exactly in the same spot.

In this Web page, a former version of chopshop.tv, the header div is set to fixed position:

The header's position is fixed in relation to the Document window.

When the user scrolls down the page, the header stays at the top. The thumbnail photos scroll below the header:

The header has a high z-index value to ensure that it stays on top..

Here's another example from the CSS Zen Garden site. The postcards in the footer div stay overlap the scrolling content div. Test it in a browser to see how it works.

The footer div overlaps the content div and sidebar.

 

As the content scrolls, the postcards stay in place.

Very cool, and potentially quite useful. However, fixed positioning support isn't 100% reliable. Some browsers (ah, hmm... IE 6) will scroll fixed elements along with the rest of the page. If you use fixed positioning, test carefully to make sure it functions correctly in Internet Explorer.

Static Positioning

You'll notice one more positioning category: static. Any guesses what that might be? Something to do with atmospheric electricity?

Well, nothing that exciting. Static is the default positioning type for all elements. This means normal document flow—the element is not positioned and occurs where it normally would in the document.

You don't need to specify the static position type. It is already inherent in any page element.

AP Roundup

If you notice an overlapping design element on a site, chances are it was positioned with absolute positioning. However, that doesn't mean that the entire site was build with AP divs. Most sites rely on a normal floated column layout, using AP positioning for a few key elements.

The Ernest Hemingway Collection Web site uses AP positioning for the overlapping photos, luggage tag, coffee cup, and coins in the sidebar. However, the main text columns are still positioned with floats.

Ernest keeps a messy desk. AP positioning is his kind of layout tool.

 

While this design uses a lot of AP elements (indicated in yellow), the text columns are kept in the normal document flow, positioned using floats (in blue).

AP elements can be positioned inside floated divs. The wtfjeans site may look like chaos...

Cool jeans, cool Web site. Breaking the grid appeals to an edgier target market.

... however, there is an underlying 2 column structure. Just a few AP elements are staggered on top:

AP positioning is used to place the captions around the jeans and the iPhone sticker which overlaps the top banner. However, the layout is based on a 2 column, right sidebar layout.

CSS and Curves

As you surf the Web, you'll notice a predominant trend—rounded corners. Curves create a soft, comfortable feeling. Smoothing out the rough angles in your layout just might result in a more inviting interface for your site visitor.

Not a right angle in sight: this layout has a cozy feel.

Adding rounded corners is a cinch using CSS background images. Here's how:

Step 1: Prepare Your Graphics

Create your curved background graphics in Photoshop. You'll need a curve for the top of the div,

a curve for the bottom of the div,

and a thin graphic that with tile to fill the middle of the div,

You'll find these sample images in the curves folder if you would like to follow along.

Step 2: Insert Div

Open the curves.html file and insert your cursor in the container div. Go to Insert > Layout Objects > Div Tag to insert a new div. Type "quote" into the class selector field and click the New CSS Rule button to jump to the CSS Rule Definition dialog.

In the Background category, apply the middle background graphic, set to "repeat-y". The image will tile to fill the entire height of div.

In the Box category, set the width of the div to "300px". Click OK.

In the Document window, you'll see the new "quote" div with the standard filler text:

Insert your content into the div. Go to Edit > Select All to select the filler text, then hit the Delete key. Type the following quote into the div:

Step 3: Add the Top Curve

The first paragraph in the div will serve as a "hook" to apply the top curve. Create a new CSS rule. Choose the Compound selector type, and enter .quote p.first in the selector name field.

In the Background category, browse to select the curve_top.gif graphic as the background image. Set it to "no-repeat". Type "left" into the Background-position (X) field and "top" into the Background-position (Y) field. This will give the first paragraph a curved background image, neatly aligned in the top-left corner.

Click OK. Nothing has changed—you have to apply the class of "first" to the first paragraph. Insert your cursor in the quote, then select the <p> tag using the Tag selector in the lower-left corner of the Document window. With the paragraph selected, Control-click (right-click PC) .quote p.first in the CSS Styles panel and choose Apply from the context menu.

There you go—the curve appears at the top of the paragraph. However, the middle graphic is tiling above the top curve, ruining the effect.

Edit the .quote p.first selector. In the Box category, set the margins to "0". Click Apply to see the results. This gets rid of the extra space above the paragraph, great.

Now, how about some padding? 20 pixels of top, right, and left padding will create some breathing room between the text and the edge of the div. 10 pixels of bottom padding should be enough—you don't want to push the paragraphs too far apart.

Next, go to the Type category to format the font. Click OK when you're done.

The top curve is now in place, and the first paragraph is nicely formatted.

Step 4: Bottom Curve

The first paragraph was the hook for the top curve, so the last paragraph could work as a hook for the bottom curve.

Create a new CSS Rule. Choose the Compound selector type and enter .quote p.last in the selector name field.

In the Background category, add the bottom curve graphic, set to "no-repeat". Choose "left" (X) position and "bottom" (Y) position to align the background graphic to the bottom-left corner.

In the Box category, remove the margins and add some padding.

In the Type category, choose the type style for the quote byline. Click OK.

Select the last paragraph and right-click .quote p.last in the CSS Styles panel to apply the style. The final result is not so shabby:

Using this technique, you can create all kinds of rounded corners. Here's a very fresh example:

In the cc-pays-sud-gatine site, the curvy nav containers flow with the rolling hills in the landscape.

Each nav container is comprised of three background graphics:

The top curved graphic.

The middle graphic, which tiles to fill the height of the div.

The bottom curve.

Divs restrict layouts to rectangular structures, but that doesn't mean you're locked into a boxy design. You can turn to graphics for fluid shapes.

Exercise 5 Excerpt

Silver Spark Layout

Silver Spark Jewelry needs a unique site layout created with CSS positioning. A project to spark your interest, perhaps?

In the lesson, you've learned some techniques for taking CSS layout design to the next level. Using absolute positioning, you can break out of the Web's traditional boxy appearance—or treat the grid system in a whole new way.

For this exercise, you'll be given some text and image content to come up with a unique CSS layout. Your client, Silver Spark Jewelry, will also provide some information about its users to help you to develop a design concept. This project is a good opportunity to stretch your layout skills by trying some approaches you may not have considered before.

Project Brief: Silver Spark Jewelry

Silver Spark Jewelry has hired you to create a new Web site. Your contact at the company has given you the text and graphics you'll need along with the marketing objectives.

Files and Guidelines

1. Go to the course downloads area to download the silverspark file. Unzip the file and move it into your dw1exercises folder.

2. The client's jewelry is unique, and the client would like her site to reflect that. The anticipated users run the gamut of age and Web familiarity, though most are in the 18-30 range.

3. The design concept should reflect the organic forms of the jewelry. Incorporate curves, rounded corners, or overlapping elements.

4. The site must use a list-based navigation system.

5. The silverspark folder contains several image folders and a text file. If you like, you may alter the graphics or create new ones.

The silversparktext.txt file includes text for the home page and sub-pages.

The site must include one of the three versions of the logo, supplied in the images_logo folder.

Product photos of bracelets, earrings, and necklaces are provided in the images_jewelry folder.

Several different accent images are provided for your creative use in the images_transparent folder. These images are saved with transparent backgrounds, making them ideal candidates for absolute positioning.

Each of these bead images is inserted in an AP div. The transparent PNG format allows you to overlap different background colors.

If you need to modify any of the graphics to fit your design concept, you'll find the vector artwork in the dingbats.eps file. Here's how to create your own transparent PNG graphics:

Step 1: Open the dingbats.eps file in Adobe Illustrator or Photoshop. Select the element you would like to modify, then copy and paste into a new file. Resize the element as you like. If you change the color, you might also consider lowering the opacity.

To access the Transparency panel in Illustrator, go to Window > Transparency. In Photoshop, the Opacity settings are found in the Layers panel.

Step 2: Go to File > Save for Web & Devices. Choose the PNG-24 format and check Transparency. Save the PNG file in your local root folder.

The PNG-24 file format is great for transparency effects, gradients and overlays.

Step 3: Open your Silver Spark home page in Dreamweaver. Insert your cursor in the container div, and go to Insert > Layout Objects > Div Tag to insert a new div for your AP element. Give the div an ID and click the New CSS Rule button to jump to the New CSS Rule dialog.

Click the "New CSS Rule" button to define the positioning properties for the new div.

Dreamweaver will automatically fill in the selector name. You just need to choose your external style sheet and click OK.

It is a good idea to save all your CSS rules in your external style sheet. This is the advantage of using Insert > Layout Objects > Div Tag, which allows you to choose where the rule will be defined, rather than Insert > Layout Objects > AP Div, which automatically creates an internal style.

In the Positioning category, set the position to "absolute". Enter a z-index value to ensure that the div stays on top of the stacking order. The rest of the settings are optional—you can adjust them later on. Click OK to exit the CSS Rule Definition dialog, then OK again to exit the Insert Div Tag dialog.

Setting the position to "absolute" turns the div into an AP element. The z-index controls the div's placement in the stacking order.

A new div will appear with some default text "Content for id "bigbead" Goes Here". When you select the div, you'll notice a little handle in the top-left corner. You can grab the handle and drag the div anywhere on the page. Insert your PNG graphic into the div.

To keep the div's position relative to the container div, don't forget the trick covered in the lesson: Edit the .container selector and change its position to "relative".

The new big bead graphic is set to 80% opacity, so the colors in the background show through.

Have fun playing around with the transparent graphics. Feel free to incorporate your own illustrations as well, or download more dingbats from online font libraries. One word of warning—the PNG transparency format is not supported by Internet Explorer 6. This is not an issue for this project, however, since IE 6 users are a small percentage of online demographics, and the lack of transparency won't interfere with the site functionality.

Building the Home Page

1. Using the given elements, and your understanding of what the client needs, sketch out the home page design on paper. Mock-up a home page layout in Photoshop or Fireworks.

2. Then move on to Dreamweaver, choosing a CSS layout that fits your design concept.

Dreamweaver CS5 users: Go to File > New and choose a CSS layout similar to your wireframe. Choose "Create a new file" for the Layout CSS. Save to your silverspark folder as "styles.css". When the new HTML file opens up, save it to your silverspark folder as "index.html".

Dreamweaver CS4 users: The complete set of new Dreamweaver CS5 starter pages are provided for you in the starterpages folder in the course downloads for Exercise 4. Choose a CSS layout similar to your wireframe. Copy the index.html and styles.css files into your silverspark folder.

3. Make adjustments to the CSS layout. Modify the existing CSS properties directly from the CSS Styles panel or open the CSS Rule Definition dialog for the full set of options.

4. Incorporate the list-based navigation. Choose a list style from the listamatic folder. Open the list HTML file and switch to Code View. Copy and paste the unordered list into your Silver Spark index.html file. Then, open the list CSS file. Copy and paste the list styles into your Silver Spark external style sheet file. Modify the list styles to suit your design.

5. Insert the home page content from the "Opening text" section of the supplied document (Silversparktext.txt).

6. Format the typography using CSS. Redefine the p tag for the paragraph text and the h1 tag for the headers. Create class selectors for extra bits of formatting like photo captions.

Building the Remaining Pages

1. First, make sure you are happy with the home page. Preview in a browser. If you would like feedback on your the home page design before building out the sub-pages, feel free to email your instructor.

2. Rather than rebuilding all the sub-pages from scratch, you can duplicate your home page. Go to File > Save As. Name the new page bracelets.html and save in your silverspark folder. Replace the home page content with the bracelet images and text.

3. Repeat this process for the other pages:

home	index.html
bracelets	bracelets.html
necklaces	necklaces.html
earrings	earrings.html
custom	custom.html
about us	about.html
contact us	contactus.html

When you're finished, test your site in a browser and make sure all the links work.

Post to Your Web Server

Open your index.html file and add a link to Exercise Five.

Publish your project using Dreamweaver's FTP feature. Click the Connect icon at the top of the Files panel to connect to your Web host. Select the silverspark folder and click the Put Files icon.

When Dreamweaver asks if you want to include dependent files, click Yes.

Summary

When your site is finished, briefly answer the following questions:

1. What challenges did you find with the AP elements you used in your design, and how did you overcome those challenges?

2. How did your AP elements improve your site, and what difference would have it made to use floated elements instead?

Grading Criteria: What your instructor expects you to do:   Use provided images and text to construct an attractive and creative page layout that meets the client's needs. Demonstrate the ability to build a CSS layout that incorporates absolutely positioned elements. Demonstrate proficiency in CSS text styling. Build a list-based navigation system. How to Post: Once you're done, go to the Dropbox for this lesson and enter your site URL, remembering to begin the URL with http:// and checking it before sending the message. Include a brief comment and your answers to the summary questions. If you have a question before sending your completed exercise for grading, use the Send Mail area to contact your instructor. I look forward to seeing your work!