Welcome to the Graphic and Web Design Forum


your forum for all things Design


  •  » Graphic Design
  •  » Web Design
  •  » Logos and Branding
  •  » Illustration
  •  » Photography
  •  » Design Tutorials
  •  » Plenty of Off Topic Chat

Register now to remove this ad box


YES! I want to register an account for free right now!


-->
  1. #1

    How to display product infomation?

    ADS NOT VISIBLE TO MEMBERS
    Hi all,

    I have a problem, I need to display a product (picture floated left) and to the side of it I need all the information, I don't want to use
    's to display this information. So I was thinking a table was the way to go.
    Then i thought maybe i should be using a list.

    Which is the best method and how'd you display eg;

    Product xxxxxxxxx

    Dimensions xxx xxx

    Price £xxxxx


    I've never used a table before

  2. #2
    Ok i'm playing with the HTML as we speak and maybe a
    would work, making the dt's strong and indenting dd's.

    What do you think?

  3. #3
    tr0y's Avatar
    Join Date
    Jul 2008
    Location
    Seattle, Wa
    Posts
    174
    HTML Code:
    .img {
        float: left; 
        height: 300px;
        width: 300px;
        background-color: blue;
        margin: 10px;
    }
    
    .item {
        float: left;
        height: 320px;
        width: 600px;
    }
    
    <div class="item">
                <div class="img"></div> 
                <div class="details">
                    <label for="product">Product</label><span id="product">XXXX</span>
                    <label for="dimensions">Dimensions</label><span id="dimensions">XXXX</span>
                    <label for="price">Price</label><span id="price">XXXX</span>
                </div>
            </div>

  4. #4
    Thanks for the response Troy,

    I'll give this a go tomorrow,

    Thanks again!

  5. #5
    tr0y's Avatar
    Join Date
    Jul 2008
    Location
    Seattle, Wa
    Posts
    174
    Just occurred to me... are you going to need to have more than one product displayed on a single page? If so, that is not quite going to work. I would adjust it:

    HTML Code:
            
            <div class="item">
                <div class="img"></div> 
                <div class="details">
                    <span class="label">Product</span><span class="details">XXXX</span>
                    <span class="label">Dimensions</span><span class="details">XXXX</span>
                    <span class="label">Price</span><span class="details">XXXX</span>
                </div>
            </div>
            

  6. #6
    tr0y's Avatar
    Join Date
    Jul 2008
    Location
    Seattle, Wa
    Posts
    174
    ADS NOT VISIBLE TO MEMBERS
    for some reason, the "br" tags are not coming through on the code editor... add a "br" after each of the first two "details" spans.

Similar Threads

  1. Product, Package visulization templates
    By onesummer in forum Graphic Design and Web Design Help
    Replies: 6
    Last Post: 14-07-2009, 05:07 PM
  2. Centrereed Integrated Product Site Re-Design
    By Toon in forum Web Design Forum Showcase
    Replies: 11
    Last Post: 23-09-2007, 10:10 AM
  3. 360 degree product view
    By 3DProf4online in forum Graphic Design Techniques
    Replies: 1
    Last Post: 28-05-2007, 01:17 PM
  4. 360 degree product view
    By 3DProf4online in forum Web Design Forum Showcase
    Replies: 0
    Last Post: 28-05-2007, 01:13 PM

Posting Permissions

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

Log in

Log in