Noob CSS Position Question

Answer 1

How important is it that:

a) the images are images, not just text/borders?

b) That the images be in the actual HTML, not set as background images?

c) That they have that exact arrangment? (Can they move apart as long as it's proportionate, I mean)?

You could go with something like:

<div id="container">
    <div id="subdiv1"></div>
    <div id="subdiv2"></div>
    <div id="subdiv3"></div>
    <div id="subdiv4"></div>
</div>

And then use CSS positioning to keep them in place, like so:

#container {
    width: 500px;
    height: 500px;
    position: relative;
}

#subdiv1,#subdiv2,#subdiv3,#subdiv4 {
   height: 220px;
   width: 220px;
   position: absolute;
}

#subdiv1 {
    left: 0; top: 0;
}

#subdiv2 {
    right: 0; top: 0;
}

#subdiv3 {
    left: 0; bottom: 0;
}

#subdiv4 {
    right: 0; bottom: 0;
}

I would then use background-image for the images, and :onhover to change it when the user hovered and it became colorful.

Answer 2

I'm not sure why you're specifying the div as "relative" and then overriding it with "absolute", but if you absolutely position it, it takes it out of the flow of the page, and ignores everything else around it. This is likely your problem.

Answer 3

Try doing it a completely diffent way:

If you want the colored number to appear when the user hovers the link, then use the CSS :hover to specify a background image:

<table>
<tr>
<td id="cell1"></td>
<td id="cell2"></td>
</tr>
<tr>
<td id="cell3"></td>
<td id="cell4"></td>
</tr>
</table>

td{
  width: 100px;
  hegiht: 100px;
}
#cell1{
  background: url("image01-bw.jpg");
}
#cell1:hover{
  background: url("image01-color.jpg");
}
#cell2{
  background: url("image02-bw.jpg");
}
#cell2:hover{
  background: url("image02-color.jpg");
}
#cell3{
  background: url("image03-bw.jpg");
}
#cell3:hover{
  background: url("image03-color.jpg");
}
#cell4{
  background: url("image04-bw.jpg");
}
#cell4:hover{
  background: url("image04-color.jpg");
}

If you want to have one image bedind the other, try this:

<table>
<tr>
<td>
  <image class="bw" src="image01-bw.jpg" />
  <image class="color" src="image01-color.jpg" />
</td>
<td>
  <image class="bw" src="image02-bw.jpg" />
  <image class="color" src="image02-color.jpg" />
</td>
</tr>
<tr>

<td>
  <image class="bw" src="image03-bw.jpg" />
  <image class="color" src="image03-color.jpg" />
</td>
<td>
  <image class="bw" src="image04-bw.jpg" />
  <image class="color" src="image04-color.jpg" />
</td>
</tr>
</table>

td{
  position: relative;
}
.bw{
  position: absolute;
  z-index: 10;
}
.color{
  position: absolute;
  z-index: 9;
}