Bored with the plain old HTML divider? Try this quick tutorial and learn how to make more interesting horizontal rules.
Category: CSS
I wrote a blog post about this a while back but now I’m adding a full tutorial so you can actually see an example as it’s created. Learn how to turn any CSS background image into a clickable image map.
Try my tute and let me know what you think:
I’ll be adding more CSS tutorials in the coming weeks, so check back every so often.
I must admit that I’d never used IR on a site until today… my client wanted pretty H1 tags and Georgia wasn’t cutting it. So I did a little research and found that CSS-Discuss recommended the Gilder Levin Ryznar Jacoubsen (Version 1) technique to be one of the most accessibility-friendly; scroll down about 2/5 of the way to read more about this. Here’s the page with the technique spelled out for you.
This was super-easy to implement in both the HTML and CSS. It took me about 20 minutes to change 15 or so H1 headings to the new images and the client is now happy.
I’ve tried various clunky fixes for the IE6 PNG transparency problem, but yesterday ran across a wonderful little script from Angus Turnbull (from 2005, but no matter).
I tried it yesterday on a CSS background image and it works like a charm, but ran into some problems today trying to use it on a floated image.
Here’s the thing: when using it for a background image, follow the directions under ‘Transparent Backgrounds’ here and it works perfectly. But when you use it for a foreground image, you have to have a blank .gif file on the server, and you have to edit one line in Angus’ .htc file to point to that blank .gif.
This info is not obvious at all and I was really confused until I read Angus’ page thoroughly. But after loading the blank .gif and editing the iepngfix.htc file, all was well.
This is one of the easier implementations of a PNG fix I’ve seen. It uses the ‘behavior’ property in CSS, a Microsoft-proprietary thing and won’t affect browsers that already support PNG’s correctly.
And another thing…
The boundaries of my PNG (the logo in this site-in-progress) overlap a few of the menu items in the navigation bar: Home, About Us, and the left side of Construction. I applied a z-index to that navbar thinking that might solve the problem but it didn’t.
Another developer pointed out that the navbar needed to have positioning before z-index will work. I applied a position: relative; to it, and voila! Works perfectly now.
NOTE: This post has been replaced by a full-fledged tutorial – you can find that here. Please go there and don’t try what you see here; WordPress mangles my code snippets no matter how I try to get them displayed. The new tute is much better, I promise.
———————
This is a neat little trick that will allow you to create multiple clickable areas over any background image. This is easier, to me, than making image maps used to be.
Create a transparent box, absolutely positioned, that fits right over the top of the section of background image you want to make clickable. It’s easier to give this box a background-color while you’re getting it into position. The CSS looks like this:
/* This is the logo link clickable area */
#logo-zone {
position: absolute;
top: 18px;
left: 11px;
height: 21px;
width: 240px;
background-color: transparent;
}
Obviously you’ll change the ‘top’ and ‘left’ positions to line up with the top left corner of your background image’s clickable section, and adjust the ‘height’ and ‘width’ to fit.
Within the HTML, add an href link with the ID of your clickable box (WordPress won’t let me put this next link in here without screwing it up – remove the x from xhref):
<a id=”logo-zone” xhref=”yourlink.com” >
Pretty simple, and you can create multiple clickable areas wherever you need them on your page.
