116 - Borders on the #container - CSS

Learn These Tools & Concepts:

Borders on your divs can create definition and order.

Try using this quick and easy technique to see if you like it.

If not, you don't have to use it, but learn how to do them at least.

  •   This tutorial is part of theFan-Tastic Projectand the Design your Identity Project .

Step #1: Open the dive rule in Dreamweaver CSS ~

Go to: Window > CSS Styles or hit Shift+F11

Double-Click on #container

Step #2: Border Category ~

Click on Border

Step #2: Border Style Settings ~

You probably only want the left and right sides to have borders.

If So Uncheck Same for All on style:

Set the border style settings to anything you wish.

Don't use these settings! Get your own!

Step #3: Border Width ~

The width can be anything you want.

Don't use these settings! Get your own!

Step #5: Border Color ~

The color is always worth a look.

AGAIN - Try different borders! Experiment! Try Stuff! Don't be boring!

Step #6: CSS Rules for #nav

If your #nav is like this …

… If your nav bar is Horizontal, 90% width, try stretching it all the way accross.

Double-Click on #nav

Select Box set Width to 100%

Delete Height - leave it blank-

Step #7: CSS Borders for #nav

Set #nav borders

AGAIN - Try different borders! Experiment! Try Stuff! Don't be boring!

Hit OK

Step #8: Compress your Folder ~

Now all you have to do is Right-Click the root folder of your site, compress it and attach it.

Last Step: Save and Attach ~

Attach the .zip file with the completed links …

Once you've sent the .zip file, you can delete it. It's of no further use.

---