Search

Subscribe to Blog: RSS

Pains of Webdesign: Top 10 Pet Peeves

Tuesday (8/11/05), 2:45 pm. 25 comments.

Web designers and developers do many things, and they don’t do many things. Some are great, some aren’t so great, and some are down right terrible. Here’s my Top 10 list of things that drive me up the wall:

Read more…

Flock

Friday (21/10/05), 9:16 am. 7 comments.

I just downloaded Flock, and it’s almost awesome. Flock makes blogging easy by integrating with WordPress (including wordpress.com), Moveable Type, Typepad, and Blogger.

Read more…

New AJAX Feature

Wednesday (19/10/05), 1:50 pm. 14 comments.

I hinted to a couple of you that I had a new AJAX feature on the road map, and it’s finally up. You should now be able to switch from the Noteworthies to Snippits and visa versa.

Read more…

And the Winner is…

Monday (17/10/05), 8:34 am. 4 comments.

While there were a few entires for the contest to win a wordpress.com invite, not many seemed to actually follow the simple rules. One of the folks that did follow the rules got an invite before the contest ended, so he pulled out (nice entry, by the way). At least it was easier to pick a winner….

Read more…

Win an Invite to WordPress.com, the new cool blogging site

Thursday (6/10/05), 5:45 pm. 21 comments.

That’s right, I’m giving away my wordpress.com invite, and you could win it. It’s quite easy, actually.

Read more…

I’m In.

Monday (26/9/05), 4:11 pm. 13 comments.

A while back I had entered my email address at WordPress.com saying that I’d like an invite. Never really thought about it after that, until today when I got an email saying that I’d been selected as part of one of the “small groups” being invited.

Read more…

Twilight Burst er, Open Source

Monday (12/9/05), 8:33 pm. No comments.

For months I’ve been trying to convince this guy to start a (WordPress) blog, and it looks like he’s finally given in. He claims he’s got a new design coming, but I haven’t been able to persuade him to let me see it.

If you like reading my stuff and/or are a geek, check out his site, you’ll enjoy it.

You may now Have A Mint.

Monday (5/9/05), 6:41 pm. 4 comments.

There’s been much hype surrounding Shaun Inman’s new product this past week as sneak peaks and news of it’s near release have come out. Well, the new stats program Mint 1.0 has finally been released.

Read more…

Nuke Pink

Friday (26/8/05), 5:04 pm. 7 comments.

Some people complained to me that the pink stripe in the upper-left corner of the page was too distracting and didn’t fit, while others seemed to like it. I thought they both had good points, but you can’t please everybody.

Or can you?

If you’ll notice I’ve added a “user options” section over by RSS buttons with the option to Nuke Pink. Go right ahead and push it, and that pinkness that has haunted you for so long will vanish forever. Unfortunately, as soon as you refresh the page or go to a different page on this site it’ll come back, but I aim to change that soon–I just haven’t gotten to it yet.

Peace.

Pure CSS Tooltips | An experiment with the :after pseudo-element

Saturday (20/8/05), 12:36 pm. 2 comments.

You’ve probably seen those stylish JavaScript tooltips, such as the ones on ESPN. After reading the W3 CSS2 docs I began to wonder if something similar could be done using the :after pseudo-element and the content property. I found out that yes, it can be done, but (unfortunately) it does have it’s limitations.

The XHTML

First we have to specify our tooltip in our XHTML. The browser automatically makes tooltips from the title attribute, but they tend to look pretty boring. So I made my own attribute:

<a href="somewhere.php" tooltip="This is tooltip text">The link</a>

And there lies the first drawback: It won’t validate because I made up my own attribute. You could use the title attribute for this but if somebody hovers over your link long enough the browser will show it’s own tooltip over your fancy one. As far as I can see there’s no way to get around this behavior.

Creating the CSS

First let’s style the link a little bit:


a {
color: red;
text-decoration: none;
}

Now we’re going to use the :after pseudo-element and the content property to display the tooltip when the link is hovered:


a:hover:after {
content: " "attr(tooltip)" ";
}

This will pull the tooltip attribute and display it using CSS. Now let’s style it:


margin-top: 5px;
margin-left: 20px;
display: block;
font: 10px arial;
text-decoration: none;
padding: 10px;
background: #372B2D;
color: white;
opacity: .7;

We’re also going to want to make sure that the tooltip is the highest layer, so we’ll add z-index to it:


z-index: 200000;

Now I just know there’s going to be a few of you who are going to try this out then send me angry emails saying something like

Your CSS is a piece of crap! It messes up my whole link when I hover over it!

Well I hate to break it to you, but your browser is a piece of crap. Go visit Browse Happy and get a better one.

IE will take our CSS and make a complete mess out of things when the link is hovered, so we have to hide some of our stylesheet from them by using the child selector hack:

html > body a:hover:after { the styles }

The big problem

Now we get to the biggest limitation. If you try to put together a CSS tooltip using the code I just posted you’ll find out that the tooltip will be displayed inline and will move all your content around. In order to fix this, the link must be positioned absolutely. This will stop the link from shifting and will also let the tooltips be positioned using margins so that they don’t break your pages. But unfortunately, positioning your links absolutely is usually quite impractical.

In conclusion

Can these tooltips really be of any use if their links have to be positioned absolutely?

Actually, yes–but it still probably wouldn’t be the most practical way to do it.

See if we use them in a list, we can position the lists relatively and the links inside the lists absolutely. This will allow the links to be positioned absolutely but stay in their own lists. I’m thinking of using this on my sidebar to show the last five posts when you hover over a category. However, it would probably be smarter to use a variation of Eric Meyer’s Pure CSS Popups, as it uses valid XHTML and works in Internet Explorer.

If you want to see a working example of this article, check out Experimenting with CSS :after. Please feel free to play with the code and see what you come up with. If you get anything good please feel free to shoot me an email, I’d love to hear about it.

Entries in the future... · Previously posted entries...