Blue Lobster Art and Design - Sacramento Web Design and Graphic Design » CSS

Master Your Website Layout with these 6 CSS Properties

Dawn Pedersen — Thu, 04 Jun 2009 04:51:11 +0000

Fancy div arranging

If you’re new to designing with CSS layout, it’s simple to get started with these six positioning properties:

z-index
position
float
clear
top
left

There are more positioning properties, but we’ll begin with these most practical ones.

To begin, here are two divs with very simple CSS rules. None of the special positioning properties have been applied yet (click on this image or any image below to view the live page.) We’ll call these the “simple” divs.

CSS divs with no special positioning

We’re using simple HTML too:

[text]

1. Z-Index

The z-index CSS property identifies how “close” or “far away” a CSS layer is from the viewer. In other words, width goes in one dimension horizontally, height adds a second dimension vertically, and z-index adds a third dimension on an axis perpendicular to the screen. This is useful when divs overlap. The lower the z-index (e.g. z-index: 1;), the further back a div is. The higher it is (e.g. z-index: 99;), the more forward it is. This technique requires that you set the position to relative (we’ll look at position in greater detail later.)

Below, I’ve adjusted the margins of the second div so that the two boxes overlap. The purple box has a z-index of 1, putting it behind the orange box which has a higher z-index of 2. Both have a position of relative.

Overlapping divs with different z-index values

Here’s what happens if we switch the z-index values of the two boxes: the purple box moves to the front.

Switch the z-index values

2. Position

The position CSS property can be either set to static, relative, absolute, fixed. The default position is static.

Static divs get plunked down right where they are in the flow of the HTML.
Relative divs are like static divs but can be moved relative to the previous content.
Absolute divs get pulled out of the HTML flow and act independently of all other divs.
Fixed divs work like absolute divs with a twist: they stay in the same place in the browser window even when you scroll down.

We’ve looked at an application of the relative position above. Let’s go back to our simple divs and add absolute positions instead. Both divs are now positioned relative to top-left of the browser window instead of relative to each other.

Absolute positioning

A div with a fixed position stays in one place as you scroll.

Fixed positioning

Next: 3. Float

Make a Multi-Level CSS Dropdown Menu in Dreamweaver CS4

Dawn Pedersen — Sat, 30 May 2009 06:43:52 +0000

Menu Preview

Traditionally, multi-level dropdown menu navigation has been done in JavaScript. These kinds of menus can be very confusing to code, and more confusing to go back and edit later. Do it better and more beautifully with CSS and Dreamweaver CS4.

For this tutorial, we’ll be making a horizontal navigation bar for a zoo. It will have dropdowns and a couple of items will have flyouts to the right. We’ll simplify it the navigation by pretending our zoo has only four animals. I guess we can’t expect too many paid admissions. Luckily, after you’ve completed this tutorial you should be able to adapt this technique for any site.

Preview our menu here.

Step One: Plan Your Nav

Kookaburra

It’s really important to get organized before you code. The BluLob Zoo needs three first-level navigation items: Home, Visit Us and Animals. Visit Us will need three second-level items: Hours & Pricing, Maps, and Calendar. Animals will have two second level items – Birds and Beast, and each of these will feature two animals at a third level (Kookaburra and Hammerkop for Birds; Wolverine and Wombat for Beasts).

It will help to create an outline of how we want our navigation organized. This can be done on the computer, but I often find myself sketching things up on Post-It notes or sheets of scratch paper. Here’s my sketch:

Sketch of Navigation Organization

An alternate outline would look like this:

Home
Visit Us
- Hours & Pricing
- Maps
- Calendar
Animals
- Birds
  - Kookaburra
  - Hammerkop
- Beasts
  - Wolverine
  - Wombat

Both of these outlines together will help us visualize how our navigation will be built. Let’s go!

Step Two: Build the HTML

Our navigation bar has two components: the HTML on the web page, and the CSS styling which will be in an external CSS style sheet that can control every page on our site. We’ll start with the basic content in HTML without any styling. Take a look at that second outline above. We need to recreate that in Dreamweaver. Remember to save your file frequently!

Create a new HTML page in Dreamweaver (File > New). Then select Blank Page and HTML. Choose (none) for the layout, and set XHTML 1.0 Transitional as the Doctype. Click Create.

Create a new HTML page

Save the file as menu.html (File > Save As). Click on the Design button in the Document Toolbar.

Save As and Design button

Navigation is really just a type of list, so we’ll make our menu a list. In the Property Inspector, click on the Unordered List icon. If you cannot see the Property Inspector, go to Window > Properties.

Unordered List icon

Type out your first level navigation: Home, Visit Us and Animals. Press Enter (Mac: Return) after each item. Don’t worry that we appear to be going down rather than across. We will finesse that in the CSS.

First Level Navigation

Click with your cursor just after the s in Visit Us. Press Enter/Return and then press Tab. The list should indent and the bullet type should change. This will be for our second-level navigation.

Second-level navigation

Type in Hours & Pricing and press Enter/Return. Type in Maps and press Enter/Return. Type in Calendar.

Subnavigation for Visit Us

Click after the empty bullet at the bottom of the list and press Tab. Type in Birds and press Enter/Return. Type in Beasts.

Subnavigation for Animals

Time for our third-level items. Click after the s in Birds. Press Enter/Return and type Kookaburra. Press Enter/Return and type Hammerkop.

Subnavigation for Birds

