I am trying to make a multiple line horizontal toolbar that contains both images and test. Each 'tool' is just a link to something like 'Print Article', 'Save to Favorites', etc. The tool has an image and text next to it displaying the title. The text next to the image needs to be able to be on two lines. So for 'Save to Favorites', the top line would be 'Save to' and the bottom line would be 'Favorites'. Also, there could be as many as 10 to 15 of these tools, so the ones that don't fit, should wrap to the next line. I have tried lots of different methods, but the closest I could come is putting each tool in it's own table. The image would fall in one <td></td> tag, and the title would go in another <td></td> tag. This gives me the look of the text to the right of the image, and the text easily able to be properly on two lines. Unfortunately the only way to get tables next to each other is to float them left, which takes away from the tools being centered within a div. Not a huge deal when there are a lot of the tools, but occasionally only one or two will show up, which makes the non-centered look very obvious and out of place. Also, because the the image and the text are in separate columns, I have to use two identical link tags; one for the image and the same one for the text. Obviously this is not ideal either. Does anyone have any ideas of how this can be done properly?
|
