Next, check out these add-ons.

ColorZilla – let’s you pick out any color on a webpage and save it’s RGB or HTML color value.

Web Developer’s Toolbar – this thing has saved many a day with it’s ruler, div selector and other great features.

Firebug – I don’t know how I survived without this. Offers real-time in-browser editing to any websites HTML, CSS and Javascript.

Screengrab! – Hands down, the best screen shooting program I’ve found to-date. You can save or copy the whole webpage, the visible portion, your own selection or the window.

IE Tab – face it, IE is a pain that has no standards. After using a standards-compliant browser to design and develop your site, use this plugin with a simple right-click option to view any page in IE. Then enjoy fixing all of it’s errors.

SEO Quake – a great toolbar to gain knowledge about the Google Page Rank, link structures and other important SEO factors.

In the head code under your normal CSS, simply insert this code

<link rel="stylesheet" media="print" type="text/css" href="http://yoursite.com/print.css" />

Next make the print.css file on your server and start setting objects to display:block if you would like it to print or display:none if you do not.

This is not the limitation of the print.css file though. You can also change font-sizes, margins, floats, etc so that the printed version of your page looks much better.

One nice feature that you can add is a line that says something like “Thanks for visiting our site and printing this page!”. Just place it in an element and add a class like class=”printmessage”. In your regular CSS just list .printmessage {display:none;} and in your print.css label it .printmessage {display:block;}.

So how do I do it?

Simple CSS and animated gifs.

First, make an animated gif the size of you nav button:

Next, a little CSS:

#nav {
    height: 35px;
    width: 500px;
}

div.button {
    float: left;
    width: 100px;
    height: 35px;
    margin: 0 3px 0 0;
    background: #fff;
    border: 1px solid #000;
}

div.button a {
    display: block;
    margin: 0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    font: bold 13px Georgia, serif;
    color:#039;
    text-decoration: none;
    background: #fff;
}

div.button span {
    display: block;
    margin:0;
    padding: 9px 0 0 0;
    text-align: center;

}

div.button a:hover {
    background: url( 'http://itscalledwebdesign.com/files/gif_hover/bg03.gif' ) top center no-repeat;
    color: yellow;
}

Next, the following div is placed:

<div id="nav">
    <div class="button"><a href="#"><span>Nav 1</span></a></div>
    <div class="button"><a href="#"><span>Nav 2</span></a></div>
    <div class="button"><a href="#"><span>Nav 3</span></a></div>
</div>

You are pretty much just making a div and placing the animated gif as the image for the hover.  In this example, the “a” simply has a white background.

CLICK HERE to see how it looks, it’s the “Fast” example.

View the CSS and source of that example page to see that the other examples are set up using the same code.  You just need to use different animated GIFs as the hover image.

One thing you need to think about is the possibility that animations are turned off on the users computer.  The only problem this might cause will be if you have your hovered text turn into the same color as the original background.  That would then cause the text to disappear.

I would suggest trying it with the animation turned on and off just to see what it would look like.

So there you have it.  Simple, quick CSS animated hovers.

img {border: 1px solid #c5c5c5;}
img:hover {border: 1px solid #000;}

Click HERE for an example.

If you have the code inside a div (i.e. picture), you can add that id before the code.

#picture img {border: 1px solid #c5c5c5;}
#picture img:hover {border: 1px solid #000;}

This is going to be set up using a <div> labeled “nav”.  You can change it, but make sure you change it acrossed the board, otherwise it won’t work.

In your header, place the following code -

<div id="nav">
<ul>
<li><a href="http://yourdomain.com/page1">Page 1</a></li>
<li><a href="http://yourdomain.com/page2">Page 2</a></li>
<li><a href="http://yourdomain.com/page3">Page 3</a></li>
</ul>
</div>

Now these links are not dynamic, you will have to add or subtract the pages that you want listed.

If you want them dynamic, in WordPress simply use this -

<div id="nav">
<ul>
<li><?php wp_list_pages('title_li='); ?></li>
</ul>
</div>

My only issue with doing this, is that it will include all your WordPress pages, which you may not want.  You can still use this, but you will need to change the php code to -

  <?php wp_list_pages('exclude=17,38' ); ?>

with the exclude numbers representing the pages that you want excluded.  More examples of how to change how this list works can be found in the WordPress Codex HERE.

Now for the CSS.

Copy the following code into your CSS file -

#nav	{
	width: 475px;
	height: 37px;
	margin: 0 auto;
	padding: 0;
	font-size: 14px;
	position: relative;
	left: 190px;
	z-index: 99;
	color: #fff;
	line-height: 33px;
}

#nav ul {
	list-style:  none;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#nav li	{
	list-style:  none;
	float: left;
	padding: 0 4px;
	background: none;
}

#nav a {
	display: block;
	font: bold 0.9em Arial, san-serif;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	line-height: 37px;
	vertical-align: middle;
}

#nav a:hover {
	line-height: 37px;
	vertical-align: middle;
	color: #000;
	text-decoration: none !important;
}

This code is set up so that it will be a navigation bar that is 475px wide and 37px tall.  The text link will be white (#fff) and then change to black (#000) when hovered.  There is no underline, since text-decoration on the a:hover is set to none.  You can change this to underline or any other hover variable you prefer.  The text in this case is also all caps due to the “text-transform: uppercase;”.  You can remove that line if you want the text to appear as written.

To create more or less space between the words, simply increase or decrease the second number in the nav li padding.  Currently, each <li> has a 4px padding on both the left and the right sides.  Note, if you increase this padding much, or have more than a couple links, you will need to increase the width of the nav div.  Otherwise, the links will drop down onto a second line.

Put the following code in your header underneath the current link that pulls your CSS info -

	<!--[if lte IE 7]>
		<link rel="stylesheet"
		href="http://www.yourdomain.com/ie7sucks.css"
		type="text/css" />
   	<![endif]-->

Just change the top code to IE 6, or IE 7 or whatever crappy version you are trying to fix.

Then just make a CSS file (feel free to rename the CSS to anything that represents your distaste for IE).

You only have to add the changes in that CSS that you want made, you don’t have to repeat the entire CSS.  Since you placed this code below your other CSS link, it will pull that one first, recognize how terrible IE is and then pull your fixes.

<form method="get" id="searchform" action="http://mrcomplain.com/">
<div><input type="text" value="Search" onclick="value=''" name="s" id="s" />
<input type="submit" id="searchsubmit" value=">>" />
</div>
</form>

You can then position the search form using CSS.  The following is an  example, but you will obviously need to change the information contained therein to make it fit on your page -

#searchform {
	position: absolute;
	top: 231px;
	left: 50%;
	margin-left: -250px;
	padding: 5px 3px;
	}

#searchform #s {
	width: 135px;
	padding: 2px;
	}

#searchsubmit {
	padding: 1px;
	}