The other day while browsing jobs that needed to be done on craigslist.com I saw the following request:

“I need someone to change the navigation menu on my site. I need to add a new page. I already have the code written for the page, but I can’t figure out the menu. I have the graphics ready. The site is www.sub9gear.com and I want to add a “dealers” page, so I need dealers added to the menu. Send me a cost and let me know when you can do it….like I said I already have the graphics completed. Looking for someone local…not in India .”

So I decided to take a look at the page and this is what they had:

Click here to get the HTML Code and the CSS Code for this site.

The first thing I noticed was that the both the HTML and CSS files are completely unorganized, something that should never have happened.  Despite the unorganized files, the HTML was pretty self-explanatory as it was just a bunch of <div>s.  The CSS on the other hand was a nightmare.  In order to figure out what was going on, I had to scroll up and down several times to see how things were being affected.  To help myself out, I put the CSS file into an order that followed the order of the <div>s in the HTML file (with the exception of #menu1).

What needed to happen was that all the menu items needed to shift to the left to allow for the Dealers link to be inserted.  Based on the code being used this was a simple task.

All that needed to be done was to make the image width of the XSR shorter, and then move the menu blocks over to the left until there was enough room for the provided DEALERS button.  Firefox has a plug-in “Firebug” that really makes manipulation of a web page very easy.  All I had to do was “Inspect” the <div>s that needed to be adjusted, and then changed the attribute “Left” until the <div> was in position.  I also found that <div id=”layer4” /> was unnecessary, so I deleted it.

Once there was space for the DEALERS button I had to add in the <div id=”dealersb”><a href=”dealers.html” title”dealers”></a></div> to match the rest of the menu links in the HTML code.  This needed to be added to all the pages using this menu.  In order for the link to be displayed properly the following CSS code was added to the CSS file:

I also added “#dealersb a” to the list controlling the display of the text.

In order for the DEALERS button to appear blue while on that page the HTML on the Dealers page I needed to add “style=”background-position:-107px 0%;” to the <div id=”dealersb”>.

This job was fairly easy and took me less than an hour to do because I was able to find all the images and the new page on his original site.  I did this by looking at the code to see where the images were being pulled from and linking to.

And the final result looks like this:

To see the finished product, please click here.

While this was a really quick fix, had I actually contacted this company 20 minutes sooner, I would  have probably got the job. Had I got the job and been paid for it, I would have wanted to update both his HTML and CSS files to make them more user friendly.  But because I didn’t get the job, I just stopped there. If you have any comments or suggestions I would love to hear them!

Filed under: Web Design, Web Development by Kenneth