Monday, May 24, 2010

What code do you use in order to make tables lay above a provided image?

I mean what is the code so that if I had a background image that has boxes on it, the table could be moved so that the text would be inside the boxes. HTML please.

What code do you use in order to make tables lay above a provided image?
The answer is more simple than it seems...


When you load the web page it will display the background image the same way each time in a pattern, so if you make your table where each box of the table has the same dimensions as a single box in the pattern then you can just add an inline style to the table


%26lt;table style="position:absolute ; left:0 ; top:0"%26gt;


and move the table until the the boxes in your table align with the boxes in the background image. You would move the table by changing the numbers in "left:0" and "top:0" . All of the boxes should align at the same time
Reply:Hmm sorry but no real HTML answer to this problem. You really have two options to achieve what you want.


1. You could use HTML layers and move those around based on your background picture. The draw back is not all browsers support layers the same and resizing of the page might affect the looks of it.





2. And this is what I recommend Build a background table with a zero boarder. Crop pieces of your background image and place them in the cells of your table. That way you can control where would you want your text in and where does the image go to. You can even place both a piece of the background image and text in one cell an effect that makes the design much more interesting.


No comments:

Post a Comment