Online Ruler - How to Copy Website Layouts

By Andy Duframe

Finding the dimensions of an online image or graphic is easy enough. Just right click and check properties. But finding the dimensions of website layouts - like tables, panels, and menu bars is not quite as easy. Here are few tricks I use to get an inside look at website layouts using an online ruler, the page source, and CSS files.

Online Ruler
This is a small program that you download to your computer. Once installed, the software launches a transparent window over your computer screen with pixel rulers along the top and left side. If you mouse over the bottom right corner, you'll see that you can shrink or expand the box, with a constant readout of the exact dimensions of the box. Drag the box around to different sections of the page to get exact dimensions in pixels.

Page Source
Looking at the html code of a website can often give you the exact dimensions of its layout. Most web browsers include a menu option for viewing the html code of a web page. With Internet Explorer, look for the page menu option and select page source. This will open the html code in Notepad. Search (ctrl + f) for table width and td width. If a web page uses tables for its basic layout, these dimensions will be easy to find.

CSS file
Websites that use cascading style sheets (css) in place of tables will not show layout dimensions in the html source code. Those specific numbers are in the .css file for that page. To see the CSS file for a particular website, open the page source html code (see above) and search for .css in the text (this is usually at the top of the page). The code should look something like this: /css/mystyle.css

Next go to your browser window and add this code to the root directory of the URL address. Nine out ten times this will open the CSS file, usually in whatever html editor you have installed on your computer or in notepad. Now look through the CSS file for the word "width" to see the exact dimensions of all tables and columns. This method might take more time than an online ruler, but it gives you more accurate results.

Article Source: http://EzineArticles.com/?expert=Andy_Duframe