joe student


Summary:

Borders on the #container in CSS

    ●   Borders on your divs can create definition and order.

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


Learn About:

CSSBorder Pixels

  •   This tutorial is part of the Fan-Tastic Project and Art Genre Projects.

Other People's Work:

Here are examples of work inspired by this tutorial.

Step #1: Open the rule in Dreamweaver CSS ~

Go to: Window > CSS Styles or hit Shift+F11 and Double-Click on #container

container


Step #2: Border Category ~

Click on Border …

border 1


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.

groove

Don't use these settings! Get your own!


Step #3: Border Width ~

The width can be anything you want.

border width

Don't use these settings! Get your own!


Step #5: Border Color ~

Change the color to match your theme.

border

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


Step #6: OPTIONAL - CSS Rules for #nav (if you've got one!)

If your #nav is like this …

90 percent nav bar

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

Double-Click on #nav

Select Box

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

final nav


Last Step: Save and Upload your Work ~

If you have a web server, save your pages, upload them and attach the link …