How to position checkboxes under images

Position checkbox

[Popdum]

Hi,

I have got a form where I need users to click the images they want to delete from a MySQL DB on the server. They choose the images they want to delete by viewing thumbnails of the images and clicking on a checkbox beneath the images they want deleted.

I would like to position these checkboxes under each image. I have many images, so I display them 6 images in one row.

How can I do this? My basuc difficulty is that the images are inside my form, and I see no way of fitting them harmoniously with teh form elements.

Thanks for your help

[Stomme_poes]

Hmmm.. I JUST did something like this, except I'll bet your images are larger than mine...

I had to (re) make a form where there's a small icon above the checkboxes. I don't know how semantic you make your forms. Mine are very.

<div id="formblok">
<form action="main.pl?page=zoeken" method="post">
 <fieldset>
 <legend><span></span></legend>
<!--...stuff here...-->
<div><!--label for above the icons-->
 <label for="huisid">Huis ID:</label>
 <input type="text" id="huisid" name="HuisId" />
</div>
<div class="icon">
 <div>
 <img src="***.gif" title="blah" alt="blah" /><label for="huisdieren">amimals</label>
 <input type="checkbox" id="huisdieren" name="" />
 </div>
 <div>
 <img src="***.gif" title="blah" alt="blah" /><label for="zwembad">zweminals</label>
 <input type="checkbox" id="zwembad" name="" />
 </div>
 <div>
 <img src="***.gif" title="blah" alt="blah" /><label for="invalide">mimalnimal</label>
 <input type="checkbox" id="invalide" name="" />
 </div>
 <div>
 <img src="***.gif" title="blah" alt="blah" /><label for="tennis">mahominahomina</label>
 <input type="checkbox" id="tennis" name="" />
 </div>
 <div>
 <img src="***.gif" title="blah" alt="blah" /><label for="ski">skavanahavana</label>
 <input type="checkbox" id="ski" name="" />
 </div>
 <div>
 <img src="***.gif" title="blah" alt="blah" /><label for="strand">stalala</label>
 <input type="checkbox" id="strand" name="" />
 </div>
 <div>
 <img src="***.gif" title="blah" alt="blah" /><label for="golf">goffagoffa</label>
 <input type="checkbox" id="golf" name="" />
 </div>
 <input type="submit" id="submit" value="snarf" />
 </fieldset>
  </form>
</div>

form {
stuff here;
}
select {
 width: 200px;
 margin-bottom: 5px;
}
#formblok div label {
 display: block;
 text-align: center;
 margin-bottom: -10px;
}
#formblok div.icon {
 width: 175px;
 height: 60px;
 margin: 10px auto;
}
#formblok div.icon label {
 position: absolute;
 margin: -9000px 0 0 -9000px;
}
#formblok div.icon div {
 float: left;
 width: 25px;
 height: 50px;
}
#formblok div.icon div img {
 display: block;
 width: 20px;
 height: 20px;
}
#formblok div.icon div input {
 display: block;
 margin-top: 10px;
 margin-left: 2px;
}
#formblok input {
 display: block;
 margin: 10px auto 0 auto;
}
#formblok form #submit {
 display: block;
 clear: left;
}

This is my first post, so I hope it's cleaned up enough... it's taken direct from my working page. The icons are pretty small as you can see, they're only 20px by 20px. If your images are larger, the div I called "icon" would have to obviously be bigger to accommodate them. This set-up so far also seems a little bit fragile... some browser somewhere still let the checkboxes overlap on the icons, depending on what was going on on the rest of the form (I cut out the stuff above it).

[edited by: Stomme_poes at 3:05 pm (utc) on Feb. 15, 2008]

[Popdum]

Thanks very much Stomme_poes for your help!

I tried what you have provided with some modifications that I needed. However, the images are displayed one under the other, and not 4 in each row. What could be the problem?

[Stomme_poes]

If they are under each other (which they're going to do because we set them with display: block to act like blocks), then the float on the div which is wrapping both image and text isn't working.

You do have a div wrapped around each image/text pair right? This is where I had

#formblok div.icon div {
float: left;
width: 25px;
height: 50px;
}

This refers to the nameless div I have wrapped around each image and label-- the div which is inside the whole wrapping div called "icon".

If you did this, then the second reason is likely that your version of "icon" div isn't wide enough to allow the floats to "float" up alongside each other. OR you didn't even set a width... which, if for some reason you also floated the "icon" div then it's shrink-wrapping. If you didn't set a width and are not floating the "icon" div, then the "icon" div should be trying to be as wide as possible (divs do that naturally)-- 100% of its container. In which case, the floats would ALL stack up alongside each other... so if this were the case, then "icon"'s container itself (where I was using "form") isn't wide enough OR is a float without a set width.

Could you post what you have so far code-wise? I can probably figure it out. I've been pulling my hair out with these things for some time now on my own sites : )

[Popdum]

Thanks a lot for your help again, Stomme_poes; the problem was with not specifying the width. It works perfectly now!

Thanks once again!