SPACE CASEThe use of transparent gifs as spacers in tables continues to mystify most people. The first thing to know is that Size Matters !! In fact this is all about size.....You will be putting transparents and gifs together to cover the entire table as necessary left to right. We know the sizes of the gifs, and we know the size of the table background. What we need to find are the sizes for the transparent gifs to make our images appear at the place we want them. 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. The first thing to remember is that tables load from left to right and top to bottom so the first spacer always starts at 0x0. But where does it end?? The width of this first spacer will be the distance from the left border to where your first image starts. The height of this spacer will be the distance from the top of the table to the bottom left point of your image. You're right, that tells you nothing!!! Take your background image to Image Magick and input and view. Have paper and pencil handy. Then click on the point on your background image where you want the bottom left corner of your first image and write down the coordinates. Do the same for image two and three. Now you have all the information you need to place your images. The first transparent spacer ends where you clicked #1 at Image Magick:: width="105" height="65". You may need to modify the width and height slightly to get your image in the exact place you want it. Ok, on to the second one. We put a <br> after the first image so the next transparent and image go under the first. The numbers I got for image 2 were:: width 60 and height 130. NOTE That height number is from the top of your background, but we've already used 65 pixels for the first image, so 130 minus 65 is 65.... Therefore our next transparent image is 60 wide and has a height of 65. Ok, on to the last one. Again we put a <br> so the next transparent and image go under the first two. The numbers I got for image 3 were:: width 130 and height 220. NOTE That height number is from the top of your background, but we've already used 130 pixels for the first two images, so 220 minus 130 is 90.... Therefore our next transparent image is 130 wide and has a height of 90. <center><table cellspacing="0" cellpadding="0" background="tree-grass1.jpg" width="244"height="320" border="2"><tr><td align="left" valign="top"><img src="transban.gif"width="105" height="65"border="2"><img src="blackbird_ani.gif"width="33" height="34"><br><img src="transban.gif"width="60" height="65"border="2"><img src="blackbird_left_ani.gif"width="33" height="34"><br><img src="transban.gif"width="130" height="90"border="2"><img src="blackbird_ani.gif"width="33" height="34"></td></tr></table></center> |