Space Case Advanced

SPACE CASE ADVANCED

Okay boys and girls, get your paper and pencil because we're going to place gifs that overlap on the vertical plane.
Here's my image in a table, there is nothing in the td cell. A border of 2 will be used in all examples to show how the gifs are put together.

As you can see by my numbers above, some of my images are on the same vertical plane but are at different heights! Yikes! The same principle goes here. We fill up the space all around where we want our images to go, it just takes a bit more code....and tables.

The first plane is easy....It has two images. The first starts at 80pixels across and the second starts at 170pixels; both are 50pixels from the top. So across this plane we need a transparent spacer 80 wide and 50 in height. Then our crow which is 33pixels wide (Remember that.); then another transparent; then the last crow.

So how wide is the second transparent spacer? If you said 57pixels, give yourself a gold star!! The image starts at 170, but our first transparent was 80 and then our first crow at 33pixels so:: 170-80-33=57. Now we have all the information we need for the first plane.

Inside your main table cell you're going to put another table to hold the transparents and the images.

Here is the code:

<center><table cellspacing="0" cellpadding="0" background="spooky_tree_grass.jpg" width="267"height="320" border="2"><tr><td align="left" valign="top">
<table cellspacing="0" cellpadding="0" border="0"><tr><td align="left" valign="top"><img src="transban.gif"width="80" height="50"border="2"><img src="blackbird_left_ani.gif"width="33" height="34"><img src="transban.gif"width="57" height="50"border="2"><img src="blackbird_ani.gif"width="33" height="34"><br></td></tr></table>
</td></tr></table></center>

The second plane also has a transparent, a crow, transparent, and crow, BUT the two images are at different heights. Again we're going to put a table inside that one main TD cell, under the table for plane one. Because tables automatically go one under the other down the page, no <br> is necessary between the two tables. We have our images at different heights on this plane so we need to separate the code for them. To do this we give each one it's own TD cell, so this table will have three TD cells.

Now for the math...one of our images is 100 pixels down and the other is 125........BUT we've already used 50pixels. ALL of our TD cells MUST be the same height so we'll use the lower one, 125-50=75. Our table is going to be 75 pixels high with three TD cells.

CELL ONE The numbers for 3. are 60x100 BUT but we already figured our table height was 75pixels so our first transparent will be 60x75 and that's it for cell one.

CELL TWO We know our crow goes here but he is to sit 100pixels below the top and our TD cell is 125pixels from the top. So that means we have to have a transparent under our image to lift it up....the height of this transparent will be 25. This cell will hold our crow a <br> and a transparent the width of our crow which is 33 and the height of 25. That's cell two.

CELL THREE Since the image in this TD cell sits at 125 the transparent and crow can be in this TD cell side by side. The numbers for 4. are 170x125, but our first and second TD cells took up 93pixels so 170-93=77. So our first transparent in this cell is 77x75, then the crow.

Here's the code::

<center><table cellspacing="0" cellpadding="0" background="spooky_tree_grass.jpg" width="267"height="320" border="2"><tr><td align="left"valign="top"> <table cellspacing="0" cellpadding="0" border="0"><tr><td align="left"valign="top"><img src="transban.gif"width="80" height="50"border="2"><img src="blackbird_left_ani.gif"width="33" height="34"><img src="transban.gif"width="57" height="50"border="2"><img src="blackbird_ani.gif"width="33" height="34"></td></tr></table> <table cellspacing="0" cellpadding="0" border="0"><tr><td align="left"valign="top"><img src="transban.gif"width="60" height="75"border="2"></td><td align="left" valign="bottom"><img src="blackbird_left_ani.gif"width="33" height="34"><br><img src="transban.gif"width="33" height="25"border="2"></td><td align="left"valign="top"><img src="transban.gif"width="77" height="75"border="2"><img src="blackbird_ani.gif"width="33" height="34"></td></tr></table> </td></tr></table></center>

The third plane On this last plane there is a huge space above the image....and we must fill it up. Plus fill the space before the image. Once again we'll use a table. The first thing in the TD cell will be the transparent gif to take up the huge space. Our last crow starts at 180x280. So how big will this transparent be??

More math::: We've already used 125pixels of height and our image is 34 high; the 280 is left bottom remember? So 280-125-34=121; which gives our transparent a height of 121. The width will be 100% or 267pixels, the width of the background. That is followed by a <br> to put the next transparent and image under this huge blank. The last transparent will be 180 wide and how high? You should have said 40....320-280=40 where 320 is the height of the background; and lastly our crow.

Here's the entire code for this tute.