Nice idea and a nice way of presentation ... quirky colours, though!
Please feel free to offer alternative quirky colours
Alan, you might like the following additions to the css styles:
When the width of the text exceeds the width of the image it becomes aligned to the left. These two attributes will fix this:
Code:
image {
display: block;
margin: 5px auto 0; /* instead of "margin-top" */
}
Done that. :sigh: It all fitted fine until someone asked for more text. The map descriptions stuff caused the extra width (and the extra height - see below).
The outer div could use a border, too. Why not invert the image border style:
Code:
div {
border: 7px outset ccc#;
padding: 5px;
}
Sorry - I guess it's a matter of taste, but you like outset, I prefer inset. I have the FTP server access, so unless there are strong votes for a change, I'll stick with what we have.
I tried a border round each div and it looked wrong. Putting one round the image *and* the (text+image) would look very cluttered, as well as adding unnecessarily to the overall width of each image area.
P.S. And simply remove the "height: 190px" for the outer divs to prevent the divs floating into each other vertically!
Web pages like this are a compromise. I have to cater for people who want to use 1024-wide laptops, and 2560-wide cinema displays, and everything in between.
The fixed div height is a calculated value, aimed at ensuring that map divs float left correctly without leaving unnecessary gaps in each row. I had the options of (a) fix the whole layout with 3 or 4 maps per row, or (b) let them float up and left leaving gaps on the left, or (c) give them all a fixed height and float them left. I chose the last option, but I didn't adjust the height calculation when I added the Map Description text, hence the overlap, which I've fixed. So sue me!
(In fact since I had to re-build said PC I've not even installed Civ4 yet.)