Repeat for beasts: type in Wolverine and Wombat.

Subnavigation for Beasts

Finally, we need to set up each item as a link. We don’t have pages to actually link to yet, so we’ll put in a pound sign (#) which is a sort of link placeholder. Select the word Home. In the Property Inspector, type # in the Link box and press Tab.

Add a link placeholder

Do the same for all the other navigational items.

Add link placeholders

All of our basic HTML scripting is done. Now we need to tell Dreamweaver what CSS classes and IDs to use in the HTML. And we need to set up all of our style rules in an external CSS file.

Next: Step Three: Start Building the CSS

3-Column Web Page Using CSS Layers in Dreamweaver CS4

Dawn Pedersen — Tue, 10 Mar 2009 16:38:36 +0000

3-Column CSS Layout

Doing layout for Web pages with tables is so 1998. Tables should be used for data, not to arrange the elements on your Web page. A better method is to use CSS layers. They are much easier to format than tables, once you get the hang of it. But the best thing is that if you use CSS layers to design your site, you can make a site-wide layout change in the blink of an eye.

If you’ve never tried CSS layers for your site layout, try this one. Dreamweaver CS4 makes it a cinch, if you pay attention to the details.

Your feedback is encouraged and much appreciated!

P.S. If you do not have Firefox installed, I highly recommend you install it.

What You Should Know First

The Dreamweaver CS4 Workspace

Step 1: Create the Body

We’ll build a Web page design essentially like the class Web site I built at nhsdesigns.com. First, we’ll set up a gray background behind it all, and set the font style. To do this, we will use CSS to redefine the formatting of the tag.

Create a new, blank HTML document in Dreamweaver.
Save the file as index.html inside your CSS Layers folder.
In the Document tool bar, change the Title to CSS Layers.
Show the CSS Styles (Window > CSS Styles) and click on the All button.
Click on the New CSS Rule icon.
Use these settings and click OK:
1. Selector Type: Tag
2. Selector Name: body
3. Rule Definition: New Style Sheet File
Save the style sheet file as main.css in your CSS Layers folder.
In the CSS Rule definition for body box, use these settings and click OK:
1. In the Type category, change the Font-family to Verdana, Geneva, sans-serif, the Font-size to 10px, and the Color to #000000.

In the Background category, change the Background-color to #CCCCCC (a light gray).

Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

Step 2: Create the Outer Container

Next, we’ll create the large white layer that contains everything else. Using this layer to contain the others layers will create a nice, 15-pixel white border around your page. To do this, we will create an ID selector, which can be used only once by a single div tag on the page. ID styles begin with a pound (#) sign.

In the CSS Styles panel, click on the New CSS Style icon.
In the New CSS Rule box, use these setting and click OK:
1. Selector Type: ID
2. Selector Name: #container
3. Rule Definition: main.css
In the CSS Rule definition for #container box, use these settings and click OK twice:

Category	Subcategory	Setting	Value
Background		Background color:	#ffffff
Box		Width	720 pixels
	Padding (UNCHECK same for all)	Top	0
	Margin (UNCHECK same for all)	Top	0
		Right	Auto
		Bottom	0
		Left	Auto
Border (same for all)		Style	solid
		Width	15 pixels
		Color	#ffffff

To insert the layer into the page, click inside the page and choose the following menu command: Insert > Layout Objects > Div Tag.
In the dialog box, select ID: container and click OK.
Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

Step 3: Create the Header

Here we’ll create a header area in which a banner image could go later. It will have a baby blue background, and have a 1-pixel white bottom border which separates it from the navigation bar.

Click inside the #container layer. Delete the text that automatically filled the layer but leave your cursor inside the layer.
Let’s try a quicker way to insert the Div tag:
1. Open the Insert panel (Window > Insert).
2. Make sure that Common is selected in the drop-down menu at the top of the panel.
3. Click on the Insert Div Tag button.
In the Insert Div Tag box, click on the New CSS Rule button.
In the New CSS Rule box, use these settings and click OK:
1. Selector Type: ID
2. Selector Name: #header
3. Rule Definition: main.css
In the CSS Rule definition for #header box, use these settings and click OK twice:

Category	Subcategory	Setting	Value
Background		Background color:	#22b5ff
Box		Width	720 pixels
Box		Height	220 pixels
Border (UNCHECK same for all in all 3 columns)	Bottom	Style	solid
		Width	1 pixel
		Color	#ffffff

Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

Step 4: Create the Navigation Area

We need a rectangle below the banner for links. It will have a dark blue background and white text. It will also have a 1-pixel white bottom border, and 10 pixels of padding around its text. First, we need to tell Dreamweaver precisely where to put it (after the header div) by viewing the code.

Click on the Code button on the Document tool bar.
Find this bit of code and click just before it:
Click on the Design button on the Document tool bar.
In the Insert panel, click on the Insert Div Tag button.
Click on the New CSS Rule button.
In the New CSS Rule box, use these settings and click OK:
1. Selector Type: ID
2. Selector Name: #navigation
3. Rule Definition: main.css
In the CSS Rule definition for #navigation box, use these settings and click OK twice:

Category	Subcategory	Setting	Value
Type		Color	#ffffff
Background		Background color:	#005ac9
Box		Width	700 pixels
Box		Height	20 pixels
	Padding (same for all)	Top	10 pixels
Border (UNCHECK same for all in all 3 columns)	Bottom	Style	solid
		Width	1 pixel
		Color	#ffffff

Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this: