Summary:

Rouned Centered divs in Dreamweaver

    ●   Learn how to add padding and rounded corners to your divs.


Learn About:

Code Hints padding Rounded Corners

  •   This tutorial is part of the Fan-Tastic Project.

Other People's Work:

Here are examples of work inspired by this tutorial.


Step #1: Open your Page in Dreamweaver ~

Hopefully you've done this tutorial already and already moved to Dreamweaver …

Open your page in Dreamweaver and hit Split.

Locate your centered <div> tag that you added from this tutorial

… and add a space at the end of the string.

Code hints is Dreamweaver's way of helping you write proper code.


Step #2: Code Hints ~

The first thing you want to try is padding to your div …

Type     p     a     d     and Dreamweaver gives you code suggestions …

… select padding and experiment with distances in pixels.

The idea is to keep your elements aligned:


Step #3: Rounded Corners ~

Rounded corners may not work for everybody, but try it and see if you like …

border-radius may not have code hints. Type the code yourself. Again, experiment with the settings to get a curve radius you like …

More variations can be found here: http://www.css3.info/preview/rounded-border/


Step #4: Borders ~

Next, add borders to your div by specifying a width to the border …

… and then choose a border style from the code hints …

… and lastly, add a color.


Step #5: Percentages ~

Laslty, instead of using fixed with divs, change the width to 80%.

There are many examples of borders you can try:
http://azizlove.hexat.com/file/hexat/div

Always Be Creative! Try New Things! Experiment!


Last Step: Save and Attach ~

Save, upload your page, attach the link, and continue working …


Other Resources: http://www.css3.info/preview/rounded-border/ and http://www.impressivewebs.com/multiple-borders-css/ and http://azizlove.hexat.com/file/hexat/div