CssGlance

We’ve received quite a number of emails from designers who want to know how our MiniAdv banner works. Is it a JavaScript, a PHP solution, a server-side application? No, it’s even more simple. It’s CSS. Here we’d like to explain it in details!

The first idea was not our own. I think you can easily remember the great success made by what was called “The Million Dollar Homepage”. A simple page covered by a lot of mini banners which has led the owner to become millionaire and to leap to fame.

Quite a few websites adopted this useful way of making money. You can see good examples on CSS Remix and Italian Web Gallery.

In the most cases, you can get more information about the single banner by passing the mouse pointer over it. By doing this action, a small tooltip will appear, providing additional info as the name, the tagline or simply a link back to the website who bought the adv block.

This feature is often realized by using a small JavaScript. But what will happen to those users browsing a page without JavaScript enabled? The answer is simple. They won’t see the tooltip and the adv info. That means the content is not accessible.

So, what can we do to get the same nice tooltip feature and to improve accessibility? The solution is CSS. In fact, we can create pure CSS tooltips which are simple, useful and accessible, ‘cos they work even if the user browse the page without JavaScript enabled. This is the way we followed on CSSGlance.

This is what we’re looking for and now let’s go into details.

We just need a plain list of links. The XHTML code is something like this:

<ul>
<li><a href="http://www.google.com"> <span>Google.com</span></a></li>
<li><a href="http://www.yahoo.com"> <span>Yahoo.com</span></a></li>
<li><a href="http://www.cssbeauty.com"> <span>CSSBeauty.com</span></a></li>
...
</ul>

Now we have to float the <li> elements in order to put side by side each block. Then we can add a relative position to the links, in order to allow the span element inside to position absolutely respect the parent link. The span have also a display:none property which is changed into a display:block one when the mouse pointer pass over the block. You can easily solve ie bug adding some z-index.

Here you have the basic CSS code:

#miniadv ul{margin:0;padding:0;list-style:none}
#miniadv ul li {float:left;margin:0 2px 2px 0}
#miniadv a{float:left;position:relative;z-index:5; width:18px;height:18px}
#miniadv a:hover{z-index:10}
#miniadv a span{display:none}
#miniadv a:hover span {display:block;position:absolute; bottom:2em;right:2em;width:135px}

Let’s take a look at the example! You can download this example (zip-9KB) and use it however you like, but please give a link back to CSSGlance.