I came up with a unique design for a client's website. It features an assymetrical grid that contains boxes. Some boxes have pictures, others have text. I would like to know the best way to go about coding this in HTML and CSS. I would like the boxes that contain the letters to have a mouse over change color effect (Most likely will be done with CSS3, unless i have to use JS). Here is a mockup of the idea:
I know that i need to fix little aligning issues to make the boxes more uniform, but this is just a picture in my head that I have for an idea. Anyway, here is what I think i should do...
1. Slice each square as an individual item. Using absolute positioning in CSS, align the square appropriately. (I see a nightmare with cross-browser/resolution comparability here.)
2. Have the entire image loaded, and use absolute positioning on the text to have them over the image where i need using a z-index higher than the picture. ( This won't allow me to change the mouse over color transition for the boxes.)
To be honest, both ideas seem pretty rotten. I am not too experienced at HTML and CSS yet, but I think I can do it if given the direction. I am not asking someone to code this, but just a little advice on what I can do to get this working. I cannot resort to using FLASH.