Web Design by Sheriar Designs: Impeccable Code | Beautiful Design

So many sites use icons in their headings to give that extra sense of polish to their design. I do it here on my front page. It’s easy enough—add some padding to the left of your heading and set a non-repeating background image positioned to the left of it and voila!

But what if you want the icon to sit to the right of the heading text, as in this example? If you give padding to the right of the heading and set a non-repeating background image positioned to the right you’ll see your icon flush right with the edge of your container, rather than at the end of your text. What to do? Let me show you.

In Semantic and Gorgeous Navigation Bars I explained the method I use for creating nav bars based on unordered lists which display as images and have hover and on states. Today I want to take that concept a bit further.

The idea is really the same, I’m just doing two things a little differently. First, I’m including photographs as part of my “nav button,” and secondly, I’m using some absolute positioning. First, have a look at the project I’m talking about (designed by Travis D. Falls) and check out the left sidebar. You’ll see that hovering over the “buttons” or the images associated with them will cause the entire block to light up. Let me quickly show you just how easy that actually is to accomplish.

I’m currently working on a site with the wonderful Hong Vo from Namaste Interactive that has an embedded flash video object on the home page. This site also has a horizontal drop-down menu. All was great until one of the drop down lists became long enough to overlap the flash video. Apparently, when embedding a flash video into an html page the embed code automatically puts the flash video on top of everything else. I could not for the life of me get the menu to lay behind the video no matter what I tried.

It was one of those “little problems” that was eating away my entire morning and most of my patience! ;o) In sadness, I discovered several forum discussions in which, apparently, it was agreed that there was simply nothing to be done.

Thankfully, I was stubborn and continued to dig further (I don’t give up easily!) and found this discussion, which contained a simple solution, which I will summarize for you:

I’m back! Refreshed, rejuvenated, working like crazy, and married!

Seems that I’m reporting on nothing but Javascript these days, doesn’t it? Sorry about that - it must just be what I’m jazzed about at the moment. Anyhow, here is a little clamshell navigation script thingy that I recently put to good use. See it in action here and then see how it’s done.