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 Width to a Fixed Value?

If you don't want your page to be resized when browser window is resized, you need to set your page width to an absolute value.

Many Webmasters use TABLE tags to set page width to a fixed value. But it is actually easier to use DIV tags and CSS definitions to set your page width to a fixed value. All you have to do is to insert a DIV tag right after the BODY tag, and set a width this DIV tag, as shown in the following HTML document:

<html><head>
<style type="text/css">
  DIV.page {width: 7.0in}
</style>
</head><body><div class="page">
<H1>Page with Fixed Width</H1>
<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></body></html>

If you save the document as fixedLayout.html, open it and resize the browser window, the page size will not change as shown below:
           

How To Center Your Page in Browser Windows?

In the previous exercise, the page width is fixed, but the page is not centered. If you want to center your page in the browser window, you can add the CENTER tag before the DIV tag. The following tutorial exercise shows you how to use CSS definitions to center your page, set background color, and set page margins:

<html><head>
<style type="text/css">
  BODY {background-color: gray}
  DIV.page {background-color: white; width: 6.0in;
    padding: 0.25in; text-align: left}
</style>
</head><body><center><div class="page">
<H1>Centered Page with Fixed Width</H1>
<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>

If you save the document as centeredPageLayout.html and view it, you will see a page like this:
           

What Happen to Images with Absolute Page Width Units?

If you set your page width to absolute length units like inches, what will happen to image sizes? Usually, images have relative length units like pixels. If you include large images on your pages, visitors with different browser resolutions may see your images behave differently because of the relative length units on images.

The HTML and CSS code below gives you a good example:

<html><head>
<style type="text/css">
  BODY {background-color: gray}
  DIV.page {background-color: white; width: 6.0in;
    padding: 0.25in; text-align: left}
  HR {width: 6.0in}
  P {width: 6.0in}
</style>
</head><body><center><div class="page">
<p>
<img src=fyi_banner_blended.jpg width=728 width=90>
</p>
<H1>6 Inches 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 6InchPageLayout.html and view it with FireFox on a 1280x1024 screen, you will see a nice looking page like this:
           

But if you view it with IE 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...