All of the layouts we've covered so far have used floats for positioning,
shifting divs to the left or right. The content oozes into place.
Absolute positioning (AP) takes a completely
different approach. Each div is positioned as an individual element,
aligned to precise coordinates. Absolutely positioned divs are taken
out of the normal flow of the document, which means that they are no
longer affected by other divs.
The advantage is that you will be able to place the AP div wherever
you want. The disadvantage is that you have to carefully plan the height
of each content area to prevent unintended overlaps.
Setting Up Your Divs
Let's see how this works. Create a new document, and name it "ap.html".
Go to Insert > Layout Objects > Div Tag.
Give the div an ID of "container".
Click inside the container div and hit your Return key a few times to
give yourself some space to work. Delete the filler text. With your cursor
planted inside the container div, go to Insert > Layout
Objects > Div Tag. Give the new div an ID of "header".
Type "Header" inside the div, and format the text with the
h1 tag. You can format the text with the h1 tag with some quick hand
coding or by selecting the text and choosing Heading 1 from the Format
menu of the Properties Inspector.
Click your cursor below the header div, but still inside the container
div. Insert another div (Insert > Layout Objects > Div
Tag) and give it an ID of "nav". Type some fake links
into the nav div, like "home, about us, news."
Click your cursor below the nav div. Go to Insert > Layout
Objects > Div Tag and give the div an ID of "mainContent".
Insert some dummy text inside this div (just copy/paste any paragraph).
Your document should look something like this—three divs nested
inside the container div. They are in normal flow, with no positioning
applied.
Positioning the Divs
Create a new CSS rule. Choose the "advanced" radio button
and type #header into the Selector field.
This ID selector will style the header div.
In the Background category, choose a background
color for the header.
In the Positioning category, set the positioning
type to "absolute." Give the div a width of 500 and a height
of 80. Set the placement to "Top: 0" and "Left: 0."
Click OK.
The result might look a little strange. The header div has been taken
out of the normal flow. It is overlapping the other divs.
Let's line up the other divs. Create a new CSS rule. Type #mainContent into
the Selector field.
In the Background category, choose a background
color for the mainContent div.
In the Positioning category, set the type
to "absolute" and the width to 500. Don't enter a height value—it
is uncertain how much content will go in this div, so we will just let
it expand down as necessary. Set the placement to "Top: 80" (so
it sits just below the 80 pixel header) and "Left: 0." Click
OK.
Looking better, but what happened to the nav div? It is completely hidden
behind the other divs. Let's move it up to the top.
Create a new CSS rule. Type #nav into
the Selector field.
In the Background category, choose a color
for the nav div.
In the Positioning category, set the type
to "absolute" and the width to 200. To make sure that the nav
div is placed on the top of the stacking order, give it a high z-index value,
like 10. The higher the z-index, the higher up the div goes in the stack.
Set the placement to "Top: 70" and "Left: 150." Click
OK.
All three divs are in place. However, the left-aligned layout might
not be the effect you want. On large browsers, there is a lot of empty
space on the right—it doesn't feel balanced.
Centering the Layout With a Containing Block
How can we center this layout? You might have noticed that there is
no "align-center" property in the Positioning category. Let's
consult the World Wide Web Consortium, www.w3.org—always
a good idea when you're not sure of the best approach to a challenge.
The mandate is:
Interpretation, please? A containing block is
an div that contains other divs. In the page we are working on now, the
header, nav, and content divs are nested inside the container div. This
means that the container div can be used as a containing block.
However, another factor is involved—the containing block must
have a position of absolute, relative,
or fixed. There are four positioning types:
 |
|
 |
| |
Absolute: An AP element is pulled
out of the normal flow. It can be placed anywhere on the page.
Relative: A relative element stays
in the normal flow, but it can be offset from its original position
with the properties top, right, bottom, and left.
Fixed: A fixed element will stay
in the exact same place, even when the browser window scrolls.
Static: A static element appears
in the normal document flow. This is the default positioning
type.
|
|
 |
|
 |
Our container div has a default position type of "static." To
make it work as a containing block for its nested AP divs, change the
position type to "relative."
Create a new CSS rule for #container.
In the Box category, set the width to
500. To center the container, set the right and left margins to "auto."
In the Positioning category, set the type
to "relative." Click OK.
Save and preview in a browser. The container div is centered, and the
nested AP divs are placed in relation to the container.
Overlapping Effects with AP
Jumping off from this basic concept, you can literally place elements
anywhere on the screen, creating all kinds of overlapping effects.
Dreamweaver provides two CSS layouts with AP elements. The 3
column, absolutely positioned, header and footer layout looks
exactly like a 3 column fixed layout. However, the sidebars are absolutely
positioned rather than floated. The container div is relatively positioned.
Each absolutely positioned sidebar opens up all kinds of options. The
sidebar's status of "absolute" makes it qualify as a potential
containing block. That means you can nest another AP div, setting its
position in relation to the sidebar.
Below, I've inserted a div in the sidebar and given it a red background
color. In the Positioning category, the
position type is set to "absolute." The placement is set to "Top:
90" and "Left: -20." This moves the div down 90 pixels
and over 20 pixels, in relation to the top left corner of the sidebar.
 |
| The absolutely positioned sidebar can
be used as a containing block for more AP elements. |
This is just a simple example, but think of all the cool overlapping
effects you could create using this method.
Something to watch out for: Make sure that the content area is taller
than the sidebars. The mainContent div is actually pushing down the footer.
If the mainContent div is too short, the footer will be hidden behind
the absolutely positioned sidebar columns.
 |
