Oct 10

DHTML Menu Tutorial: How to use rulers to perfect your layout?

There are two ways to show ruler in Sothink DHTML Menu, one is to click “View > Ruler” on the menu bar; the other is to press shortcut key Ctrl+R.

Change the measurement units

To change the measurement units, just right-click anywhere within the ruler to popup ruler settings. The available units are pixel, inch, or centimeter. And default measurement units is pixel.The current coordinates of the mouse show in the right bottom of the state bar when the measurement units is pixel. You can see the current coordinates of the mouse as X 148 and Y 44 from above image.

Change the coordinate origin
To change the coordinate origin, just press down the mouse in intersection area of horz ruler and vert ruler, and then drag the crossing down to the position where you want the coordinates origin locate. When dragging the crossing, a horz and a vert line will appear to guide you.
The new coordinate origin is the intersection of horz guide and vert guide line. Take above image for example, new 0 in the top ruler moves 200 pixels right ; and new 0 in the left ruler moves 150 pixels down, the crossing is the new coordinate origin. Though the guide lines are only visible in the preview window, it is allowed to set the new origin anywhere outside the preview window.

To restore the ruler coordinate origin you can choose “Reset” in the right-click menu mentioned above (Right-click anywhere within the ruler to let the menu popup).

Download Sothink DHTML Menu to get more ruler function.