5/3/11

How to Create a Liquid Web Page

By default, your Web page appears in a fixed layout, which means it stays the same width even if the visitor changes the size of his browser window. Fortunately, you have the option to implement a liquid layout using Cascading Style Sheets (CSS). CSS enables you to specify your page width in a percentage, so that the page moves with the browser as it is minimized and maximized. Use the text editor application on your computer to apply the CSS style rule that creates a liquid Web page.
    • 1

      Start your text editor application and open a website document.

    • 2

      Enter the following CSS code between the "<head></head>" elements of your page:

      <head>

      <style type="text/css">

      </style>

      </head>

    • 3

      Type "body" between the style tags and follow this with a pair of curly brackets to create the style rule that controls the whole Web page. Enter your rule like so:

      <style type="text/css">

      body { }

      </style>

    • 4

      Enter "width: 100%;" inside the brackets. This value allows your page to successfully shrink or expand with the browser.

    • 5

      Save your file. Your complete CSS style rule now looks as follows:

      <head>

      <style type="text/css">

      body { width: 100%; }

      </style>

      </head>

  • No comments: