|
Home >> Tutorials/FAQs >> CSS Tutorials >> Index
CSS Tutorials - Page Layout and Background Image Design
By: FYICenter.com
Part:
1
2
3
4
5
6
(Continued from previous part...)
What Are the Page Widths on Popular Websites?
If you want to find out what are the page widths on some popular Websites, first enter the following
HTML code into a file, pageSizes.html:
<html><body>
<p>Page Size Test by FYICenter.com:</p>
<table>
<tr><td align=right>500 pixels</td>
<td align=left><hr width=500></td></tr>
<tr><td align=right>600 pixels</td>
<td align=left><hr width=600></td></tr>
<tr><td align=right>700 pixels</td>
<td align=left><hr width=700></td></tr>
<tr><td align=right>800 pixels</td>
<td align=left><hr width=800></td></tr>
<tr><td align=right>900 pixels</td>
<td align=left><hr width=900></td></tr>
</table>
</body></html>
Then view pageSize.html and the target Web site in two non-full-screen browser windows. If you line
up those two windows properly, you should be able to figure out the page width of the target Web site in pixels.
Here are the page widths of some popular Websites:
www.yahoo.com 760 pixels
www.myspace.com 800 pixels
www.msn.com 770 pixels
www.ebay.com 760 pixels
What Are the Length Units Used in CSS?
To control your page width and page layout, you must understand the length units used in CSS.
Here is a list of main length units:
cm - One centimeter, absolute unit.
em - The height of the current text font, relative unit.
ex - The height of the letter 'x', relative unit.
in - One inch, absolute unit.
mm - One millimeter, absolute unit.
pc - One Pica = 12 pt, absolute unit.
pt - One point = 1/72 inch, absolute unit.
px - One pixel of the browser resolution, relative unit.
If you want to compare those units, you can try the following file of HTML and CSS codes:
<html><body>
<p>Length Units Test by FYICenter.com:</p>
<table>
<tr><td align=right>1 cm</td>
<td align=left><hr style="{width: 1cm}"></td></tr>
<tr><td align=right>10 em</td>
<td align=left><hr style="{width: 10em}"></td></tr>
<tr><td align=right>10 ex</td>
<td align=left><hr style="{width: 10ex}"></td></tr>
<tr><td align=right>1 in</td>
<td align=left><hr style="{width: 1in}"></td></tr>
<tr><td align=right>10 mm</td>
<td align=left><hr style="{width: 10mm}"></td></tr>
<tr><td align=right>6 pc</td>
<td align=left><hr style="{width: 1pc}"></td></tr>
<tr><td align=right>72 pt</td>
<td align=left><hr style="{width: 72pt}"></td></tr>
<tr><td align=right>90 px</td>
<td align=left><hr style="{width: 90px}"></td></tr>
</table>
</body></html>
How To Set Page Width Relative To the Browser Width?
The easiest way to set your page width is to not set any page width. Your page width
will be equal to the browser window's width minus margins. If you want to try this,
you can enter the following HTML document called, browserLayout.html:
<html><body style="{margin: 0.2in}">
<H1>Page Width Equal to Browser Width</H1>
<p><script language="JavaScript">
for (i=0; i<300; i++) {
for (j=0; j<10; j++) {
document.write(j+' ');
}
}
</script></p>
<p align="right">By FYICenter.com</p>
</body></html>
Now view browserLayout.html in a Web browser. You will see a page fill with numbers.
The page width will equal to the browser window width. If you resize the browser window,
the page width will be resized too. The page will look like this:
(Continued on next part...)
Part:
1
2
3
4
5
6
|