| 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.) 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! |
| EXAMPLES |
|
Flo's Pages features four overlapping hyperlink images that illustrate the topics of these websites. License Plates, an example of precision placement and layering. #1 is the top license plate and is z-index: 1. Proceeding from the top down, the z-index changes in the following way: 1; 3; 5; 7 (the plate on top of all the other plates); 6; 4; and 2. However, to place the title, the link and my copyright info in the places where I wanted them, I had to use three additional numbers and layers: 8, 9 and 10. If you click on the link below the plates, you'll go to a page of style script by Dave, using the same jpeg image. His z-index numbers start with the top plate and run down from the top: 1; 2; 3; 4; 5; and 6. Again, to place the title, the link and my copyright info, I used three additional numbers and layers: 7, 8 and 9. Flo's Cyberspaces is the most complicated precision placement I've tried to date. The "keyboard" consists of a large table with five rows <tr> of 10 cells <td> each. It is placed about 50 pixels down from the top and is z-index: 1. The second layer (z-index: 2) consists of the letters and numbers, each one a separate item number placed precisely on top of each of the "keys." Many of these are also hyperlinks to my other pages. The gradtables at the top and bottom of the "keyboard" are the next elements with their own z-index numbers. The copyright info is its own table with its own placement and z-index number. The mouse and the links table are all one table that's included within the z-index for the copyright info gradtable. You can string tables one after the other within a single z-index number, providing you don't want them to overlap each other. If you overlap them, then they'd each need their own z-index number. I believe there are five layers (z-index numbers) on this page. 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. Another validator by w3.org Uploader and another by them URI. You just enter the url of the page you want to validate. Copyright© 2004 Tone By Tone Dot Net  Tandem Tooters  Arbor Hosting  |