The great thing about CSS is that, if done correctly, it can make your life much easier. Here’s a little trick that will label links based on their attributes without you having to add additional HTML when posting the link. This trick hinges on the fact that you can identify parameters in your CSS following the a beyong the usual :hover, :visited, etc.

Note: Doesn’t seem to be working in IE8… I’ll check for other version of IE later, but FireFox, Chrome, etc. are fine.)

Suppose that you’d like to have an icon next to any link that would identify it as being a mailto link, or a link that will open in a new window.

Setup your CSS as follows:

a[href^="mailto:"] {
 padding-left:20px;
 background: transparent url(icons/mail.gif) no-repeat center left;
}
a[target $='_blank'] {
 padding-left:20px;
 background: transparent url(icons/newWin.gif) no-repeat center left;
}

Now, what about file types? No problem, setup your CSS as follows:

a[href$='.doc'] {
 padding-left:20px;
 background: transparent url(icons/word.png) no-repeat center left;
}
a[href$='.xls'] {
 padding-left:20px;
 background: transparent url(icons/excel.png) no-repeat center left;
}
a[href$='.jpg'] {
 padding-left:20px;
 background: transparent url(icons/pic.png) no-repeat center left;
}

You can see it in action here.

If you want to apply the same formatting to several file types, e.g, the same image icon for .jpg, .jpeg, .gif, etc., you can avoid retyping the CSS for each by setting up your CSS as follows:

a[href$='.jpg'],
a[href$='.jpeg'],
a[href$='.gif'] {
 padding-left:20px;
 background: transparent url(icons/pic.png) no-repeat center left;
}

If you’d prefer that your icons appear following the text as opposed to preceeding it, change your CSS to read:

 padding-right:20px;
 background: transparent url(icons/pic.png) no-repeat center right;

Depending on the size of your icons, you may need to play with the padding. Here, I’ve used 20px as my icons are 16px wide so, given that we are centering the icon within the padding, I get a nice 2px buffer on either side. Also, if you have tall icons, or you’d like to use a smaller font size, you can add some line-height to your CSS so that the icon doesn’t get cropped.

The icons that I’m using in this example can be found here. They are licensed under a Creative Commons Attribution 2.5 License, so you can use them anywhere, for any purpose, and make whatever alterations to them that you would like.

Web Site Stuff CSS, web design, Web Development

This is a follow up to my CSS image mouse over post.

So, the problem is that Internet Explorer ignores the pseudoclass :hover unless it’s applied to a link, i.e., img:hover won’t work (no pun intended ).

Here’s how to make them all play nice.

This is what we came up with last time:

HTML:

<a href="target.html" class="highlight"><img src="yourimage.png"></a>

CSS:

.highlight img{
 border:0;
}
.highlight img:hover{
 background-color:#ff6c00;
}

Now, we were on the right track, so this isn’t all throw away, we just need to make a few adjustments.

First of all, as I said above, IE doesn’t like it when :hover is applied to anything other than a link, so let’s break down and give it what it wants. Tell your .highlight class that it’s to deal with a link and not an image. While you’re at it, you can delete the border:0; as it will no longer do us any good here. It should read as follows:

a.highlight {
}
a:hover.highlight {
  background-color:#ff6c00;
}

Now, we just have to deal with the fact that there is a big ugly border on our image. Add a new class called .noborder and put the border:0; in there.

.noborder {
 border:0;
}

Go ahead and apply that class to the image in your HTML.

<a href="target.html" class="highlight"><img src="yourimage.png" class="noborder"></a>

And that’s that! We’ve managed to trick IE into doing what FireFox had been doing for us all along. There’s just one problem… refresh document in a FireFox browser… no dice; it’s broken.

So we had it working in FireFox but not IE, now we force it to work in IE and it breaks FireFox… are we doomed to crawling back to javascript to get us out of this one?

Actually, no. This is an easy fix! Were you wondering why I kept that empty a.highlight class?

Add the following to your a.highlight class (I used 100×100 because that’s the size of my image, replace those values with your own dimensions):

height:100px;
width:100px;
display:block;

Voila! You now have a nice image mouse over effect that it completely cross-browser compatible using only one image and without resorting to javascript.

Your final code should look like this:

HTML:

<a href="target.html" class="highlight"><img src="yourimage.png" class="noborder"></a>

CSS:

