|
|
Using CSS To Place Images
By Giorgos Kontopoulos
Expert Author
Article Date: 2008-01-15
Yellow post it notes are cool and a really good way to get someone's attention, don't you think ?
 I had in my disposal the transparent png solution for IE using CSS so all I needed was a cool graphic and a way to position it anywhere on a page using just CSS.
The advantages of this implementation are:
* you don't need javascipt
* you can position it anywhere on a page by changing a few css parameters
* any PNG-24 graphic will do, no need to think about what colors will be behind it on the page
You can take a look at the complete css post it note example and come back for the details:
Html-wise all we need is two nested layers. The inside layer is basically for formatting purposes and for the sake of the OLD and buggy IE5.5 and IE6 to apply the .filter rule otherwise we would eliminate it.
<div class="postit dim">
<div class="dim filter padding">
<!-- your content here -->
</div>
</div>
CSS-wise all I need is the postit rule to position the post it layer where I wish and put my "post-it" background image in place.
.postit{
position:absolute;
left:700px;
top:-50px;
background: transparent url(postit.png) no-repeat 0 0;
}
.dim{
width:228px;
height:228px;
}
.padding{
padding:50px;
}
making the position absolute allows us to take them "out" of the normal flow of content and position it anywhere relative to the parent container. Here I chose to put it in an absolutely centered container using CSS, which I believe does not need too much explaining. I have to specify the left and top positions relative to the wrapper container. The width and height of the dim class match those of the postit.png image.
Actually that is not all...
IE6 does not know how to display the PNG alpha transparency so it needs a little trick
<!--[if lt IE 7]><style>
.filter {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='postit.png', sizingMethod='crop');}
.postit { background-image: none; }
.postit div a {position: relative;z-index: 1;}
</style><![endif]-->
This basically makes the PNG transparent for IE5.5 and IE6, but we don't want IE to display the background-image therefore the included image as background. The next rule is there to overcome yet another IE bug that make anchors not being clickable when the filter is applied.
The rest of the rules are irrelevant to this example and won't be explained (maybe if someone asks for them).
For a more thorough discussion on PNG transparency look here. One can download all the necessary files of the example here.
If you are a graphic designer and you want to create a better graphic for the example I would gladly include it and credit you; I admit not being very good with graphic design.
NOTES
I am not claiming to have discovered anything that is involved to make this css post it notes; I only put some of the available tricks into good use, I hope you like the outcome. If you do use it in any of your projects or sites I would appreciate a mention or a linkback. It has only been tested in IE6 IE7, Mozilla Firefox 2.0.0.8, Opera 9 and Netscape 7.2 by me (all in windows). If you can test it in other browser and leave a comment below it would be greatly appreciated …
As long as there are IE6 users (mostly users that are on windows XP and Win9x) we are bound to use "tricks" to help the browser understand, but in the end it stops designers and developers from REALLY innovating. Maybe its time for those users to be educated for the necessity to start using a modern browser and help this field grow.
About the Author:
Giorgos Kontopoulos is a web consultant from Greece. He is one of the authors of GeoLand.org where he can often be found blogging about issues related to web development and search engine optimization.
|
|
|
|
