I can't find the answer to this question but it must have been done before.

I have four lines of small images forming "keys" in a sort of kyboard layout (see link):

http://bestmarketingnames.com/Tbanneredit_v53.php

In order to improve SEO the client would like me to use css to create buttons rather than the images that are being used presently.

The client likes the fact that the buttons (or keys) line up perfectly with the vertical margin on the left side and right side of the container. For this reason I assume the css/php/mysql must either store width information for the keys or an appropriate percentage must be used that will cause the buttons resize approriately to fill cause the images to exactly fill the container div. Also, if possible, the client would prefer that the keys somewhat match the total width of the words in them.

I am generating the dynamic parts of the page with php/mysql, and am using a single mysql table with 5 columns.

Is there an easy way to use css to create the buttons? I would prefer to not have to store the css button image widths in the database, but if I have to I can.

Thanks in advance
Tom

Check working DEMO http://jsfiddle.net/yeyene/UfVhD/3/

Calculation

button counts in each row = ( number of your buttons/4 )

then,

each button width = ( your content width/button counts in each row) - ( button counts in each row * left right margin 2px )

CSS

ul#myButtons { 
    background:#d6d6d6; 
    padding:5px; 
    float:left; 
    width:920px;}

ul#myButtons li {
    list-style:none; 
    float:left; 
    width:100px; 
    margin:1px; /*Try deleting this float float:left; */
}

ul#myButtons li a { 
    display:block; 
    background:#aaa; 
    color:#444; 
    padding:2px 6px; 
    font:normal 12px Arial; 
    text-decoration:none; 
    text-align:center;
    margin-bottom:1px; 
}
ul#myButtons li a:hover { 
    background:#f0f0f0;
}

HTML

<ul id="myButtons">
    <li><a href="#">aaaa</a></li>
    <li><a href="#">aaaa</a></li>
    <li><a href="#">aaaa</a></li>
    <!-- links go on -->
</ul>