Web Design by Sheriar Designs: Impeccable Code | Beautiful Design

Remember when, for a five-section graphic nav bar we would have 15 images … five images for the Off state, five images for the Hover state, and five images for the On state? And then we cleverly had just five images - one for each section - in which we combined the Off, Hover, and On states? Well lately I’ve been taking this trend to it’s logical conclusion … one image for everything. That’s right, for everything.

Using background positioning in CSS, this is actually pretty easy to accomplish. Now you only have one image to create, and it has the extra bonus of taking care of any pesky little IE flicker problems. Here’s how to do it …

Working on a recent project, I was asked to create a “dock effect” (similar to the doc on a Mac) for a row of thumbnails. I hunted around for quite some time for a decent javascript for this and really came up empty handed. So I decided to use css to not exactly mimic this effect, but at least echo it. ;o) Here is what I came up with.

This week I was working on coding the home page of a new project. The first thing I noticed upon reviewing the psd (designed by the fabulous Hong Vo of Namaste Interactive) was that the header graphic was to extend in both directions indefinitely … but that it was different on the right and left sides. Huh … how to handle this? I couldn’t simply repeat one strip at the top of the page. I didn’t want to make one huge graphic with one pattern on the left side and one on the right and then center the image … that would work, but it would require a huge graphic! Any other solutions I initially thought of would create a horizontal scroll bar to be ever present. What to do?

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 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.

So you guys might be noticing that I’m trying my feeble hand at Javascripting a bit more lately. It’s been a steep learning curve for me but I’ve been so excited at what I’ve been able to do with it (see Multiple Pages In One, Javascript-A-Palooza, and a little portfolio site I threw together for a friend of mine for examples of what I’ve been up to).

After putting up the portfolio site it was brought to my attention that every time anyone clicked a thumbnail for the third time (any thumbnail, any order) IE for windows would crash. (Of course all other browsers were good to go.) Grrr! I quickly went over to the other little site I have in t he works which uses this Javascripting to compare, since I thought this one was ok, and was quite distressed to discover the same problem - every third link clicked on the Services or FAQ page would crash IE. Double-grrr!

After poking around aimlessly myself for a while I sent out a cry for help to one of my readers, Brian, who had helped me out before by sharing some suave Javascript skills. Much more quickly than I could have hoped for, he solved the problem and made my scripts more streamlined in the process.

So, I started off with a simple, five-page, static website. Piece of cake. I design it - it was rough going there for a bit as I tried to find the look for this site - but in the end I’m really stoked on it. I go to implement it in xhtms/css and all goes relatively smoothly. Yay.

But then … on the home page … I’m loving how it looks with minimal content but there are a few more paragraphs that I’d like to be able to add. I make a “read more” link at the bottom of the minimal content but I’m thinking that I dont’ really want to go to a new page when I click “read more,” because the “more” text doesn’t really deserve it’s own page. I think, “Hey it would be cool if when I click ‘read more’ then content box just expands and then there’s the “more”. I know how to do that!”

Ah, such simple thinking. Little did I know this would lead me down an obsessive path and a steep javascript learning curve to produce several pages with chunks of content which can be turned off and on by clicking links while at the same time keeping everything semantic and good to go for those with javascript disabled.

Occasionally I’m asked to create a page where there is tons of information (passed in through a database) and the information needs to be broken up into manageable page-like junks, but I can’t actually create multiple pages because the programmers require that the page does not refresh. Through some pretty simple css and javascript we can use buttons or tabs (or links of any kind) to switch beteen various data on a page.

So I haven’t written in a bit, what with the Holiday Slump and all, and I’ve been thinking about what my next tutorial should be. Lots of complicated ideas have been running through my head and then yesterday, while I was working on a new project, it occured to me that the there is something I do almost every time I code a website, and that is to create a semantic navbar - one that often displays as gorgeous imagery but is in fact coded with a simple unordered list. It occured to me that perhaps not everyone knows how to do it. So, while I know it’s been blogged about before, I’m going to offer my method for accomplishing this every-day task.

Ahh … if only I had written this article! But alas, no. To me, this is the best explanation of css positioning on the web. I attribute the start of my mastery of css in very large part to this one article. When I read it, something in my brain went, “Ooooooh … oh my god … I actually understand now!” I am am eternally grateful.

If you need a primer or a refresher on how to position things using css, then this is the thing to read.

Enjoy.