1

I am using placehold.it to produce a square (When on the site I need it for the colors). See:

http://jsfiddle.net/3s3Zb/2/

I would also like to have some text on each box. When I use the provided text input it becomes small and unreadable. So I attempted to put my own text on this image.

I tried following: How to position text over an image in css

Its CSS:

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

#image
{    
    position:absolute;
    left:0;
    top:0;
}
#text
{
    z-index:100;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:350px;
}

But If I put the checkbox in the container it stops working properly (it turns back into a normal checkbox).

If you could show me how to put text on each square/or what I am missing it would be great.

Community
  • 1
  • 1
1478963
  • 1,198
  • 4
  • 11
  • 25

1 Answers1

1

You would just need to position the text absolutely. try this;

HTML

<td>
  <label class="fb" for="11">
    <div>Some text here</div>
    <input id="11" type="checkbox" name="fb" value="11" />
    <img src="http://placehold.it/150/0.8&text=asdasdasddasdaasd">
  </label>
</td>

CSS

.fb {
     position:relative;   
}
.fb div {
    position:absolute;
}

the fiddle

rubo123
  • 186
  • 6