Already on ArticleSlash?

Forgot your password? Sign Up

Online Ruler - How to Copy Website Layouts


Visitors: 3,695
 1 vote

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.

See my favorite Online Ruler


Article Source:

Rate this Article: 
100% copy DVD movie to blank DVD disc fast with iMacsoft DVD Copy for Mac
Rated 5.0 / 5
based on 1 vote

Related Articles:

Good Website Copy

by: John Woo (December 12, 2007) 
(Internet and Businesses Online/Internet Marketing)

Website Copy Translation in London

by: Joel Tarplin (December 21, 2011) 
(Reference and Education/Languages)

How to Improve Your Website With Direct Response Copy

by: James W Brown (June 16, 2008) 
(Writing and Speaking/Copywriting)

Website Advertising 2 Legal Traps to Avoid When Writing Your Own Copy

by: Chip Cooper (June 21, 2008) 
(Internet and Businesses Online/Internet Marketing)

My Brothers Ruler

by: Catharine Parks (June 23, 2008) 
(Self Improvement/Inspirational)

Printable Ruler - How Accurate Can it Be?

by: Andy Duframe (April 07, 2008) 
(Internet and Businesses Online/Web Design)

Writing Sales Copy - How to Navigate the Body Copy Minefield Without Getting ..

by: Clayton G. Makepeace (August 21, 2007) 
(Business/Marketing Direct)

Average Indian Person Just Gets A Copy Of Pirated Windows Instead Of A Free And .

by: J. Watananbe (February 19, 2007) 
(Computers and Technology)

Learn the Basic Ways on How to Read a Ruler

by: John Grant (August 06, 2008) 
(Reference and Education)

100% copy DVD movie to blank DVD disc fast with iMacsoft DVD Copy for Mac

by: Tracy Sue (July 06, 2011) 
(Computers and Technology/Software)