a.highlight {
 width:100px;
 height:100px;
 display:block;
}
a:hover.highlight {
 background-color:#ff6c00;
}
.noborder {
 border:0;
}

Here it is in action.

I hope that this proves to be useful, have fun!

Web Site Stuff CSS, web design, Web Development

I’ll be entirely honest in saying that, until about a month ago, I’d never heard of Drupal. I really do enjoy writing code, which is why I have always opted to hand code my sites, the only exceptions being blogs where Wordpress (and a few plugins) has always worked beautifully.

Then came this latest project. I’ve really just finished the development work on BDbin.com(there are a few tweaks that need to be made, but I consider it to be finished) and, as much as I love to write code, I’m just not in the mood to fire up notepad and start typing <html><head><title>Blah blah blah…. </patience>, and this project is just simply not going to fit into what Wordpress is capable of doing… not without extensive tweaking, at least. I happened to be in Fantastico (an automated installation utility that came included with my hosting package) installing an instance of wordpress on a new domain, when I noticed a list of Content Management Systems that were available for installation. I glanced over the list and then, after having read the descriptions for each, set out to do some research of my own. It became almost immediately evident that the two big players in the open source CMS world were Joomla! and Drupal (I could be wrong, but this was the impression that I got).

So, I kept reading, looking for reviews, finding sites that ran on those platforms, until I eventually decided that I would give Drupal a shot. The version available for auto installation through Fantastico was not the current release, so I just grabbed the file from drupal.org. The installation went very well, with the only hiccup being my provider’s insistence on leaving register_globals turned on and Drupal’s refusal to install under such conditions. I’m lucky, however, that my provider allows for the use of a custom php.ini, so that was an easy fix.

Next, I went browsing for themes. I had to look through quite a few before finally finding one that had more or less the look that I had in mind. Then it was just a matter of cracking open the css file and making it my own.

I’m looking forward to really diving into the development of this site. I’ll post updates as I progress.

Web Site Stuff Drupal, web design, Web Development

This is a quick and easy way to get a nice image mouse over effect using only one image, some CSS, and without resorting to any javascript.

The real trick is in the preparation of the image.

Open Photoshop, or whatever tool it is that your prefer, and create a new file. To keep things simple, I’m just going to draw out a quick shape on a 100 x 100px canvas. Make sure that you draw your shape on a new layer.

You can go ahead and delete your Background layer.

Next, rasterize your shape and select it’s mask (Ctrl + click on the layer in Photoshop).

Invert the selection so that you now have the transparent surrounding area selected. From the Select menu, shoose Modify > Contract. The value by which you choose to contract the selection will be the thickness of the mouseover highlight.

Fill the selected area with the color of your website background, in my case, white. You should end up with a logo that has a thin transparent outline against a solid background.

Save your image as .gif or .png in order to preserve the transparency.

Now, onto the code

This is the easy part. We are only going to make one class to control the mouse over effect. First, however, add the HTML for your image link (you could always use a span, etc instead of a link, I’m just demonstrating it this way as I would imagine that a link would be the most typical application for this trick):

<a href="target.html" class="highlight"><img src="yourimage.png"></a>

Now, for the CSS:

.highlight img{
 border:0;
}
.highlight img:hover{
 background-color:#ff6c00;
}

That’s it! Your result should look like this.

You can get creative with the shape and size of the transparent section in your image; there’s absolutely nothing saying that it has to be a solid continuous outline. Have fun!

Update: I just realized that this doesn’t work in IE8 Beta… not sure about 6 or 7. Firefox and Chrome are fine, though… I’ll adjust it to be compatible with IE8 (and likely 6 & 7) later tonight.
Another Update: Nope, it’s not just IE8; This won’t work in any version of Internet Explorer. Just another example of their refusal to adhere to the standards.

Web Site Stuff CSS, Photoshop, web design

The site had been running an old version of WordPress, so I figured it was time to upgrade. While I was at it I decided to change the theme. Not that I had any issues with the previous theme, in fact I quite liked it, however it seemed to be slightly less than compatible with this latest WordPress release.

The new theme is by a designer who goes by the handle mg12 and runs the site NeoEase (not english). I’m using another one of his themes, albeit very heavily modified, on a site that I have just recently launched and I downloaded this one without realizing that it was by the same designer.

I would highly recommend either one of the two these that he has published, they have some very nice little extras built in to them and, overall, are extremely clean.

Web Site Stuff web design, Web Development, wordpress