That’s really a list of items, so mark this up as a <ul> with left padding and overflow: hidden. Give each <li> width and height and some margin to the right and bottom and float them left.
Thanks marketingquotes. I don’t know if you ever saw the original site, it was a learning curve with a lot of help from this site. I think the differences are massive between the last one and this now. Thanks for the kind comments
What do you also think about setting a position:relative on the UL and position:absolute on the LIs? Then just moving the LIs exactly where you want them? Do you have any thoughts on the difference between the float and positioning? Some people swear by either but I don’t know why.
Use position:absolute as a last resort, because it’s very hard to get other elements on the pages to interact properly with elements in this state. Even though floated elements are also taken out of the flow of the document to some extent, they are still easier to work with.
There are other ways you could do this with CSS, such as display: inline-block, but you then need workarounds for older browsers. Floating is the most reliable and straight-forward.
well… I havnt got any further with this design as I wasnt too sure if I was over complicating something that wasnt necessary.
What I am trying to achieve is a “landing page” for treatments with the options similar to above. In the above idea I was going to include a relevant image in each blue box but I am not sure if this will look proffesional as the images will all be slightly different.
I have thought about just using a secondry navigation but using blue buttons instead.
Does anyone have any suggestions as to what else I could do?
Just do what ralph said it is easiest way. You need one <ul> and under <li> anchor images. Then through CSS you position them and give them height, width to align them properly.
