Discover the Secrets of CSS

Although you can add rounded corners to divs using JavaScript (see the sidebar “Creating Rounded Corners with JavaScript”), I will now show you how to create rounded boxes with artwork. Creating a box with a fixed size is as simple as making the artwork and adding it to the page, but the trick is to create such boxes so that they expand to accommodate whatever content is chucked into them. If you want a fixed-width graphical box to expand vertically (which is what I want here), the easiest way is to create three pieces of artwork that go into the background of three containing elements.

How this actually works is easier to demonstrate than explain, so let’s start by looking at the artwork. Here are three pieces of artwork I need: the top graphic with the curved top edge of the box, the middle graphic that repeats as many times as needed to fi ll the center of the box, and the bottom graphic with the curved bottom of the box.

The menu bar under the header is styled with the multi_level_menu.css style sheet from the Stylib library, and you will notice if you visit the Stylin’ Web site that the drop-downs of this menu are transparent and the underlying page is visible through them.

This transparency is created programmatically using the various CSS opacity options of the different browsers.

On the left navigation bar is a transparent round-cornered box that can increase in height as more content is added. The transparency here is created not programmatically but graphically, by using three .png background images with their transparency levels set in Adobe Fireworks. The center area of the box can expand as content is added, through the use of a repeat setting on the CSS for the background of the element. I also added the small sign-in form that we saw in Chapter 6 inside this area.

In the content column, the text wraps itself around a floated image, followed by an unordered list. On the right sidebar is an image of the book cover with a drop shadow (the shadow was created in Adobe Photoshop), with a simple unordered list of links below.

If you are not using Dreamweaver or another editor with a built-in FTP client, you will need a separate FTP (File Transfer Protocol) client.

Either way, in order to log in, you will need to enter the host name, user name, and password. Then you can upload your files and folders from the local folder on your computer to the root folder of your site’s server. You can obtain the FTP log-in information from your ISP (Internet Service Provider) or, if you are in a corporate environment, your network administrator.

The only page you absolutely need in the root level folder (my local version of this folder is called stylin2_site in Figure 7.3) is the home page, which is the 3_col_liquid_faux.html fi le, renamed to home.html so it loads automatically. See the sidebar called “The Root Directory” for details on this. Although you can put all the XHTML pages at this top level, it’s good practice to organize them into subfolders.