Vfrdtyky

I'm currently working on some web coursework and as you'll notice I lack experience in web development. Basically I'm trying to create tables that hold products for a shop, however I want to use div tree's for the most part and if necessary forms for the text.

Essentially I want each independent table to hold an image, a description and eventually other data implemented with JS (I don't need help with this.. yet ^^). Hopefully you'll see what I'm trying to do from the code;

        <div id="items">

            <div id="item1" class="items">

                <img src="img/products/robot1.jpg"/>

            </div>

            <div id="item2" class="items">

                <img src="img/products/robot2.jpg"/>

            </div>

            <div id="item3" class="items">

                <img src="img/products/robot3.jpg"/>

            </div>

        </div>





#content {

width: 600px;

padding-top: 10px;

padding-bottom: 30px;

margin-left: auto;

            margin-right: auto;

        }



.items{

    display:inline; 

}



#items {

    padding-top:10px;

}



#items img{

    border: 1px solid rgba(207, 207, 207, .7);

    border-radius:20px;

}

The div's are parented by the 'content' container which is 600px wide, each table would have to be roughly 193px wide to fit three "products" on a row taking margins into consideration.

I drew a quick picture to represent exactly what I'm aiming for (the 'button' represents the 'add to basket' feature).

Unfortunately I can't use any frameworks such as jquery for the task so I'm stuck doing things the hard way. Apologies in advance for my lack of experience but hopefully you can put me in the right direction.

Edit: Using div's is just a preference, if it would be easier to use standalone forms I wouldn't mind.

Maybe this will point you in the right direction.

HTML:

<div id="content" class="clearfix">

        <div id="items">

            <div id="item1" class="items">

                <img src="img/products/robot1.jpg"/>

                <a href="" class="add-basket">Add</a>

            </div>

            <div id="item2" class="items">

                <img src="img/products/robot2.jpg"/>

                <a href="" class="add-basket">Add</a>

            </div>

            <div id="item3" class="items">

                <img src="img/products/robot3.jpg"/>

                <a href="" class="add-basket">Add</a>

            </div>

        </div>

</div>

CSS:

.clearfix { *zoom: 1; }

.clearfix:before, .clearfix:after { content: ""; display: table; }

.clearfix:after { clear: both; }



#content {

width: 600px;

padding-top: 10px;

padding-bottom: 30px;

margin-left: auto;

margin-right: auto;

background:red;

}



.items{

    float:left; 

    width:193px;

    min-height:100px;

    border:1px solid black;

    position:relative;

}



.items a.add-basket {

    position:absolute;

    bottom:0;

    right:0;

    background:black;

    color:#fff;

}



#item1 { margin-right:7px; }

#item2 { margin-right:7px; }



#items {

    padding-top:10px;

}



#items img {

    border: 1px solid rgba(207, 207, 207, .7);

    border-radius:20px;

}

http://jsfiddle.net/DNS8P/1/

Here's a FIDDLE by the image you provide.

<div id="content">

  <h1>Products</h1>

  <div id="items">

    <div id="item1" class="items">

      <img src="img/products/robot1.jpg"/>

      <span class="desc">Description</span>

      <span class="price">$100</span>

      <span class="other">Other</span>

      <button>BUY</button>      

    </div>

    <div id="item2" class="items">

      <img src="img/products/robot2.jpg"/>

      <span class="desc">Description</span>

      <span class="price">$100</span>

      <span class="other">Other</span>

      <button>BUY</button>

    </div>

    <div id="item3" class="items">

      <img src="img/products/robot3.jpg"/>

      <span class="desc">Description</span>

      <span class="price">$100</span>

      <span class="other">Other</span>

      <button>BUY</button>      

    </div>

  </div>

</div>





#content {

  width: 600px;

  padding: 10px 10px 30px 10px;

  margin: 30px auto;

  text-align: center;

  border: 1px solid #999;

}



#items {

  padding-top:10px;

}



.items{

  display: inline-block;

  text-align: center;

  width: 180px;

  margin: 0 7px 0 7px;

  padding-top: 10px;

  border: 1px solid #999;

  border-radius: 20px;

}



.items img {

  width: 160px;

  height: 140px;

  border: 1px solid rgba(207, 207, 207, .7);

}



.items button {

  background: #666;

  width: 80px;

  height: 26px;

  float: right;

  border-top: 1px solid #999;

  border-left: 1px solid #999;

  border-right: none;

  border-bottom: none;

  outline: none;

  cursor: pointer;

  border-bottom-right-radius: 20px;

  transition: background 0.2s ease-in;

}



.items button:hover {

  background: #888;



}



.desc,

.price,

.other {

  display: block;

  margin-bottom: 10px;

}