What is a productive method for quickly styling a palette window?

Question

I have a page that implements basic MS-Paint type functionality using the following palette:

When a tool is selected a grey outline is shown instead.

Currently an image of the window with the grey outlines is set as the background of the window div. The individual tools are on a single separate image:

When I begin to style the window, each tool is absolutely positioned using css of this nature:

#sketchpad_tools .tool.paintbrush {
     background: url(../images/sketchpad/selected_tools.png) no-repeat -15px -80px;
     top: 90px; left: 10px;
     height: 100px;
     width: 100px;
}

This requires me to eyeball each position, adjust the top and left properties, followed by finding the right location in the background image where the tool resides. This turns out to be a very time consuming task. If I decided to shrink the background size of the images--which I had to do on multiple occasions--the task becomes twice as long to complete.

Is there a more productive method for quickly styling this sort of functionality?

Answer 1

Instead of using the background image for the palette with the shadows, why not have a selected image (grey) and not selected image (colour) for each tool instead? When the tool is selected just hide the colour image and show the grey version.

If you have the images (without positioning) in a DIV with a width set to that of the palette then they should automatically wrap when the DIV width is exceeded.

See JSFiddle sample here showing how images will wrap in a DIV, just set the width of it.

Code sample you just need to add your image links in and :

<DIV style="width: 300px;">
    <p>My Toolbox</p>
    <img src="Tool1_Image_Location_Grey" />
    <img src="Tool2_Image_Location_Color" />
    <img src="Tool3_Image_Location_Color" />
    <img src="Tool4_Image_Location_Color" />
    <img src="Tool5_Image_Location_Color" />
</DIV>