Hi I am wondering if any of you could help me with the html. This is the only thing I know about computer and not even good at that. I want to create something like the images on this link:
http://store.kobobooks.com/en-US/Search?query=Dean Koontz&fcsearchfield=Author
You can see, the images has a border, text and buy link. Can someone tell me how to create an html for this? I found something online, but the border became bigger as I type the texts. I just want something like the images on this this link. Thank you.
Bearing in mind the site you linked has a database on the back end for storing the image, description and pricing data for each product:
HTML and CSS will accomplish your objective.
One method is to create a div container (to set size and the white margin) which contains 3 other divs (image, description, price) each styled to look like you want. In my untested example code which is intended to demo the product widget alone (not the entire page), the price is linked for simplicity.
HTML:
Code:
<div class="product_container">
<div class="product_image><img src="path/to/productImage.png" alt="Product Image" /></div>
<div class="product_description>This is a description.</div>
<div class="product_price><a href="/path/to/page.html" title="Pricing Information">$13.99</a></div>
</div>
CSS:
(Add within head tags in the page which displays the product stuff with a darker background than white, as in the example page you linked)
Code:
<style>
div.product_container {
width: 196px;
height: 286px;
background-color: white;
margin: 20px;
padding: 20px;
box-sizing: border-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
div.product_image img {
width: 176px;
height: 266px;
border: none;
margin: 0;
padding: 0;
}
div.product_description {
font: normal 13px Arial, Helvetica, sans-serif;
color: black;
width: 176px;
border: none;
margin: 0;
padding: 0;
}
div.product_price a {
text-align: center;
vertical-align: center;
font: bold 13px Arial, Helvetica, sans-serif;
color: white;
width: 176px;
border: none;
margin: 0;
padding: 0;
background-color: #04A19C;
box-sizing: border-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
div.product_price a:hover {
background-color: #03807c;
}
</style>
Up to you to edit as you see fit, using this as a starting point, to customize to your liking. Embed this within any existing HTML page using the proper html, head, body tags as you would for any page.
If unsure how to create a page, this is as basic as it gets:
Code:
<html>
<head>
<title>The title of your page</title>
.... put CSS stuff here ...
</head>
<body>
... put product widget stuff here ...
</body>
</html>
Study carefully what I did, tweak and make changes, look things up if you don't understand, it's the best way to learn.
Basic HTML/CSS tutorials if needed:
http://www.w3.org/Style/Examples/011/firstcss.en.html