Re: Trying to position buttons in a footer

[furrball1383]

no no, there is a much simpler way.

Basically you take your buttons (i realize that they are set at different heights from the base but there is a simple solution to that) and set the height of your list items from the bottom of the footer to the top of the highest button. then simply set guides for the top of the highest button and the bottom of the footer.

After this you hide the background, and make the selection between the guides, copy it and paste it to a new document. now simply make a new layer and on the bottom add a one pixel line of some color (you’ll see the reason for this soon enough). Now edit the canvas size and double it. Then go back to the original document, hide the buttons in the off state and show the buttons in the on state. Copy the on state with the same selection as before go back to the second document and paste it below the black line. You can now remove the black line and save the document as a web based png with transparency.

Now in your css you have set the height of the list elements so for the off states you will just have to change the x value of the positioning for each list element and for the on states you will have to have the x values changed and the y value will be the height of the list element +1 pixel.to start the picture from the bottom row. Its that simple instead of div’ing each button. also if you feel like you want separate pngs for each button you can do that as well, but i like to keep all the buttons in one file if i can help it.

Also make sure that your widths are specified on your list elements so that you dont have edges of the next button showing etc. I hope you understand what I’ve said, write back and let me know.