Free CSS Templates

Site gets a makeover

Welcome to the new website! The site has not only undergone a change in design but also undergone a change in the way it works. It has been changed from snews content management system (still excellent and I recommend it) to wordpress. The reason for the change was due to extra plugins for wordpress and I am more comfortable modifying it.

The website has also changed in the features it offers. A new section for free css navigations has been added but the free css templates are still top on the priority. Hopefully I will update the site a lot more often now. I hope to get some more tutorials up and also many more free css templates.

Also new are some additions to the free css templates. I have added designs to the website for you to download. Including free wordpress themes and more free css templates. I really hope the site can grow from now on. Got a question or what to give some feedback on the new website? If so leave a comment.

Simple CSS Horizontal Bar Graph

I used this technique on my blog to create a simple graph. It can be used as a type of meter or as a bar chart. On the blog I use it to show how my month income is made up. At the moment 75% is from freelancing and 25% from Adsense. You can see a demo of the chart on my blog at: Web design and development tips

Creating a Fluid Design

Fluid basically means a template which expands horizontally to fit the screen size of each computer which may have different resolutions which with a fixed template would either cause is to scroll from left to right to see the whole page or to have big expanses of empty space with a large resolution. It is therefore sometimes better to use a fluid design, despite the added difficulty to design and code. When people decide they want to make a fluid design they should take into account a number of extra details which would be much more simple with a fixed with design

Using CSS With Adsense

This is a nice simple tutorial. It is a guide to using css to customize the look of you google adsense. Later I will release a variety of examples for you to use on your own website. Customizing the look of the google ads can be very good as it can make the ads blend into your site’s design and cause it to look less cumbersome and gaudy.

Coding an Accessible Navigation

In this part of the tutorial I will guide you through coding the image created in part 1 of the tutorial. If you have not read this you may read it here:

How to Design a Glossy Navigation

This tutorial will guide you through part one of creating a lovely accessible corporate navigation. This part will cover designing the navigation in photoshop with a detailed guide including images. In part two you will learn how to code this into a working CSS navigation.

Using Clearing Divs

When coding a website in CSS and XHTML many people like to have two columns. To get this you use the “float” attribute in your CSS. The can align one column to the left and the other to the right. What many people find troubling is having two floated columns in a centered holder. When coding a website you usually call this holder the “wrapper”. Also when designing and coding a website you generally want to make the site centrally aligned. This is better for different screen resolutions. To do this we usually use the following CSS coding:

How To Style Heading Tags

Now when it comes to heading tags CSS is very important. They can be styled in many ways using a number of methods:

Heading Tags Explained

Heading tags are an integral part of SEO (search engine optimization). If you think of your webpage as a newspaper you have:

10 Often Made CSS Mistakes

I thought I would give a list of the mistakes which I often make. I assume a lot of people make the same ones and it can often cause your whole design to mess up. So go through the checklist if you have a problem with your design and it might be one of the following