The sidebar columns
are overlapping the footer div.
|
You may have noticed an option in the Insert
menu, Insert > Layout Objects > AP Div (or Insert > Layout
Objects > Layer in Dreamweaver 8). This is a shortcut—it
inserts a div that already has the position type of "absolute." You
can drag the AP Div anywhere you want, or resize it using the handles
on the edges.
Pretty cool, but the bad news is that the
ID selector is saved as an internal style in the HTML file—not
in the external style sheet. This means that the style won't be available
on other pages in the site.
In general, I recommend using Insert > Layout
Objects > Div instead. It only takes a second to set the
positioning using the CSS panel, and you'll have the option to save
the ID selector to your external style sheet.
Adding Content and Design Elements
With the CSS layout of your choice in place, text and images can be
added quickly and easily, just as if you were working with table cells.
Needless to say, you'll start by deleting Dreamweaver's placeholder
text. Then just paste, type, or insert any content that you like.
Adding a Top Nav
You might decide to add a top nav below the header. There are several
ways to go about it.
The most direct method is to add two nested divs inside the header div.
Insert the banner image in the banner div,
and the nav list in the topnav div.
To insert a nested div, click inside the header div, then go to Insert > Layout
Objects > Div Tag. Choose "at insertion point" from
the Insert menu.
Then click below the banner div and insert another div for the topnav.
Sometimes it can be tricky to insert your cursor in the right place,
so if you have any trouble, just switch to the code view and type in
the div tags yourself.
Another approach would be to insert the banner.gif as a
background image.
Set the position of the header div to "relative" and
the position of the nested topnav div to "absolute." Then align
the topnav along the bottom left corner. You'll find these properties
in the Positioning category of the Rule Definition dialog.
Image Floats
To insert an image to the right of a text block, set the image to float:
right. Create a class style with the float property (found in the Box
category of the Rule Definition dialog), then apply it to the image.
If you want the image to align along the left edge, set it to float:
left.
To float several images in a column, add the property clear:
right. This will force each floated image to clear down to the
next row. You could also add a top margin, for some space between the
images.
To create a photo gallery with rows and columns of images, set each
image to float: left.
You can use this same method to float an image together with a caption.
First, insert the image and caption in a div. Then, create a class style
with the float property and a width property (both found in the Box category
of the Rule Definition dialog).
Don't forget to apply a width to the
floated div. Floated elements must have a defined width to work properly.
Images already have a width, but you have to specify a width for divs.
Centering an Image
If you need to center an element within a div, set the left and right
margins to "auto."
Extending the Design
When you finish your first page design, it can be used to produce many,
many more pages for the Web site. If all pages will share the same layout,
use a copy of the first page to make the second page, and insert the
new content. The .css file will already be linked and active. Repeat
the process to create all the remaining pages.
If your Web site will contain multiple page layouts, you can use the
body class selector to customize each page.
Each Dreamweaver CSS Layout has a unique class applied to the body tag:
 |
 |
| This class identifies the 1 column
fixed, centered, header and footer layout. |
This class identifies the 2 column fixed, left
sidebar, header and footer layout. |
Each div is formatted with a descendant selector:
.oneColFixCtrHdr #mainContent
This descendant selector applies to the mainContent div in the 1 column fixed,
centered, header and footer layout.
.twoColFixLtHdr #mainContent
This descendant selector applies to the mainContent div in the 2 column fixed,
left sidebar, header and footer layout.
This might look like gibberish, but it serves a very useful purpose—the
mainContent div in the 1 column layout can be formatted differently than
the mainContent div in the 2 column layout.
The first step is to identify the divs that will vary between the two
layouts. I've highlighted them below in green:
The mainContent div is a different width in each layout. Also, the sidebar1
div only exists in the 2 column layout.
The header, footer, and container divs don't vary—they use the
same formatting in each layout. This means we can remove the body class
selectors from these divs. After we meld the two style sheets, our selectors
will look like this:
Combining the two style sheets takes a little copy/paste work.
First, create the 1 column layout. Save the oneColFixCtrHdr.css file
in your local root folder, along with the html file.
Next, create the 2 column layout. Save the twoColFixLtHdr.css file
and the html file in your local root folder.
Open the oneColFixCtrHdr.css file. Select
the .oneColFixCtrHdr #mainContent descendant
selector and go to Edit > Copy.
Open the twoColFixLtHdr.css file.
Go to Edit > Paste to add the oneColFixCtrHdr
#mainContent descendant selector.
Now, remove the body class selectors from the divs that
won't vary between the two layouts. Delete the .twoColFixLtHdr body
class selector from every div except "sidebar1" and "mainContent."
To finish up, go to File > Save and
save the style sheet as global.css in your
local root folder.
Open the one column .html file. Using the CSS panel, select
the oneColFixCtrHdr.css file and click
the trash can icon to delete it. Then click the link icon and browse
to attach the global.css style sheet.
Repeat for the two column .html file. First, delete the twoColFixLtHdr.css external
style sheet. Then, attach the global.css style
sheet.
Both layouts are now attached to the global.css external
style sheet. If you make any changes to the common selectors like "body" or "container", it
will affect both layouts. If you make a change to a descendant selector,
like .oneColFixCtrHdr #mainContent, it
will only affect the mainContent div in the 1 column layout.
The Capgemini Web site shown below is an excellent example of a multi-layout
design. Here we see that some content areas from the home page are also
used on second-level pages, like the header and navigation. The second-level
pages have some new content areas of their own, like the right column.
 |
The use of CSS throughout
the Capgemini Web
site provides an innovative, classy, and consistent look—exactly
what this company wants to convey to its audience. |
Explore
the different types of CSS layouts.
. 
