 |
|
CSS Layer Framework
This exercise will help you get started with a web page built with CSS structure. This example is for a page with the content centered inside an 800 pixel wide area. Example file.
Zero out the Body
The first thing to do is to be sure that browser defaults don't control your web page. If you set the properties you want to be default by rewriting the <body>, you won't have to think so much about the various browsers.
- First set the margins to 0.
- Set your default fonts.
- Set the background color with a hexidecimal value or a background image.
Here is a possibility. Use it for a template, if you wish:
body
{
margin: 0;
padding: 0;
font-family: verdana, helvetica, arial, sans-serif;
color: #000;
font-size: 11px;
}Note that to be truly "accessible", the font size would have to be defined as a %. Because this is a beginning class, we will use pixels.
Remember that if you use this as an internal style sheet in one page, you need to put it in the <head> in a <style>.
<style type="text/css">
body
{
margin: 0;
padding: 0;
font-family: verdana, helvetica, arial, sans-serif;
color: #000;
font-size: 11px;
}Build a "Container" Layer
The first layer is like the outer table on a web page. It just holds everything together. Although this layer can be called anything you want, it is often called "container." This layer is especially important if everything on the page will be centered or indented, or if there is a background color or image in the content area. See a comparison of the container layers in 2 CSS Zen Garden sites. The example file for this page uses an internal style sheet to make it easier for you to see the effect of the code.
- Open a new Basic HTML page. Call it LayersExample.html
- Set your body properties as shown above.
- Create an ID layer called Main. Add the { } - empty for now. Look at the page.
- Add a border to your layer; so, you can see it. border: thin solid;
- The first step to centering the "container" layer is to set the position as relative: position: relative; That means that the browser will move it from where it would sit without any instructions. Absolute would measure from the edges of the body.
- Look at the page. Notice that the layer goes from edge to edge, if you set the margin to 0 in the body. Also notice that the <div> is exactly one line long.
- Type a title in the layer. Notice whether it picked up the fonts you used.
- Now that the browser knows where to start the measuring for positioning the other layers., we use: margin: 0 auto; for a fixed width page. Basically, the margins will adjust themselves automatically.
- If you are planning on having a page that adjusts with the width of the browser: margin-left: 10%;
margin-right: 10%; (or some other percentage value)- For our example use margin: 0 auto; Notice that it doesn't appear that anything has changed.
- Then we need to set the width of the layer: width: 800px; Notice where the layer sits on the page.
- Comment out the margin line. Notice where the layer sits on the page.
- Get two images and put them in an Images folder.
- In your #Main layer, set one of the images to be the background image. You will only see a small part of the image because the <div> is only one line high. Set the height of the <div> to some height that allows you to see your image. You can use height: 100%, but the browsers probably won't listen to your code.
- Look at the page, your image should be tiling.
- Add no-repeat after the address to the image file. What happens if you use background or background-image?
© 2009, Nora McDougall