Website Design Blog. Evoart

Just a quick little post this week to get back into the swing of things. I’m not sure whether all of you will find this useful, but I hope you might do. This week at work I noticed that quite often when I’m building a site I’ll take little snippets of code from an array of previous sites that I have built. After racking my brains for 10 minutes as to the last website I used the ‘PNG Hack’ on, I thought I’d create a place on Evoart with all these useful bits of code stored!

Basic Link Styling

We all know how to write the code for this, but its often handy to just paste it straight into your CSS file at the beginning of a project. If you didn’t know, the code below will style ALL of the links on your website, unless you otherwise specify styles for them.

a:link, a:visited, a:active {
color:#EAA423;
text-decoration:none;
}
a:hover {
color:#83CAF0;
text-decoration:underline;
}

Firefox Image Outline Fix

This little beauty does exactly what it says it does. If you weren’t aware, Firefox has a nasty little habit of adding ‘outlines’ to images that are links. This really bugs me on items in the main navigation of a website, but thanks to this handy piece of code you can say goodbye to these outlines forever!

A:focus, A:hover, A:active /* Firefox image outline fix */
{
outline: none}

IE6 Background Flicker Fix

You’ve probably noticed that in IE6 when you hover an image that has a linked background you get a very noticeable flicker as it jumps to the hovered background image. Well not any more! This is another really handy fix that I always implement these days. You can read more about it here.

html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

Header Tags

Another pretty basic one, but a real time saver to quickly paste into your code is the header tag. These bad boys should be a part of every web designers code toolkit. Headings are essential for search engine optimisation, and they also help keep you code semantic - meaningful and structured in other words.

h3 {
color:#fff;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
margin-top: 0px;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
line-height:140%;
padding-bottom:0px;
}


Absolutely Positioned Images

Its not a good idea to get into the habit of using this technique, but in some instances it can be particularly useful. One such instance happened to me a few weeks ago. Basically after a design had been built, the client wanted a badge to be added in a really awkward position overlapping the main banner and the edge of the actual website itself. The image wouldn’t have fitted nicely into the flow of the code, so I chose to absolutely position it using the code below.

All you need to do is change the ‘top’ and ‘left’ values and add the <div> below to your HTML

<div id=”namehere”></div>

#namehere{
background: url(../images/yourimagehere.jpg) no-repeat left top;
width: 26px;
height: 697px;
display: block;
overflow: hidden;
position: absolute;
top: 0px;
left: 184px;
}


Headers & Paragraphs Margin Reset

At the beginning of the development process its often a good idea to do a global reset of the margins on your header and paragraph tags, just to eliminate the possibility of any stray padding or margins creeping in when you progress further in the development.

h1, h2, h3, h4, h5, h6, p {
margin:0;
padding:0;
font-weight:normal;
}

Sliding Doors Navigation

This has to be the piece of code that gets re-used the most on any website.

The ‘Sliding Doors’ technique enables you to have all the images your planning to use for each section of your navigation in one image. You then use CSS to reposition that image to show the hovered state, and the ON state.

However, just to make things interesting, I use this technique a slightly different way. I do this by only including the first and second image together as one image, and then have the ON state as a completely seperate image. You can see the two seperate images below.

I then use the following CSS code below. The ‘ul’ section eliminates the padding and margins and the ‘#navigation’ part displays the items horizontally, rather than vertically. Ive also included some comments in the code below which help to explain whats going on.

ul {
margin:0;
padding:0;
}

#navigation li {
display:inline;
padding: 0px;
}

li#articles a {
text-indent: -1000em;
background:url(../images/articles.jpg) no-repeat left top;
width: 117px;
height: 68px; /* 68px is the height of the single button image */
display: block;
overflow: hidden;
position: absolute;
left: 15px;
top:169px;
}

li#articles a:hover {
background-position: 0px -68px; /* This adjusts background positioning so that only the bottom half of the image can be seen */
}

li#articlesON a {
text-indent: -1000em;
background:url(../images/articles_on.jpg) no-repeat left top;
width: 117px;
height: 68px;
display: block;
overflow: hidden;
position: absolute;
left: 15px;
top:169px;
}

To get this working on your site we need to add some HTML:

<ul id=“navigation”>

<li id=“articles”><a href=“articles.html” accesskey=“1″ title=“Articles”>Articles</a></li>

</ul>

Add your snippets of invaluable code!

I hope you might have found this article useful. Re-using pieces of code can really boost our productivity so you might want to create a file on your computer where you can quickly and easily grab essential pieces of code.

Now, what I’d really like to know is what snippets of CSS code do you use over and over? Share them with us all in the comments below!