For those of you interested and/or living in Marburg, come to the Uni (PhilFak) on June 2 to get an insight what we’re doing here at the Tag der Sprachen.

The other thing is that I have to get rid of some wows right now: WOW!, WOW!!, and WOW!!!

Thank you.

And then on to something (not quite) completely different: Tim Haldeen

This it how it should be: Excellent design, excellent content. Great work by Second Story from last year or so: Theban Mapping Project

Get out your scissors and glue! Paper Toys!

Great illustrator Elliott Golden.

My site of course, as you can see. All XHTML 1.0 Strict and PHP and some spring colors as well. Hope you enjoy.

Then, there’s Manuel Kaufmann’s new site showcasing his photography. Recommended!

And finally, Amon Tobin has a new album out on the 5th of March and his site is all about strange sound exploration. You need to have a look!

• Strange Things Seen In Google Earth, which is about what the title says.
• Laynecom Records, showcasing some of my audio experiments of the last years

Required knowledge: XHTML, CSS, How to create a transparent GIF (or use the ones provided).

Tested in: 

The XHTML code…

… basically remains the same. In the case of the external link you will have to add class="external", in the case of an e-mail link we use class="mailto" and for the specific link we can use a so-called attribute selector. We’ll come to that later.

<a href="internal.html">Example for an internal link</a>

<a href="http://www.csszengarden.com/">Example for an external link</a>

<a href="http://www.royal.gov.uk/">The British Monarchy (specific external link)</a>

<a href="mailto:blabla@blabla.com">Example for an e-mail link</a>

The internal link is just there to show the difference. We won’t do anything with it.

For the flagging we use three different GIFs, transparent and quite small. Here they are (right-click and save as):

On to the CSS code. First we’ll define the normal link attributes and add the right values for the classes.

a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #006699;
	text-decoration: none;
	font-weight: bold;
}
a.external {
	padding-left: 16px;
	background: url(external.gif) left center no-repeat;
}
a.mailto {
	padding-left: 16px;
	background: url(mailto.gif) left center no-repeat;
}

You may of course also add the definitions for the pseudo classes :visited, :hover etc. but I will leave this out for now. color and text-decoration are of course a matter of personal taste. The padding-left value has to be adjusted according to the image width. Be sure that you leave some space between the image and the text. In this case the image width is 10 pixels and I have added some more 6 pixels between image and text.

Note that I have used the shorthand for background. A useful article on shorthand properties can be found at 456 Berea Street.

The Attribute Selector

The attribute selector is a useful means if you want specific tag with specific attribute to look, uhm, specific. There are four types of attribute selectors.

[attribute] matches all elements that have this attribute, regardless of its value.

[attribute=value] matches all elements that have this attribute and exactly this value.

[attribute~=value] matches all elements that have this attribute and this value among others.

[attribute|=value] matches all elements that have this attribute and starts with this value among others.

So in case of the royal link we wanted to apply above, we could use the following definition:

a[href="http://www.royal.gov.uk/"] {
	padding-left: 15px;
	backgound: url(royal.gif) left center no-repeat;
}

This is how it looks in the end…

Questions/Problems/Disappointments

Now, you may ask, if we have this attribute selector [attribute|=value], couldn’t we just use them on the href value, because it starts with http in case of the external link and with mailto in case of the mail link? No, unfortunately not, because this would have been really nifty. But life isn’t alway like this… You will have to use the whole attribute value.

Another thing is that the image will behave strangely in Internet Explorer 7 Beta if the link continues into the next line. If you are currently using IE7 and want to know how this looks, go back to the XHTML/CSS tutorials homepage and see the Creative Commons link or have a look at the 456 Berea Street link above which is flagged as external. IE7 displays the link as a block of two lines and thinks that it has to use the center of the whole block. In the final release of IE7 the image disappears altogether.

Additional Information

The page Iconize Textlinks with CSS already takes the whole thing some steps further. IE6/7 support is out of the question due to CSS3 attribute selectors. Still, if you work with a descent browser…

This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Germany License.

1. There are a lot of things to be discovered at Dan Fietsam’s site, although there are far too many Bud ads there. At least for someone from Germany like me. No offence…
2. Molly Holzschlag talks about the future of web standards at Vitamin. It’s a must read.
3. Interesting navigation solution: XRS Nowe Media from Poland.