Displaying Query Results Aesthetically

Hello there,

I'm fairly new to web design and am in the middle of my first web application. The php & mysql side of the site has gone well :) but I am now stuck.


At the moment my query results are displayed in a very ugly html table. I want the results displayed in blocks of information for each new row, much like...

Music Items on Amazon (http://www.amazon.co.uk/gp/bestsellers/music/ref=amb_link_55543765_5?pf_rd_m=A3P5ROKL5A1OLE&pf_rd_s=center-2&pf_rd_r=0G5GRQZHRZVD90W1N3A0&pf_rd_t=101&pf_rd_p=186161591&pf_rd_i=229816)


There is an image, 4 short text fields and one fairly long description text area. I have a jist of how I want it to look:

----------------------------------------------------------------
Text1_________Text2 _______ Text 3__________ Text 4

[*******] DescriptionDescriptionDescriptionDescription
[*IMAGE*] DescriptionDescriptionDescriptionDescription
[*******] DescriptionDescriptionDescriptionDescription
----------------------------------------------------------------

The image will have to be resized and onmouseover I'm aiming for a similar enalargement effect to that foiund on..

Istock (http://www.istockphoto.com/file_search.php?action=file&text=%22City+Life%22&oldtext=tree&textDisambiguation=%7B%22l%22%3A+%221%22%2C+%22m%22%3A+%5B%7B%22t%22%3A+%22City+Life%22%2C+%22l%22%3 A+%221%22%2C+%22c%22%3A+%5B%221_85833%22%5D%7D%5D%7D&oldTextDisambiguation=&majorterms=&fileTypeSizePrice=%5B%7B%22type%22%3A%22Image%22%2C%22size%22%3A%22All%22%2C%22priceOption%22%3A%221 %22%7D%2C%7B%22type%22%3A%22Illustration+%5BVector%5D%22%2C%22size%22%3A%22Vector+Image%22%2C%22pric eOption%22%3A%22All%22%7D%2C%7B%22type%22%3A%22Flash%22%2C%22size%22%3A%22Flash+Document%22%2C%22pri ceOption%22%3A%22All%22%7D%2C%7B%22type%22%3A%22Video%22%2C%22size%22%3A%22All%22%2C%22priceOption%2 2%3Anull%7D%5D&showPeople=0&printAvailable=0&exclusiveArtists=0&extendedLicense=&illustrationLimit=Exactly&flashLimit=Exactly&showDeactivatedFiles=&membername=&userID=&lightboxID=&downloaderID=&approverID=&clearanceBin=&color=&copySpace=&orientation=7&minWidth=0&minHeight=0&showTitle=&showContributor=&showFileNumber=1&showDownload=1&enableLoupe=1&order=Best+Match&perPage=&within=4)


The image stuff I'm guessing can be achieved using javascript or css? But the blocks I just can't seem to figure out!:mad:

ANY help would be wonderful!! But especially:

Where & How should I start?

What language or technology can be used to achieve the desired effect?

Thanks in advance


Daniel

If you check the source for the Amazon page, you'll see that they're actually using a table as the foundation for the listing. Nested tables, even. I think this is a complete single listing:

<tr valign="top">
<td><span>3.&nbsp;</span></td>
<td align="center" valign="top"><a href="http://www.amazon.co.uk/Hard-Candy-Madonna/dp/B0015D3Z4O/ref=pd_ts_m_h__3?ie=UTF8&s=music"><img src="http://ecx.images-amazon.com/images/I/51p2Q98fW1L._SL500_SL150_.jpg" width="150" hspace="5" alt="Hard Candy" height="150" border="0" /></a></td>
<td width="100%" valign="middle">
<strong class="sans"><a href="http://www.amazon.co.uk/Hard-Candy-Madonna/dp/B0015D3Z4O/ref=pd_ts_m_h__3?ie=UTF8&s=music">Hard Candy</a></strong> <br />
~ Madonna (Artist)<br />

<span class="tiny"><span style="white-space: nowrap;"><img src="http://g-ecx.images-amazon.com/images/G/02/x-locale/common/customer-reviews/ratings/stars-3-5._V5268006_.gif" width="55" alt="3.6 out of 5 stars" align="absbottom" height="12" border="0" />&nbsp;(62 customer reviews)</span></span>
<br />
In stock<br />
<a href="javascript:openRecsRadio('/gp/recsradio/radio/B0015D3Z4O/ref=pd_krex_listen_ri?ie=UTF8&refTagSuffix=ri')"><img src="http://g-ecx.images-amazon.com/images/G/02/x-locale/personalization/music_sampler/track-icon-playing._V20896411_.gif" width="16" align="absmiddle" alt="Listen to samples" style="margin: 0pt 5px 0pt 2px;" height="15" border="0" />Listen to samples</a><br />

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="priceBox">
<tr>
<td width="45%">

<p class="priceBlock"><strong>Price: </strong> <span class="price"><b>£8.98</b></span> </p><p class="priceBlock"><a href="http://www.amazon.co.uk/gp/offer-listing/B0015D3Z4O/ref=pd_ts_m_h__3?ie=UTF8&condition=all">42 used &amp; new</a> from <span class="price">£6.45</span>
</p>
</td>
<td width="55%">
<table>

<tr><td>

<form style="margin-bottom: 0px; padding-bottom: 0px" method="post" name="handleBuy" action="/gp/item-dispatch/ref=pd_ts_m_h__3">
<input type="hidden" name="session-id" value="203-8206562-1815903" />
<input type="hidden" name="quantity.1" value="1" />
<input type="hidden" name="asin.1" value="B0015D3Z4O" />
<input type="hidden" name="offeringID.1" value="TpbExEP98Qq%2Bhcwk%2BwuImCXo3KCO6nri75nlfTg5AluQApLyKTEljGrj6SDXM0ZNqMfebU1jsfO43%2B1GdtpkJQ%3D%3D" />
<input type="image" src="http://g-ecx.images-amazon.com/images/G/02/x-locale/personalization/yourstore/add-to-cart-p._V45455727_.gif" width="106" vspace="2" alt="Add to Cart" value="addToCart" name="submit.addToCart" height="22" border="0" />


<input type="image" src="http://g-ecx.images-amazon.com/images/G/02/x-locale/personalization/yourstore/add-to-wishlist-s._V45450706_.gif" width="106" vspace="2" alt="Add To Wish List" value="Add To Wish List" name="submit.add-to-registry.wishlist" height="22" border="0" />

</form>
</td></tr>
</table>

</td>
</tr>
</table>
</td>
</tr>

<tr><td colspan="4"><hr noshade="noshade" size="1" class="divider"></td></tr>


Tables aren't a bad thing when displaying tabular data. They're just not very good for page layout.

Tomws, Thankyou for the prompt reply.

Nested Tables.. It all makes alot more sense now! Thanks for the starting point, I'll research it and post my progress.

With regards to the image. Does anyone have any insight into..

What tools and language I should you to resize the image so it fits neatly into the table?

Whether to use CSS or Javascript to create the onmouseover image enlargement effect found on istock?

You should probably use PHP to resize the image to the appropriate size, or just let it be as it is. Resizing an image based on the window size is not as good because it could be pixelated.

I would use pure CSS when possible.

http://cssglobe.com/post/1614/4-uber-cool-css-techniques-for-links