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.

Comments

Post a Comment

Popular posts from this blog

Solved - You have an incorrect version of driver "vmx86.sys" - VMWare Workstation 8

I have just installed VMWare Workstation 8 over my old VMWare Workstation 6.5 on Windows 7. On my first run I already got the error message: Could not get vmx86 driver version: The handle is invalid. You have an incorrect version of driver "vmx86.sys". Try reinstalling VMware Workstation. Failed to initialize monitor device. Obviously, I was concerned, but there is a simple way to solve it - just right-click the VMWare Workstation icon and use Run as Administrator. This is a bit annoying, but at least it is easy to solve. Update: I forgot to mention it, but as Dave said on the comments, you can right-click on the program shortcut, choose Properties, Compatibility tab and check Run as Administrator so that it will always run properly. Thanks, Dave!
Read more

[Fixed] Just Cause 3 Mouse offset

I've sort of "fixed" my mouse offset problems and cursor exits from Just Cause 3. For whatever reason, both seem to happen sometime, specially if I need to change focus from the game. Sometimes just going to another app and returning solves it, otherwise if I go to Options, Graphics, and turn full screen back on (or turn it off and on again), it seems to get fixed. However, still annoying.
Read more

Pragmatic Programmer: From Journeyman to Master

I've read Pragmatic Programmer: From Journeyman to Master last week. It was pretty good, although if you have a few years of experience and good practices, you should be familiar with most of what it says, even if you don't follow it in practice :-) . Some of their bullet points are: - Don't duplicate - Write flexible code - Use Contracts, assertions and exceptions - Test - Automate where possible - Use a version control system. Obviously, many of these points have a lot to do with refactoring and XP. They also have another neat book on Automation, Pragmatic Project Automation: How to Build, Deploy, and Monitor Java Apps . Obviously that is much less relevant to a Delphi programmer, but you can still learn quite a bit from it. After I started reading it, I automated large sections of my build and release process (in PHP - it's easy to use in the command-line, too, and some parts are re-usable on the site). It saves a lot of time and enables you to stop worrying if you ...
Read more