Simpliest way to display thumbnail images without spaces

Question

I am trying display images seamlessly in a checkerboard fashion. All images are same size. Can't seem to eliminate spacing between rows.

The overall goal is compact code.

Here is the original code.

<?php build();

function build(){
for($x=1;$x<=11;$x++){
for($y=1;$y<=11;$y++){
?><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><?php }}}?>

Here is what I have after trying several other things to eliminate the spacing.

<?php build();

function build(){
for($x=1;$x<=11;$x++){
?><div style="clear:left; float:left;"><?php
for($y=1;$y<=11;$y++){
?><form action="$_SERVER['PHP_SELF']"
><input type="image" name="data" value="var" src="images/blue.png"></form
><?php }?></div><?php }}?>

Per request, html translation.. (values changed to 3 to reduce length.)

<form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form>

Here is what ended up working. It works now because all inputs have been lumped into a single form.

<?php solutionbuild();

function solutionbuild(){
for($x=1;$x<=11;$x++){
?><form method="POST" action="<?php $_SERVER['PHP_SELF'] ?>"><div style="clear:left; float:left;"><?php
for($y=1;$y<=11;$y++){
?><input type="image" name="data" value="9" src="images/green.png"><?php
}?></div><?php }}?>

html version (yikes)

<form method="POST" action=""><div style="clear:left; float:left;"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"></div><form method="POST" action=""><div style="clear:left; float:left;"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"></div><form method="POST" action=""><div style="clear:left; float:left;"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"></div>

I don't know exactly why consolidation of the forms eliminates the spacing issue. If anyone knows, please let me know. Thanks

for clarification. there is quite a bit of redundancy included in the second example to help illustrate what has been tried before presenting the question. — krantz, Feb 03 '15 at 18:03
I'm not sure if I understand the context of what you are asking. Sorry, I'm new.. first post.. If you are asking why I didn't post the translated html version of the php, it's because I'm having trouble figuring out the proper way to tie the styles into the for loops. If I just show the html I wouldn't be sure if the divs should be inside or outside the loops, ect. If you were asking something else, let me know and I see if I can add it. — krantz, Feb 03 '15 at 18:24
The html would provide us a mean do answer the question. As it is in the resulting html your problem lies. If you then experience problems translating that correction to your php code, that can be a follow-up question. Do not expect us to try and execute random php-snippets in order to understand your question better. Hope that helps as an explanation. — Captain Giraffe, Feb 03 '15 at 18:29
Are you sure you need to use a form for each image input? You have 11 rows and 11 images per row, 11*11 = 121 forms. — hungerstar, Feb 03 '15 at 20:06
It's possible that I will want different input triggers to have different form actions. I am not aware of a more compact way to achieve that with php. I'm new though, if their is a better way to implement that, please let me know. — krantz, Feb 03 '15 at 23:43
I get that you want to do different things based on which image is selected but you don't need multiple forms `
` to do that. Do what you have done and have each input share a name but have a different value, ie `name="foo" value="1"` then `name="foo" value="2"` etc. When the form is submitted `foo` will equal the value of the image clicked on. This may no longer be true but the value passed by `input type="image"` may be inconsistent across platforms. As an alternative you could use the ` — hungerstar, Feb 04 '15 at 15:42

hungerstar · Answer 1 · 2015-02-03T20:09:17.417

The space you are seeing below your images is because they are inline elements. Inline elements include space for the descender in text like the lowercase letters j and g.

Float your image inputs to or set them to display block to remove this extra space.

Edit

Not sure why you want to use a form for each image input. I would wrap a form tag around the whole thing myself (that is, without further info) so I left them out.

Here's an example:

.no-float,
.float {
  margin: 25px 0;
}
.float input {
  float: left;
}
.float .row {
  clear: left;
}

<!-- Non floated inputs (has spaces) -->
<div class="no-float">
  <div class="row">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
  </div>
  <div class="row">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
  </div>
  <div class="row">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
  </div>
</div>

<!-- floated inputs (no spaces) -->
<div class="float">
  <div class="row">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
  </div>
  <div class="row">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
  </div>
  <div class="row">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
  </div>
</div>

I have tried both display:block; and float:left; in
that doesn't seem to do anything. I'm assuming I need to change the scope of the div, but I can't figure out where I need to move it. — krantz, Feb 03 '15 at 19:46
You need to apply it to your inputs, ``. If this does not work then you have applied it incorrectly or there is more going on than what you have provided in your question. I have added an example code snippet to my answer. — hungerstar, Feb 03 '15 at 19:58
I think that using multiple forms resulted in extra white space somewhere, but still am not sure. For some reason it works with one form, but not with multiple. thanks for the help. — krantz, Feb 03 '15 at 23:47
As mentioned before, I don't think you need to use multiple forms, but for the issue as to why removing forms eliminated the spacing issue I'm going to suggest that you have some CSS that is causing this that you're unaware of. Please, if my answer solved your issue please accept it as the accepted answer. — hungerstar, Feb 04 '15 at 15:28

Simpliest way to display thumbnail images without spaces

1 Answers1