Spanned Fish

One of the forgotten css rules is the one that allow to delete the dotted border that is present around links. Because it’s ugly for sure, I always want to, but because it’s not so visible, I always forget. I won’t anymore from now

here is the tip :

a {
outline: 0;
}

Every single time I’m using the shortening method for:

margin-top: 10px;
margin-bottom: 5px;
margin-left: 3px;
margin-right: 30px;

transformed into

margin : 10px 30px 5px 3px;

 
I can’t remember the order of these items. So I have to go and look over the web to find it. Boring and time wasting. So, last time it happend, I decided to do something I’ve should have done a long time ago. I tried to find some logic into the shortened method. And without any surprise, there is one. And the very simple way to remember it, it to think about a clock.
 

Yes, you just have to think in this very easy way. And as a non native developer, I know some web designers that would be very happy to know this little tip.

Here is the order if you want to copy/paste it:

margin: top right bottom left;

Everytime that I design a website, I have to use clickable images. The simpler, very simpler way is to do as presented below :

<a href="http://spannedfish.com/"><img src="logo.gif"/></a>

But this solution is not very accessible. If the user disable image rendering, he will see nor the logo nor alternative text.

So we’ll use a trick found at Haacked that I’ve just modified and used for one of my blogs. The aim is to use a W3C XHTML 1.0 Strict valid code that will allow a css background to be clickable. Here is the code you should have in your html page :

<div id="header">
        <a href="http://spannedfish.com/">
        <span>Alternative Text</span>
        </a>
</div>

There is the CSS code to include in your style sheet

#header
{
    background: url(logo.gif);
    width: 180px;
    height: 135px;
    position: relative;
}
 
#header a
{
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 135px;
}
 
#header a span
{
    display: none;
}

The width and height in the CSS must correspond to your image size. Note that the position attribute, as well as the margins can be changed.