• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

The Guiding Light

Guides are a layout feature I’ve always wanted in Dreamweaver; I find them incredibly helpful in other programs such as Fireworks. A guide is a vertical or horizontal line that enables you to line up various elements in your design. Because Dreamweaver doesn’t offer them, I found a way to make my own using Dreamweaver <div> tags and the magic of CSS.

Driving the heart of our Dreamweaver guides are two CSS classes, which I’ve called .horzGuide and .vertGuide. I’ve colored both guides a bright green and given them a high z-index of 100 to stand out—and on top—of the rest of the page. The key to the horizontal guide style is to set the border-top property to 1 pixel and the width to 100%, like this:


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint