You could just use a transparent PNG background that repeats over top of the large background using DD Belated PNG, but that would be much more load intensive than we want to shoot for. This can actually be done very easily with CSS. The two images that we will be using can be found here (top) and here (vertical repeating). I originally had a little bit larger image, but I shortened it for this demonstration so that you could view the effect.

First of all, the structure of the HTML is simple. All we need is our body tag, and then another div that will contain the rest of the website inside of it. In my example I’ve given it the id #background. Annnnnnd without further a-do, here is the CSS:

body {
	background:#fff url(background.jpg) repeat-y top center;
	margin:0px;
	padding:0px;
	}
#background {
	background:url(background-top.jpg) no-repeat top center;
	height:395px;
	width:100%;
	display:table;
	}

We give the body element the repeating background so that it is in the back and it extends the full length of the page. Next, be sure to give the #background div height equal to the height of the image. The key is the 100% width and the display:table property. This ensures that you won’t get any scroll-bars because the background extends much further than the content of your page will, and because the div is displaying like a table, it will increase its height to whatever content is inside it so there is no need for a min-height hack. This checks out fine in all browsers, IE6 and up.

If you still aren’t convinced, just shut up and read on anyways, I promise you’ll get a Hershey kiss at the end. Maybe.

Firefox Plugins

Any web designer or developer (from now on referred to as web-head so I don’t have to keep typing that over and over) worth their salt should be using Mozilla Firefox thanks to its myriad of plugins. There are many other advantages to Firefox that make it a superior browser, but the plugins are really what make its genius stand out. Firebug should be in every single web-head’s arsenal. Before Firebug there was the Web Developer Toolbar, which was awesome and is still useful in its own rite, but Firebug went a million steps further in creating an amazingly useful troubleshooting tool. Not only can you easily dissect every block of code on a web page, but it also comes built in with a javascript debugger, code editor so you can see live changes to a web page on the fly, DOM viewer, and a Net tab which allows you to view load times for every single item being referenced on a web page which is very similar to Pingdom Tools. Firebug has saved my arse countless amounts of times when trying to determine where a problem is coming from. Being a web-head became much easier once I discovered this handy little plugin.

If you do not validate your code, then please, slap yourself right now. One more time. Another should do it. Ok, now we’ve got that out of the way. The benefits of validating is a lecture for another blog post, but for some extremely quick and helpful validation go no further than the HTML Validator plugin.

If you are like me and you have a ba-jillion bookmarks (one more slap if you started to argue that wasn’t a real number) and you also use multiple computers like home, work, and laptop - then it’s total hell to keep track of those things, right? Negatory - go pick up Foxmarks if you haven’t yet, and it will change your life forever. It might even help you give up that heroine addiction, but I wouldn’t quote me on that.

As a web-head, you should also be bookmarking every little useful article, technique, tutorial, resource, or whatever it is that you find that tickles your spidey web-senses and make use of Firefox 3.0’s awesome web 2.0 inspired bookmarking system. Bookmark tags are amazing and can save you muy mucho tiempo. A lot of times if I find an article that has a large amount of varied resources or tutorials on it, rather than visit each one and bookmark them or download them, I will make one bookmark of that “Top 3,254 Cute Things My Kitten Does” article and make a separate tag for each item that is on the page.

Even if marketing isn’t your thing, EVERY web-head needs to know their stuff about SEO (search engine optimization). It doesn’t matter how beautiful or usable you’ve made your website, if people can’t find it then you are SOL and your client is not happy. There are a few great plugins that you can get for Firefox that help you out in this area. KGen helps you find what the strongest keywords are that are showing up on a page. SEO For Firefox shows all kinds of incredibly useful information about websites in your Google and Yahoo searches, like page rank, age, diggs, trends, etc.

Here is a recent post that I found that goes into detail on a list of good Wordpress plugins for Firefox. It may pique your interest, check it out.

ColorZilla is small in functionality but extremely useful when coding any CSS. One click brings up an eyedropper which you can place anywhere within your Firefox browser to get a color, and another click will allow you to copy that color’s hex code to your clipboard.

And last but not least, IETab let’s you quickly render a page with whatever version of Internet Explorer you have installed on your computer inside a Firefox tab. This is nice for when you don’t feel like having multiple windows open. While I’m on the subject of Internet Explorer, for anyone who is also using a PC then Multiple IE is invaluable as it allows you to install, (hint: it’s in the name, so this shouldn’t be too tricky for ya) yes, multiple versions of Internet Explorer on the same computer. I know I know, you’re getting very excited with the prospect of being able to infect your computer with many Internet Explorers aren’t you? Opera View is available as well, although I rarely find a difference between how the two browsers render web pages.

There are plenty of more great Firefox plugins out there that people developed just to make you happy, so go out there and explore! If you have any other favorites, please post those for me to take a look at. By the way, thanks for the kiss, it was delicious.

Sorry there has been such a delay between these two posts, I’ve been out sick with a nasty cold for a while. I decided that I can finally breath through my nose well enough to finish this thing.

Here is an example of what we’ll be creating. You can find all of the necessary CSS in the header of that page. Keep in mind, I also use Meyer’s Reset CSS sheet which takes care of getting rid of the unordered list’s natural padding and styling. CSS reset style sheets are great for evening the playing field across multiple browsers, because they all have their own styles that they apply to certain elements and they’re never the same.

We’ve already got our image for the navigation rollovers from the previous post, and so now we’re going to introduce the second level of navigation into our HTML:

<div id="navigation">
    <ul>
        <li><a href="index.php" class="link1">Home</a></li>
        <li><a href="metal" class="drop link2">Metal<!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="gold.php">Gold</a></li>
                <li><a href="aluminum.php">Aluminum</a></li>
                <li><a href="brass.php">Brass</a></li>
                <li><a href="stainless-steel.php">Stainless Steel</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="plastic" class="drop link3">Plastic<!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="polyethelene.php">Polyethelene</a></li>

                <li><a href="polycarbonate.php">Polycarbonate</a></li>
                <li><a href="fiberglass.php">Fiberglass</a></li>
                <li><a href="pvc.php">PVC</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="services.php" class="drop link4">Services<!--[if IE 7]>
        <!--></a><!--<![endif]-->

            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul style="height:240px;top:-40px;">
                <li><a href="art.php">Art</a></li>
                <li><a href="design-for-manufacturing.php">Design For Manufacturing</a></li>
                <li><a href="prototyping.php">Prototyping</a></li>
                <li><a href="quickturn.php">Quickturn</a></li>
                <li><a href="safety-design.php">Safety Design</a></li>
                <li><a href="kits-and-assembly.php">Kits & Assembly</a></li>
                <li><a href="rfq.php">Request For Quote</a></li>

            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="news.php" class="link5">News</a></li>
        <li><a href="catalog.php" class="link6">Catalog</a></li>
        <li><a href="about.php" class="link7">About Us</a></li>
        <li><a href="contact.php" class="link8">Contact</a></li>
        <li><a href="users.php" class="link9">Registered Users</a></li>
    </ul>
</div>

We’re creating 3 dropdowns that come out of the links Metal, Plastic, and Services. We haven’t made too many changes to our HTML from the previous post. The #navigation ID has been moved off of the ul and onto the containing div because of the way that Stu Nichols did many of his selectors in his drop-down. Also, please take note of the way that the Internet Explorer conditional comments have been structured in this. You don’t want to screw those up, or IE will render things ugly the way that it normally does!

That was the easy part, and now for the CSS which I will just break down line for line. Once again, you can get the whole thing at this link.

Most of this code is just styling that will be specific for the navigation for every link , and there are some old IE hacks in here as well. Make sure you just replace the code that you need, and put your width in all of the right places:

#navigation {width:145px;position:relative; z-index:100;margin-top:50px; border-right:1px solid #999; padding:10px 0px; float:left;}
/* hack to correct IE5.5 faulty box model */
* html #navigation {width:145px; w\idth:144px;}
/* float the list to make it horizontal and a relative positon so that you
can control the dropdown menu positon */
#navigation li {width:145px;position:relative;}
/* style the links for the top level */
#navigation a, #navigation a:visited {display:block; height:47px;
background:url(navigation.png) top left; text-indent:-9000px;}
/* a hack so that IE5.5 faulty box model is corrected */
* html #navigation a, * html #navigation a:visited {width:145px;w\idth:145px;}

Just follow the CSS comments that Stu Nichols has placed in his code here. We’re still not doing any huge alterations other than styling things specific to this drop-down. For our purposes we’re only doing one sub-level, but I left the CSS in here for you to style a third one if needed:

/* style the second level background */
#navigation ul ul a.drop, #navigation ul ul a.drop:visited {
	background:#2d3d47}
/* style the second level hover */
#navigation ul ul a.drop:hover{background:#fff; color:#202c32;}
#navigation ul ul :hover > a.drop {background:#fff; color:#202c32;}
/* style the third level background */
#navigation ul ul ul a, #navigation ul ul ul a:visited {
	background:#e2dfa8;}
/* style the third level hover */
#navigation ul ul ul a:hover {background:#b2ab9b;}

This is where you figure out your exact positioning of the sub-levels, as well as style their appearance. Once again, the extra sub-level code is left in here and unaltered, just make sure that you are going down each line and putting in the code that is specific for your design:

/* hide the sub levels and give them a positon absolute so that they take up no room */
#navigation ul ul {
	visibility:hidden;
	position:absolute;
	top:-10px; left:145px;
	padding:4px;
	background:#2d3d47;
	height:96px; width:145px;
	border-left:1px solid #999;
	}
/* another hack for IE5.5 */
* html #navigation ul ul {top:-9px;t\op:-10px;}

/* position the third level flyout menu */
#navigation ul ul ul{left:149px; top:-1px; width:149px;}

/* position the third level flyout menu for a left flyout */
#navigation ul ul ul.left {left:-149px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
#navigation table {position:absolute; top:0; left:0; border-collapse:collapse;}

/* style the second level links */
#navigation ul ul a, #navigation ul ul a:visited {
	background:#2d3d47;
	color:#fff;
	height:auto;
	line-height:14px;
	text-indent:0px;
	display:block;
	padding:5px;
	text-decoration:none;
	font-size:11px;
	}
/* yet another hack for IE5.5 */
* html #navigation ul ul a, * html #navigation ul ul a:visited {
	width:145px;w\idth:145px;}

This is where we put in a lot of our code for doing the image rollover. This part is a little tricky, because I found an interesting IE6 quirk that stumped me for a while and I still haven’t quite been able to make sense out of it. You’ll see what I’m talking about by the consolidation comment on the first sub-level drop-down. Our background position code from the last post is largely unchanged except for when we have a drop-down on links 2, 3, and 4. We now have the selector #navigation :hover > a.link2, #navigation ul ul :hover > a.link2 which is telling the image rollover to stay in its hover state while the user is browsing through the sub-levels:

/* style the top level hover */
#navigation :hover > a, #navigation ul ul :hover > a {
	background:url(navigation.png) top left;}

/* top level image background placements */
#navigation a.link1:hover {background-position:-146px 0px;}
#navigation a.link2 {background-position:0px -47px;}
/* DO NOT consolodate next 2 lines into one, this breaks IE6 */
#navigation a.link2:hover {background-position:-146px -47px;}
#navigation :hover > a.link2, #navigation ul ul :hover > a.link2  {
	background-position:-146px -47px;}
#navigation a.link3 {background-position:0px -94px;}
#navigation a.link3:hover{background-position:-146px -94px;}
#navigation :hover > a.link3, #navigation ul ul :hover > a.link3  {
	background-position:-146px -94px;}
#navigation a.link4 {background-position:0px -141px;}
#navigation a.link4:hover {background-position:-146px -141px;}
#navigation :hover > a.link4, #navigation ul ul :hover > a.link4  {
	background-position:-146px -141px;}
#navigation a.link5 {background-position:0px -188px;}
#navigation a.link5:hover {background-position:-146px -188px;}
#navigation a.link6 {background-position:0px -235px;}
#navigation a.link6:hover {background-position:-146px -235px;}
#navigation a.link7 {background-position:0px -282px;}
#navigation a.link7:hover {background-position:-146px -282px;}
#navigation a.link8 {background-position:0px -329px;}
#navigation a.link8:hover {background-position:-146px -329px;}
#navigation a.link9 {background-position:0px -375px; height:65px;}
#navigation a.link9:hover {background-position:-146px -375px;}

The rest of the code is just a little extra styling. We now have a fast drop-down menu with image roll-overs using nothing more than CSS! Again, you can view the code for our final result here. If you have any tips, questions or problems that you run into while trying to reproduce this, please leave a comment.

This article is the first of a 2 part series, and the second half will apply this tutorial into creating a CSS only dropdown menu navigation with the image rollovers that is compliant with IE6 and up.

Click here to see a demo of what we’ll be doing.

The first trick is to make your navigation image. The best way of going about this is to create your menu in photoshop, double it’s width (or height if you are doing a horizontal navigation), and then paste the exact same thing with ever link in its rollover state right next to it. It should look something like this. This makes for quicker load time than if you did every image separately and even less CSS needed.

Next we will write all of the HTML out:

<ul id="navigation">
    <li><a href="index.php" class="link1">Home</a></li>
    <li><a href="metal" class="link2">Metal</a></li>
    <li><a href="plastic" class="link3">Plastic</a></li>
    <li><a href="services.php" class="link4">Services</a></li>
    <li><a href="news.php" class="link5">News</a></li>
    <li><a href="catalog.php" class="link6">Catalog</a></li>
    <li><a href="about.php" class="link7">About Us</a></li>
    <li><a href="contact.php" class="link8">Contact</a></li>
    <li><a href="users.php" class="link9">Registered Users</a></li>
</ul>

I always set up my navigation menus in unordered lists. Normally just one ‘id’ on the ‘ul’ tag would be enough HTML, but in the case of each link having its own background then each link has to have its own class.

Here is the CSS for our menu:

#navigation {
	border-right:1px solid #999;
	padding:10px 0px;
	width:145px;
}
#navigation a  {
	display:block;
	background:url(navigation.png);
	height:47px;
	text-indent:-9000px;
}
#navigation a.link1:hover {background-position:-146px 0px;}
#navigation a.link2 {background-position:0px -47px;}
#navigation a.link2:hover {background-position:-146px -47px;}
#navigation a.link3 {background-position:0px -94px;}
#navigation a.link3:hover{background-position:-146px -94px;}
#navigation a.link4 {background-position:0px -141px;}
#navigation a.link4:hover {background-position:-146px -141px;}
#navigation a.link5 {background-position:0px -188px;}
#navigation a.link5:hover {background-position:-146px -188px;}
#navigation a.link6 {background-position:0px -235px;}
#navigation a.link6:hover {background-position:-146px -235px;}
#navigation a.link7 {background-position:0px -282px;}
#navigation a.link7:hover {background-position:-146px -282px;}
#navigation a.link8 {background-position:0px -329px;}
#navigation a.link8:hover {background-position:-146px -329px;}
#navigation a.link9 {background-position:0px -375px; height:65px;}
#navigation a.link9:hover {background-position:-146px -375px;}

Now for the broken down detailed explanation of the CSS:

• The border and padding on the #navigation is simply for looks on this menu
• The width on #navigation is set to the size of our whole nav menu
• #navigation a lets us apply the following styles to every link within the ul
• Display:block is an extremely useful property in many situations. It will change the element into a block level element, i.e. it will act like a div. We can now apply styles to a link that we couldn’t have before.
• Background:url(navigation.png) sets the background for each link
• The height is important, otherwise the link will only be the size of the text by default. In this case, the links’ width is determined by the containing ul’s width.
• Text-indent:-9000px moves the text within the anchor tag off of the page which allows search engines to still have something to index
• Lastly, the key to this CSS strategy is changing the background-position separately for every link and its hover state. For example, #navigation a.link3:hover{background-position:-146px -94px;} tells the browser to move the background image on our 3rd link’s hover state 146 pixels to the left and 94 pixels up. These numbers are all determined by the size of each link, e.g. each link’s background position is 47 pixels higher than the one before it because that is the height of our links.

That’s it! Probably the trickiest part is setting up your image and getting the pixels right on the background positions. If you have any suggestions, comments or questions, please leave them! If you stumbled upon this little gem, make you check out CSS Navigation Rollovers With Drop Downs where we use this rollover technique in a tutorial to create CSS drop downs.

I’ve been hard at work at this new website. Well, really going back and forth between “hard” work and “I’ll get to that later. . .” work. The website is finally complete, and now that it is I plan on working a lot more with it.

This section of the website will mainly be used for me to post any great findings that I stumble upon on the internet, relating to anything graphic or web design, web development and such. One of the biggest weapons that a web developer / designer has in his or her arsenal is their resource of bookmarks. I wouldn’t have such a huge collection if it were not for our line of work being such a sharing community, so I wish to continue that trend with my own website.

I will more than likely also post major personal achievements and events here as well, since I’m not too active in social networking sites like Myspace, Facebook, Twitter, etc. Stay in touch and check the website often! In the next few days I plan on posting some CSS techniques of mine that I love to use.