Floating Images above other items in HTML
Recently I decided, at someone's suggestion, to get a real logo for my site.
Previously what I had on my site header was pure text, and the icons for my main apps with links to them (which I'm told is bad for SEO - never got around to fixing it, though).
I just looked at my enormous icon folder for adequate icons, selected a hard drive and a printer (which jointly represent my main app, FolderPrint, and put something together.
You can see the final result in my Disk Usage for Windows page, for example.
One part I liked is the effect of floating the image slightly above the rest of the header. This is easy to do in CSS:
.logo {
position: absolute;
top: 0;
left: 50%;
margin-left: -420px;
}
The important part here is that the margin-left should be minus half the width of the image.
Unfortunately, the image is a transparent PNG (which is the reason of the cute icon shadows), which doesn't work in IE6. However, IE6 has about 1% of my current traffic, so I'm going to ignore this problem.
Previously what I had on my site header was pure text, and the icons for my main apps with links to them (which I'm told is bad for SEO - never got around to fixing it, though).
I just looked at my enormous icon folder for adequate icons, selected a hard drive and a printer (which jointly represent my main app, FolderPrint, and put something together.
You can see the final result in my Disk Usage for Windows page, for example.
One part I liked is the effect of floating the image slightly above the rest of the header. This is easy to do in CSS:
.logo {
position: absolute;
top: 0;
left: 50%;
margin-left: -420px;
}
The important part here is that the margin-left should be minus half the width of the image.
Unfortunately, the image is a transparent PNG (which is the reason of the cute icon shadows), which doesn't work in IE6. However, IE6 has about 1% of my current traffic, so I'm going to ignore this problem.
Comments