Summary:

Style your Tool-Tip Rollovers in Dreamweaver

    ●  Your Pop-UPs are like mini-web pages

    ●  Apply Gradients, Background Colors, Borders, Rounded Edges, Everything you've Learned!


Learn About:

Div Styling
corner-radius box-shadow

This tutorial is part of a series:

1 - 175_java_tooltip_Dw    2 - 64_style_apdiv_Dw.htm    3 - 95_float_animated_gif_Dw.htm  4 - More    5 - More     6 - More   7 - More  

  •   This tutorial is part of the What in the World? Projects.

Other People's Work:

Here are examples of work inspired by this tutorial.

Step #1: Open your Travel Site in Dreamweaver ~

Hopefully you've done this first: 175_java_tooltip_Dw.htm


Scroll up and find the apDiv1 you just made …


Step #2: Background Colors ~

Click at the bottom, hit Enter and watch the code hints appear …

… type background-color: and pick your color …

… lastly, make sure you close the tag by putting a semi-colon at the end.


Step #3: Rounded Corners ~

Add border-radius by copying this code …

border-radius:  15px; 
-webkit-border-radius:  15px; 
-moz-border-radius:  15px;   

… and paste it in your apDiv code:

apdiv border

Save it and try it!

Try other samples of rounded corners here: http://cssround.com/


Step #4: Box Shadow ~

Next add box-shadow using this code …

box-shadow:  7px 0px 10px -5px #000, -7px 0px 10px -5px #000; 
-webkit-box-shadow:  7px 0px 10px -5px #000, -7px 0px 10px -5px #000; 
-moz-box-shadow:  7px 0px 10px -5px #000, -7px 0px 10px -5px #000;   

… to make something like this:

apdiv1 corners


Step #5: Borders ~

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

container


Step #6: Border Category ~

Click on Border …

border 1

… and set Style, Width and Color settings. Try different Stuff! Experiment!

groove

Try different Stuff! Experiment!

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


Step #7: Padding ~

Also add padding to the div and experiment with distances in pixels …

 padding: 5px; 

Last Step: Upload your Site ~

Save and upload your files with the completed code.

upload your site

Attach the URL of your site, and continue working…