| PRECISE PLACEMENT OF TEXT AND IMAGES ON WEBPAGES |
|---|
| Have you ever wanted to be able to place an image, text section or a table precisely on a page, but the alignment choices are either left, center or right? Just use these special CSS tags: |
| A. STYLE SCRIPT IN HEAD AND BODY |
| The first style tag goes between the <head></head> tags of the page: Substitute number of pixels for the question marks. Measure DOWN from the TOP (y axis), and OVER from the LEFT (x axis). z-index represents the layer (you can stick stuff on top of or overlap other stuff.) This next section is for users of MSN TV, but it will also be useful for computer users--just change the width of your page. CHALLENGE: Useable space for a MSNTV screen: 544 pixels wide by 372 pixels high. Image #1 - size 100x100; 10 pixels down from the top and centered. Image #2 - size 100x100; 20 pixels below #1 and offset by 30 pixels from the left: DOING THE MATH: For #1: 544 divided by 2 equals 272. Subtract half the image width - 50 pixels from 272 equals 222. For #2: Add 10px from top plus 100px #1 height plus 20px space equals 130. SCRIPT NEEDED: |
| BODY TAG: If you will be placing a mixture of images and text, then add this to the body tag: fontsize="small" ("medium" or "large"). Use the setting that you currently use (For MSNTV, the settings accessed from your WebTV Home for font or text size). If you use "small," and someone who uses "large" views your CSS-placed page, they will see text running into images. |
| B. STYLE SCRIPT IN BODY ONLY |
| We'll use the same images and placement as in the above section. But this time nothing goes in the head, as it all goes in the body: |
| FOR EACH ITEM |
When each item has its own z-index number, then you can layer one item over anoher one for diferent and unusual effects. Try this with different colored tables and transparency. You can substitute sections of text, inside of tables or not, for the images in the examples above. Use your imagination and have fun! |
| So that's how to place items (elements) precisely on a webpage - in a nutshell. Now go out and have fun creating! The "Big Daddy" of all CSS tutorials: W3C's School of CSS CSS Pointers Index Here's a CSS Validator. You just enter the url of the page you want to validate. Tuesday 07th of February 2012 01:06:09 AM by Tone By Tone Dot Net  Tandem Tooters  Arbor Hosting  |