Conquering Cascading Style Sheets, Part 3: Advanced with GoLive
For most design applications, style sheets are used primarily for text formatting. On the Web, Cascading Style Sheets (CSS) take on a whole new level of responsibility. Not only can you style text, you can also position objects on your page, add borders and background images, and even define behaviors for mouse events. This tutorial will focus on using CSS to create layouts for your webpage. Not only does this give you more flexibility in authoring your pages, but mobile devices can actually rearrange CSS objects to help your layout fit on their screens.
This tutorial is the last of a three-part series on style sheets, which included:
• Beginner tutorial: CSS definitions, HTML elements, classes, and pseudo classes
• Intermediate: Navigation and links, styles for tables, and background images
• Advanced: DIV properties and CSS-based layout
Download Assets
[If you’d like to download the assets used in this tutorial, visit www.layersmagazine.com/magazine-downloads and open GoLiveCS2_Issue6_Tutorial.site. This tutorial was adapted from a freely available series of Web and email templates.
STEP 1 Build Two Layouts; the Beginning
We’re going to build these two layouts with a CSS-based layout, which means we’re not going to use tables. This layout method begins to feel more like designing pages in print, with text, graphic containers, and positioned objects, as well as the style sheet usage we learned in parts 1 and 2 of this series.
Absolute Positioning
STEP 1 Using Layers
Once you have the GoLiveCS2_Issue6_Tutorial.site open, we’ll begin with what’s called absolute positioning. This is where we take a DIV (HTML division tag), and assign it properties with CSS. Open the advanced_div_layout.html file in the Site window to open the styles from the intermediate tutorial. Start by dragging a Layer object from the Basic tab of the Objects palette.
STEP 2 Rename the Layer
Move your cursor over an edge of the Layer object and when your cursor turns into a sideways hand, click to select it. In the Inspector palette, change the Name to “photo,” then set Top to 30px, Left to 40px, and Width to 105px. Click on the Height drop-down menu and select Unchanged. Technically, this Layer is a DIV and these settings are actually CSS definitions. Click on the CSS Editor button at the bottom left of the Inspector palette.
STEP 3 Add More CSS Attributes
Let’s add a few additional CSS definitions. In the CSS Editor, we’ll see a file reference to our stylesheet.css document, and a new item called “photo.” Select the Border and Outline Properties icon, and for the Top and Left of the photo DIV, enter a 1-pixel, red, Solid border.
STEP 4 Add an Image
Next, we’ll bring in our photo named “night_shot.jpg” by dragging it from the images directory in the Site window (GoLive CS2_Issue6_Tutorial.site) into our Layer object. The photo is 100 pixels wide so we’ll add some padding in the next step to use the rest of the 105 pixels that we defined for the width in Step 2.
STEP 5 Add Some Padding
[Insert part1_step_05.psd]—add red circle as shown on the contact sheet
Go back to the CSS Editor and select the Margin and Padding Properties icon. Under Padding, enter 5 pixels for both the Top and Left of the photo layer. This will bring the photo away from the border.
STEP 6 Add Another Layer
Drag another Layer object into your page, then grab it (sideways hand), and drag it next to the photo layer. When you begin to drag the object, you’ll see a grid appear, which will help you align the objects. Repeat Steps 3–5 but with the settings outlined in the next step.
STEP 7 Final Touches and Preview
In the Inspector palette, change the Name to “Content,” then assign a Width of 350px and no Height. In the CSS Editor, set the Top Border to 1px, red, Solid, and then set Padding to 5px for Top and 10px for Left. Paste in some sample copy from the file named “sample_content.html” in the Site window, and then preview your page in a Web browser (File>Preview In).
Using GoLive’s CSS Objects
STEP 1 Add a CSS Object
First, open the advanced_css_objects.html file in the Site window. To lay out a whole page with CSS-based objects, let’s use GoLive’s CSS objects in the Objects palette. Start by dragging the Three Columns: Scaling Center object. Select the object and then enter the following in the Inspector palette: ID: “pageLayout”; Left Column Width: 110px; Height: Unchanged (from drop-down menu); and Right Column Width: 125px.
STEP 2 Add Some Content
From the sample_content.html file, copy the center text and sidebar photos and paste them into their respective columns of the advanced_css_objects.html file. Next, let’s add the CSS Object named Navigation Rows by dropping it into the left column. Once placed, in the Inspector palette, set the ID to “navigation.”
STEP 3 Understanding the CSS Object’s Contents
Paste each navigation item from the sample_content.html file into the navigation rows. These links have the style applied to them from last issue’s Intermediate tutorial.
Open the CSS Editor for this page (see CSS Editor in next step) and you’ll see several new definitions: Four items ending in “pageLayout” and two ending in “navigation” (the ID names we entered). The definition “colcont_pageLayout” is the container that holds our three columns for the pageLayout CSS object.
STEP 4 Add Some Padding
In the CSS Editor, select colboxleft_pageLayout and add 40px of Padding to Top. Select colboxmiddle_pageLayout and under Padding, set Right to 20px and Left to 50px (as shown). Lastly, select colboxright_pageLayout and set Top Padding to 40px. Some formatting may not display as expected in GoLive, so let’s preview our progress in a Web browser.
STEP 5 Style the Navigation
Still in the CSS Editor, select the navbox_navigation and choose 1px, red, and Solid for the Right Border (as shown). Then with navbox_navigation still selected, under Margin and Padding, add 5px Padding for the Top and 15px for the Left.
Lastly, click on the Background Properties icon, choose URL in the Image drop-down menu, and select Once from the Repeat option. Drag the Pick Whip to the nav_arrow.gif file in the Site window. This will place a graphical arrow next to each item in your navigation. You can also select and delete extra navigation rows.
STEP 6 Preview for Browsers and Mobile Devices
Preview your page in a browser. To see the full advantage of CSS-based layout, open GoLive’s Small Screen Rendering under the File>Preview In menu (GoLive CS2 only). CSS objects can also be rearranged by devices with small screens, such as PDAs and cell phones—a feat not possible with table-based layouts.
Photoshop
Illustrator
Indesign
Dreamweaver
Fireworks
Premiere
Flash
After Effects
Lightroom
Acrobat
Featured Partner 
- Dragging an Object Between Documents
- TV Scanline Effect
- Trick to the Glossy Effect
- 3D Text
- Changing Type on a Path
