Are you a new business that is looking to create a web presence,  an existing business who wants to step out into the Internet or even just someone who feels the need to express themselves online – I can help you create the ideal platform for you!

The Internet is an ever changing system, and at the speed technology moves it can feel really daunting taking either your first step into the web or to commission an online solution that suits you. 

When I create websites I try to cut through the techno babble and deal with each specific need using the best solutions.  Whether it is a website that simply offers a window into your world or something more complex that allows you to update parts of the site yourself, I am sure I will be able to help.

If you want to see what I can do…then feel free to contact me – info@nasarik.com

This is short article to briefly explain what sprites are and how you can implement them into you CSS designs.

CSS sprites are the combination of many images into one large image, each individual image is then moved using background position to be visible within each container; this process is extremely usefull in navigation menus where you would want two or three button image states (This method also nicely replaces the need for unnecessary javascript libraries).

What you will gain from using CSS sprites is better performance from you site as it needs to make less HTTP image requests which will ease the load on your pages.

A simple example:

Firstly, create an image 250px wide and 100px deep, within the image area create two button states with slightly different styles so that each state will be clear to the user (As in the example below).  Save the image as a JPEG ready to use in the CSS.

The CSS:

Then place the following CSS into the head of your document;  this will create the display area for the sprite while the background position will display the first button state.

ul.menu { list-style:none; padding:0; margin:0; }

ul.menu li a { list-style:none; display:block; width: 250px; height:50px; background:url(btn_eg.jpg) no-repeat; background-position: 0 0; }

Next we need to add the hover state, this will simply move the image up withing the same container when the mouse is over the button.  To include the hover state simply add the following CSS after the main menu code.

ul.menu li a:hover { background-position: 0 -50px; }

The HTML:

Finally reference your button in the body as you would normally with the following HTML:

<ul class=”menu”>
<li><a href=”http://nasarik.com”></a></li>
</ul>

To see the final example click here

Overview

And you are done, a simple an effective way to start using CSS sprites in your pages. I have added two links to more in-depth articles on the subject of sprites below enjoy.

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

Navigation can be presented in many different ways, but the most effective way is the CSS list which offers the best and most simple solution.  In this post I will demonstrate the CSS menu in its most stripped back form.

Firstly, I will give the CSS  and HTML followed by a breakdown of the code.  This guide assumes that there is already an understanding of lists.

CSS

ul.menu {  list-style:none; padding:0; margin:0; }

ul.menu li a{ display:block; width: 100px; padding:10px; font: 10px Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#009933; border-bottom: 1px solid #003300; }

ul.menu li a:hover { background-color:#003300; }

HTML

<ul class=”menu”>
<li><a href=”http://nasarik.com”>home</a></li>
<li><a href=”http://nasarik.com”>portfolio</a></li>
<li><a href=”http://nasarik.com”>contact</a></li>
</ul>

In the CSS I have referenced the unordered list (ul) and given the class .menu, this is so we can reference the HTML in a simple and clean way; next we clear the natural styling of the ul with list-style:none and the removal of both padding and margin.  Now we can reference the list item (li) and the active link (a) with our own styling attributes, then simply add the hover state, in this case I have chosen a darker colour.

The HTML list is simple, create a standard unordered list, and add your class to the ul tag, this will style your menu with the CSS, it’s that simple.  This same method can be used on any list type and can be adapted to suit any style of website.

Here are a few excellent examples of CSS menus

http://www.smashingmagazine.com
http://www.cssbeauty.com/
http://logopond.com/

http://www.pixellogo.com/

Once you have mastered the simple CSS menu why not experiment with images or JQuery.