page layout notes

Please read Chapter Six about Divisions

Web Page Design and Layout

We want to control the precise placement of texts and images in a webpage. The usual webpage size is 600 pixels wide and 400-500 pixels high. There are three techniques for page layout using divisions, tables or frames.

The first technique for layout is to use the tags <div> to specify the absolute location of text in a page.

<head>
<style type="text/css">
div.title
{position:absolute;
 left:0;
 top:0;
 bottom:60;
 width:600;
 text-align:center;
 font-size:24pt}
div.col1
 {position:absolute;
  left:0;
  top:290;
  bottom:500;
  width:200}
div.col2
 {position:absolute;
  left:200;
  top:290;
  bottom:500;
  width:200}
</style>
</head>


<body>
<div class="title">
Technology Today
</div>

<div class="col1">
This is text for the first column
</div>

<div class="col2">
This is text for the second column
</div>
</body>

This is the resulting web page. If you look at the source code, you will notice the header for XHTML has been removed. Depending on the browser, the division tags sometimes do not work well with XHTML header in place (the various divisions may pile on top of one another). If you find this happens, remove the XHTML header.

The second technique for layout is to use tables

<body>
<table width="600" border="0">
<tr>
<td colspan="2" align="center" height="60">
This text will be in the top row
</td>
</tr>
<tr>
<td width="300" height="440">
This text will appear in the bottom left cell
</td>
<td width="300" height="440">
This text will appear in the bottom right cell
</td>
</tr>
</table>
</body>

This is the resulting web page. Tables can be nested to produce very complex layouts.

The Box Model

The CSS Box Model lets you work with the boxes that a browser places around each block element as well as some inline elements. This lets you add formatting such as margins, padding and borders.
By default, the box for a block element is as wide as the block that contains it and as fall as it needs to be based upon its content.
You can use the height and width properties to specify the size of the content area for a block element explicitly.
You can use other properties to control the margins, padding and borders for a block element. Then, these properties are added to the height and width of the content area to determine the height and width of the box.

The formula for calculating the height of a box

 top margin  +  top border  +  top padding  + 
 height  + 
 bottom padding  +  bottom border  +  bottom margin

The formula for calculating the width of a box

 left margin  +  left border  +  left padding  + 
 width  + 
 right padding  +  right border  +  right margin

The HTML for a page that uses the box model

<body>
 <section>
   <h1>San Josquin Valley Town Hall</h1>
   <p>Welcome to San Josquin Valley Town Hall.
      We have some fascinating speakers for this session!</p>
 </section>
<body>

The CSS for the page

body {
 border: 3px dotted black;
 margin: 10px;
 }

section {
 border: 2px solid black;
 width: 500px;
 margin: 20px;  /* all four sides */
 padding 10px;  /* all four sides */
 }

h1, p {
   border: 1px dashed black;
   padding: 10px;
 }

h1 {
   margin: 0;  /*all four sides */
   padding-left: 15px;
  }

p {
   margin: 0;  /*all four sides */
   padding-left: 15px;
  }

 }