Solved

8 pictures

Posted on 2011-09-12
2
160 Views
Last Modified: 2012-05-12
this code has 2 rows of 1 column


want 2 rows of 4 columns

so I want eight camera pictures



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style> 
#product {
behavior: url(border-radius.htc);
margin:5px 15%;
border-radius: 5px 15px 15px 15px;
-moz-border-radius:5px 15px 15px 15px;
-webkit-border-radius:5px 15px 15px 15px;
border:1px solid #999;
background: white;



  width:140px;
  height:190px;
}


#product .title{
  color:#06C;
  font-weight:bold;
  text-align:center;
  margin:3px;
}
#product img{
  margin:5px 15%;
}
#product .price{
  text-align:center;
  margin-top:10px;
  color:#06C;  
}
</style>

</head>

<body>

<div id="product">
  <div class="title">Camera</div>
  <img src="canon-550d.gif" alt="Camera" />
  <div class="price">$300</div>
</div>
<div id="product">
  <div class="title">Camera</div>
  <img src="canon-550d.gif" alt="Camera" />
  <div class="price">$300</div>
</div>


</body>
</html>

Open in new window

0
Comment
Question by:rgb192
2 Comments
 
LVL 16

Accepted Solution

by:
SSupreme earned 500 total points
ID: 36525961
Try this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style> 
#product {
float:left;
behavior: url(border-radius.htc);
margin:5px 5px;
border-radius: 5px 15px 15px 15px;
-moz-border-radius:5px 15px 15px 15px;
-webkit-border-radius:5px 15px 15px 15px;
border:1px solid #999;
background: white;
width:140px;
height:190px;
}

#product .title{
  color:#06C;
  font-weight:bold;
  text-align:center;
  margin:3px;
}
#product img{
  margin:5px 15%;
}
#product .price{
  text-align:center;
  margin-top:10px;
  color:#06C;  
}
#wrap {width: 610px; margin: 0 auto;}
</style>

</head>

<body>
<div id="wrap">
<div id="product">
  <div class="title">Camera</div>
  <img src="canon-550d.gif" alt="Camera" />
  <div class="price">$300</div>
</div>
<div id="product">
  <div class="title">Camera</div>
  <img src="canon-550d.gif" alt="Camera" />
  <div class="price">$300</div>
</div>
<div id="product">
  <div class="title">Camera</div>
  <img src="canon-550d.gif" alt="Camera" />
  <div class="price">$300</div>
</div>
<div id="product">
  <div class="title">Camera</div>
  <img src="canon-550d.gif" alt="Camera" />
  <div class="price">$300</div>
</div>
<div id="product">
  <div class="title">Camera</div>
  <img src="canon-550d.gif" alt="Camera" />
  <div class="price">$300</div>
</div>
<div id="product">
  <div class="title">Camera</div>
  <img src="canon-550d.gif" alt="Camera" />
  <div class="price">$300</div>
</div>
<div id="product">
  <div class="title">Camera</div>
  <img src="canon-550d.gif" alt="Camera" />
  <div class="price">$300</div>
</div>
<div id="product">
  <div class="title">Camera</div>
  <img src="canon-550d.gif" alt="Camera" />
  <div class="price">$300</div>
</div>
</div>

</body>
</html>

Open in new window

0
 

Author Closing Comment

by:rgb192
ID: 36526733
works thanks
0

Featured Post

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question