Thread: CSS Newbie

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Posts
    2
    Rep Power
    0

    CSS Newbie


    Hi,

    I want to display some products on a web page. Anyone know how I can display the products (image & text) in a nice looking box?

    Thanks
    CF
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    446
    "Nice looking" is relative. It really depends on what your content is, how you want it laid out, and what is "nice looking" to you. If you want to give some more specifics on what you want, what you've tried, or even another site that does what you want, we might be able to offer a little more help.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Posts
    2
    Rep Power
    0
    Hi,

    I get a message We are sorry, new user accounts are not permitted to create posts containing URLs.

    thanks for your reply the following page shows 12 products, 4 in a row

    Test site

    <div class="grid_3"><a href="#" title="Click for more information"><img src="home-images/img01.jpg" border="0" valign="top"></a><br /><h3>Mitex General</h3>Compact, ‘connected’ digital radio with touchscreen interface and docking for iPod and iPhone.<br /><br /></div>
    <div class="grid_3"><a href="#" title="Click for more information"><img src="home-images/img02.jpg" border="0" valign="top"></a><br /><h3>Stabo Twelve Pack</h3>Compact, ‘connected’ digital radio with touchscreen interface and docking for iPod and iPhone.<br /><br /></div>
    <div class="grid_3"><a href="#" title="Click for more information"><img src="home-images/img03.jpg" border="0" valign="top"></a><br /><h3>Nocturne XP2</h3>Compact, ‘connected’ digital radio with touchscreen interface and docking for iPod and iPhone.<br /><br /></div>
    <div class="grid_3"><a href="#" title="Click for more information"><img src="home-images/img04.jpg" border="0" valign="top"></a><br /><h3>Revo Domino</h3>Compact, ‘connected’ digital radio with touchscreen interface and docking for iPod and iPhone.<br /><br /></div>
    <div class="clear toppad"></div>
    <div class="grid_3"><a href="#" title="Click for more information"><img src="home-images/img05.jpg" border="0" valign="top"></a><br /><h3>Amplicom 5010</h3>Compact, ‘connected’ digital radio with touchscreen interface and docking for iPod and iPhone.<br /><br /></div>
    <div class="grid_3"><a href="#" title="Click for more information"><img src="home-images/img06.jpg" border="0" valign="top"></a><br /><h3>Amplicom 680</h3>Compact, ‘connected’ digital radio with touchscreen interface and docking for iPod and iPhone.<br /><br /></div>
    <div class="grid_3"><a href="#" title="Click for more information"><img src="home-images/img07.jpg" border="0" valign="top"></a><br /><h3>Mitex Security</h3>Compact, ‘connected’ digital radio with touchscreen interface and docking for iPod and iPhone.<br /><br /></div>
    <div class="grid_3"><a href="#" title="Click for more information"><img src="home-images/img08.jpg" border="0" valign="top"></a><br /><h3>Magicbox Photo Viewer</h3>Compact, ‘connected’ digital radio with touchscreen interface and docking for iPod and iPhone.<br /><br /></div>
    <div class="clear toppad"></div>
    <div class="grid_3"><a href="#" title="Click for more information"><img src="home-images/img09.jpg" border="0" valign="top"></a><br /><h3>Revo Pico</h3>Compact, ‘connected’ digital radio with touchscreen interface and docking for iPod and iPhone.<br /><br /></div>
    <div class="grid_3"><a href="#" title="Click for more information"><img src="home-images/img10.jpg" border="0" valign="top"></a><br /><h3>Special needs phone</h3>Compact, ‘connected’ digital radio with touchscreen interface and docking for iPod and iPhone.<br /><br /></div>
    <div class="grid_3"><a href="#" title="Click for more information"><img src="home-images/img11.jpg" border="0" valign="top"></a><br /><h3>Vtech Baby monitor</h3>Compact, ‘connected’ digital radio with touchscreen interface and docking for iPod and iPhone.<br /><br /></div>
    <div class="grid_3"><a href="#" title="Click for more information"><img src="home-images/img12.jpg" border="0" valign="top"></a><br /><h3>Olbi Headset</h3>Compact, ‘connected’ digital radio with touchscreen interface and docking for iPod and iPhone.<br /><br /></div>
  6. #4
  7. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    837
    Hi, cf1961, and welcome!

    Please read the CSS posting guidelines: now expanded with much needed stipulations.
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Dec 2004
    Posts
    3,082
    Rep Power
    381
    there are few ways:

    1. use CSS & divs to have extra empty divs on top & bottom of current divs and these divs should have a background image to how you want the outline of the box to look like..

    2. look up CSS3 as it has some nice features that you may be able to use to make the boxes look nicer than what they are now - although the support may not be there from all the browsers..

IMN logo majestic logo threadwatch logo seochat tools logo