need help on php/html

[thenewprogrammer]

trying to make my images line up right. The code works fine but i cant seem to get the price to go under the image instead of to the side of it and keeping the images all in same row.

$query2 = "SELECT * FROM game WHERE item_type = 'food' ORDER BY RAND() LIMIT 7";
$result = mysql_query($query2);
 
while($row = mysql_fetch_assoc($result)){
$image = $row["item_img"];
$desc = $row["item_desc"];
$cost = $row["item_cost"];
echo '<img src="Images/items/'. $image . '.png" alt='. $desc . ' />';
echo '<br />' .$cost;
}

 

[misson]

Remember, HTML is about structure, not layout. Stop thinking "I need a new line here, so I'll put in a <br/>". First, come up with the structure, then style it. It looks like you're listing items, so using list elements is a natural fit.

<ul class="items">
    <li><img src="..." alt="..."/>cost</li>
    ...
</ul>

Then comes styling:

.items, .items li {
    /* style reset */
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.items li {
    float: left;
    text-align: center;
}
.items li img {
  display: block;
  height: 64px; /* or what-have-you */
}

Add padding, borders, background &c.

To generate the item list, create a list view and pass in the query result.

class Item {
  public $item_cost, $item_img, $item_desc;
  function __toString() {
    return "<img src='{$this->item_img}' alt='{$this->item_desc}'/>{$this->item_cost}";
  }
}

...

function listView($rslt, $itemClass, $listAttrs='', $itemAttrs='') {
  echo "<ul $listAttrs>";
  while ($item = $rslt->fetchObject($itemClass)) {
    echo "<li $itemAttrs>$item</li>";
  }
  echo '</ul>';
}

...

$db = new PDO('mysql:localhost;dbname=...', ...);
$food = $db->prepare("SELECT * FROM game WHERE item_type = 'food' ORDER BY RAND() LIMIT 7");
$food->execute();
listView($food, 'Item', 'class="food"');

Further abstract the above code, wrapping the result in an Iterator and use that in the list view. You can also make the list view an object. You can also turn the $listAttrs and $itemAttrs parameters into arrays and create a function or a class to convert them into strings. Perhaps something like:

class Attributes {
  private $_data = array(), $_attrStr=null;
  function __construct($data) {
    $this->_data = $data;
  }
  function __toString() {
    if (is_null($this->_attrStr)) {
        $this->_attrStr = '';
        foreach ($this->_data as $name => $val) {
            $this->_attrStr .= " $name='$val'";
        }
    }
    return $this->_attrStr;
  }
}

... // everything else the same, except for:
listView($food, 'Item', new Attributes(array('class' => 'food'));

You could also look into using one of the XML manipulation extensions to generate the HTML.