The code about to be described can make pixel perfect content placement possible.
Say you have two images, like the two images below:
But, you want them to be on top of each other to form a cross like the one below:
How did I do that? Magic, you say? Nope, all I did was add a couple of <div> tags. Here is the code:
<div id="top" style="left: 500px; top: 485px; position: absolute"> <img src="/img_articles/8470/image1.gif"> </div>
First, you must give your div a name, which the id attribute does. The style attribute will define the position of the whole layer of content the falls inside the <div> tag. There are only a few things that you have to remember:
- The left function positions the image x number of pixels from the left of the browser to the left side of the image.
- The top function positions the image x number of pixels from the top of the browser to the top of the image.
- Remember to put position: absolute in because if you do not, the position will default to the position: relative setting which is more difficult to work with and can cause some varying placements in different browsers.
That's all you need to know. Layer it up!