 Cascading Style Sheet Tutorials |
| Fancy Link Tricks |
Precise Image PositioningUsing CSS it's possible to position an image precisely where you want it, right down to the exact pixel. Notice the Blue Ribbon graphic in the upper left corner of this page. That's positioned using CSS. In some browsers you may notice it lays right over the top of whatever else falls into that position under the normal HTML coding. For that reason, you need to be careful in using this tip because you most likely don't want to cover up your content with the image.Why would you want to use it then? You could use to overlap several images in a sort of image montage for starters. I'll leave the uses up to you to figure out, and just show you how it's done. <img src="images/ribbon.jpg" style="position:absolute; top: 10px; left: 10px; width:102px; height:162px;"> The code above is the code I used to place the blue ribbon on this page. The only things you need to change are the image path and image name to your own, the position you want the image placed in, and the image size. The "top: 10px;" and the "left: 10px;" are the image position. So in this case, the top left corner of the image is positioned 10 pixels from the top and 10 pixels from the left of the upper left hand corner of the browser page display window. Note: if you change the "position:absolute;" to "position:relative;" your image will be placed on the page relative to the place you've coded it into the page. Absolute means it goes exactly where you say in relation to the first pixel of the browser window. Relative means it is placed in a position relative to where the code is placed in your HTML file. In the code I used to place the image on this page, the blue
ribbon code is actually placed at the end of the page. But
because I used the absolute position, it appears on the web
in the top left corner where I placed it. |
