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...)

How To Set Page Widths to Relative Length Units?

Knowing that setting page widths to absolute length units will cause problems on images with different browser resolutions, you can set your page width to a relative length unit, like px (pixel). The tutorial exercise code below sets a page width to 730 pixels:

<html><head>
<style type="text/css">
  BODY {background-color: gray}
  DIV.page {background-color: white; width: 730px;
    padding: 25px; text-align: left}
  HR {width: 730px}
  P {width: 730px}
</style>
</head><body><center><div class="page">
<p>
<img src=fyi_banner_blended.jpg width=728 width=90>
</p>
<H1>730-Pixel Wide with an Image</H1>
<hr align=left>
<p><script language="JavaScript">
  for (i=0; i<100; i++) {
    for (j=0; j<10; j++) {
      document.write(j+' ');
    }
  }
</script></p>
<p align="right">By FYICenter.com</p>
</div></center></body></html>

Save the code in 730PixelPageLayout.html and view it with FireFox and IE on a 1280x1024 screen, you will see the page displayed nicely in both browsers:
           
           

What Happen to Font Sizes with Relative Page Width Units?

If you set your page width to relative length units like pixels, what will happen to font sizes? Usually, font sizes have absolute length units like point (pt). If you specify font sizes in points on pages with pixel widths, visitors with different browser resolutions may see your texts behave differently.

The HTML and CSS code below gives you a good example of setting font size in points:

<html><head>
<style type="text/css">
  BODY {background-color: gray}
  DIV.page {background-color: white; width: 730px;
    padding: 25px; text-align: left}
  HR {width: 730px}
  P {width: 730px; font-size: 12pt}
  H1 {font-size: 24pt}
</style>
</head><body><center><div class="page">
<p>
<img src=fyi_banner_blended.jpg width=728 width=90>
</p>
<H1>730-Pixel Wide with an Image and a 24pt Title</H1>
<hr align=left>
<p><script language="JavaScript">
  for (i=0; i<20; i++) {
    for (j=0; j<40; j++) {
      document.write(j+' ');
    }
    document.write('<br/>');
  }
</script></p>
<p align="right">By FYICenter.com</p>
</div></center></body></html>

Save the code in 24PointPageLayout.html and view it with IE on a 1280x1024 screen, you will see a nice looking page like this:
           

But if you view it with FireFox on a 1280x1024 screen, you will see your page behaving incorrectly as:
           

(Continued on next part...)

Part:   1  2  3  4   5  6 


Selected Developer Jobs:

More...