Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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


    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


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

    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

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    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:
    Code:
    <tr valign="top">
      <td><span>3&#46;&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&#37;" 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>&#163;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">&#163;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.

  • #3
    New to the CF scene
    Join Date
    May 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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...ques-for-links


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •