Using CSS

Using CSS

So many have asked about css and how to do it so I thought I'd attempt to write a Help Page for it. I don't claim to be an expert and I don't know what some of the code means----the idea is to copy it and substitute your own images and numbers. It has been such a joy to play with and I hope everyone will try it.
- - - - - - -

We will place a kitty and puppy on a love seat.
For printers convenience, the urls are
http://www.wtv-zone.com/Kitkat3l/Help_Pages_3/cat_rolling_ball_ani_1.gif
http://www.wtv-zone.com/Kitkat3l/Help_Pages_3/lil_white_dog_ani_L.gif
http://www.wtv-zone.com/Kitkat3l/Help_Pages_3/luv_seat.jpg

Use Cmd+a Cmd+c to copy the code in the text area. Put this code on a page and print it off for a pattern to go by when you write your code.

<html><head><title>Luv Seat</title> <style> #luv_seat {position:absolute; left:40; top:20;} #kitty {position:absolute; left:150; top:54;} #dog {position:absolute; left:100; top:60;} </style></head> <body bc=white hspace=0 vspace=0> <div id=luv_seat> <table background="http://www.wtv-zone.com/Kitkat3l/Help_Pages_3/luv_seat.jpg"> <tr v=top> <td w=296 h=196> <div id=kitty><img src="http://www.wtv-zone.com/Kitkat3l/Help_Pages_3/cat_rolling_ball_ani_1.gif" w=61></div> <div id=dog><img src="http://www.wtv-zone.com/Kitkat3l/Help_Pages_3/lil_white_dog_ani_L.gif" w=32></div> </table></div></body></html>

Here is a printable page of the above CSS code.

For printer's convenience, the url is http://www.wtv-zone.com/Kitkat3l/Help_Pages_3/CSS.txt

Take the love seat to Image Magick and activate the yellow arrow by clicking on the image. Move the arrow to where you think the upper left hand corner of the dog image would be, and click. On the next page, write down the first two numbers. Do the same with the kitty image and write down the numbers.

These numbers will be the "left" and "top" numbers at the top of the code following the word style.

Have your printed code handy and start copying.

The first # is your background image. I made a chart with the widths and number of pixels from the left that will give you some idea of the numbers to use.

Put your point and click numbers in for the dog and kitty. They will be the left and top.

Put the body background color in.

Put div id="name of background - same as at top".

Put the url of the background in.

Put tr v=top.

Put width and height of background image.

Put div id= second # at top which would be kitty. Make sure the names are the same.

Put div id= third # at top which would be dog.

Type each line as it's written in the code.

Here is the finished image.

Dated this 22nd day of February, 2011.

Please write to me at Kitkat3l@(remove)webtv.net if you have questions or you can find me here.

Click here for more Help Pages by Mary.