Can someone help with the HTML?

notsogood · Aug 6, 2013

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.

SrWebDeveloper · Aug 7, 2013

notsogood said:
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

notsogood · Aug 7, 2013

Thank you!

Dear SrWebDeveloper,

Thank you so much for taking the time to answer my post. I truly appreciate this.
I've been searching online, bookmarking sites that I deemed helpful. So far, I've learned the tags and well, the very basics. Having said that, I am really enjoying figuring out codes. Very challenging.
Anyway, thank you. I will tweak and study the codes that you posted.

Have a happy summer!

Hakiroto · Aug 7, 2013

Have a look at Codecademy. The Web Fundamentals course could be worth looking at if you're new to HTML and CSS. It's free, by the way. If you get stuck with things then ask away on here. There are lots of us willing to help you along the way. Good luck!

notsogood · Aug 12, 2013

Hello, I finally able to work on the codes that SrWebDeveloper posted. Thank you so much. It took me this long to come up with this image but it's worth it.

I still couldn't figure out the hover thing. The price codes worked but the length is too short and couldn't make it to look like the Amazon box.

I used <br> so the amazon, kobo etc are not touching each other. Is it possible to make them kind of close together?

Also, I would like to have three columns and # of rows. I played around it and am still trying, but I thought before I lost my mind that I should ask for your help again. Thank you again.

mpainesyd · Aug 12, 2013

For some really basic tips on using HTML see this page that I created in 1998:
http://users.tpg.com.au/aoaug/how_html.html

If you can post some useful links to other articles I will add them to that ancient page

SrWebDeveloper · Aug 12, 2013

mpainesyd said:
For some really basic tips on using HTML see this page that I created in 1998:
http://users.tpg.com.au/aoaug/how_html.html

If you can post some useful links to other articles I will add them to that ancient page

I'm sorry to say this, but it's time to gracefully deprecate your page from 1998. The best practices of today involve clear separation of content from style. This means font tags, italic, bold, etc. should be replaced by CSS for styling purposes. Since this OP is new to HTML let's set them off on the right course and follow modern standards when possible. That's why I posted HTML and CSS in the manner I did. I appreciate your intent, honest I do.

Cheers.

notsogood · Aug 30, 2013

three columns

Finally, I am able to figure out the hover part. I can use that html feature on my product description. Now, I face the most challenging part. I tried everything but none work so far. How can I make a three column so my page would look like this: http://store.kobobooks.com/en-US/Search?query=Tierney O'Malley&fcsearchfield=Author

I look forward to hearing from you.

Ap0ks · Aug 30, 2013

Cor blimey, the books at that link are a bit saucy

You could try some of the techniques shown here -> Sitepoint Article to help you build a grid of boxes using CSS.

For example the below html/css code should give you a simple 3x3 table layout in which to place your individual book items:

Code:

<div class="book-table">
  <ul id="row1">
    <li><div class="book-container">Content Here</li>
    <li><div class="book-container">Content Here</li>
    <li><div class="book-container">Content Here</li>
  </ul>
  <ul id="row2">
    <li><div class="book-container">Content Here</li>
    <li><div class="book-container">Content Here</li>
    <li><div class="book-container">Content Here</li>
  </ul>
  <ul id="row3">
    <li><div class="book-container">Content Here</li>
    <li><div class="book-container">Content Here</li>
    <li><div class="book-container">Content Here</li>
  </ul>
</div>

Code:

.book-table > ul {
	display: table;
}

.book-table > ul > li {
	display: table-cell;
}

.book-container {
	margin: 0 10px 0 10px;
	padding: 5px;
	border: 1px solid #333;
}

notsogood · Aug 30, 2013

Hello, Ap0ks;

Thank you so much for your reply.

Below is the code that I've been working on. (Thanks to SrWebDeveloper for showing me this) The image is posted on my previous post.

About the codes for the columns, I am really lost as to where your code should be placed. I tried adding the codes but kept getting an error message. I fear I'm living up to my name notsogood. *smacking forehead.*

I look forward to hearing from you.

<html>
<head>

<style type="text/css">a {text-decoration: none}</style>

<title>Passionate Bid</title>
<style>
div.product_container {
width: 196px;
height: 358px;
background-color: #D23D53;
margin: 10px;
padding: 10px;
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: 246px;
border: none;
margin: 0;
padding: 0;
}

div.product_image a:hover {
background-color: #C0C0C0;
}

div.product_description {
font: normal 13px Arial, Helvetica, sans-serif;
color: black;
width: 176px;
border: none;
margin: 0;
padding: 0;
text-align: center;
vertical-align: center;

background-color: #F5F1F2;
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_description a:hover {
background-color: #C0C0C0;
}

div.product_price a {
font: normal 13px Arial, Helvetica, sans-serif;
color: black;
width: 176px;
border: none;
margin: 0;
padding: 0;
text-align: center;
vertical-align: center;

background-color: #F5F1F2;
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>

</head>
<body>
<div class="product_container">
<div class="product_image"><img src="http://i453.photobucket.com/albums/qq257/TierneyO/PassionateBid400x600.jpg" alt="Product Image" /></div>
<br>

<div class="product_image"><a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0" </a></div>

<div class="product_description"><a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0" title="Amazon">Amazon <a href="https://www.allromanceebooks.com/product-passionatebid-857315-149.html" title="ARE">ARE</div></a><br>

<div class="product_description"><a href="http://store.kobobooks.com/en-US/Search?query=Tierney%20O%27Malley&fcsearchfield=Author" title="KOBO">KOBO <a href="https://itunes.apple.com/gb/artist/tierney-omalley/id406440413?mt=11" title="iBookstore">iBookstore</div></a><br>

<div class="product_description"><a href="http://www.barnesandnoble.com/w/passionate-bid-tierney-omalley/1022917461?ean=2940014664806" title="B & N">B & N <a href="http://www.coffeetimeromance.com/BookStore/pubs_product_book_info/by-genre-erotic-c-3_5/passionate-bid-p-7920" title="Coffeetime">Coffeetime Romance</div></a><br>

</div>
</body>
</html></br>

Ap0ks · Aug 31, 2013

The CSS code in my post should just be added to the bottom of your CSS code, around line 86 (line numbers are really helpful in editors).

As for the HTML, basically copy the code I provided and paste it just after the <body> tag (around line 105) and above your existing code. If you preview the page now you should see a 3x3 grid and then your existing work. All you need to do now is move your work into the grid, so copy the product_container div and everything inside it and paste it into the first grid position (replace the first instance of the text "Content Here")

Below is a working copy with a few bits tidied up and here are a few notes to help you out:
- Make sure you nest tags correctly, your bookstore links don't nest correctly you have <div><a>Amazon<a>ARE</a></div></a> (simplified) the last </a> should be inside the </div> and the first </a> should be before you create the ARE link.
- If you want an image to link you need to wrap the image in <a> tags. You can remove the second product_image <div> and simply wrap the link around the <img> in the first product_image <div>.
- The hover effect was being applied to links within the product_description changing this to product_container:hover allows you to change the background while hovering over any part of the container.
- To distance the links without having to use <br> tags you can add to the margin of the product_description, I've added 10px to the top and bottom as an example.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Passionate Bid</title> 
<style type="text/css">
a {
	text-decoration: none
}

div.product_container {
	width: 196px;
	height: 358px;
	background-color: #D23D53;
	margin: 10px;
	padding: 10px;
	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: 246px;
	border: none;
	margin: 0;
	padding: 0;
}

div.product_container:hover {
	background-color: #C0C0C0;
}

div.product_description {
	font: normal 13px Arial, Helvetica, sans-serif;
	color: black;
	width: 176px;
	border: none;
	margin: 10px 0 10px 0px;
	padding: 0;
	text-align: center;
	vertical-align: center;
	background-color: #F5F1F2;
	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_description a:hover {
	background-color: #C0C0C0;
}

div.product_price a {
	font: normal 13px Arial, Helvetica, sans-serif;
	color: black;
	width: 176px;
	border: none;
	margin: 0;
	padding: 0;
	text-align: center;
	vertical-align: center;
	background-color: #F5F1F2;
	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;
}

.book-table > ul {
	display: table;
}

.book-table > ul > li {
	display: table-cell;
}

.book-container {
	margin: 0 10px 0 10px;
	padding: 5px;
	border: 0px solid #333;
}
</style>
</head>

<body>
<div class="book-table">
  <ul id="row1">
    <li><div class="book-container">
    	<div class="product_container">
    		<div class="product_image">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0">
    				<img src="http://i453.photobucket.com/albums/qq257/TierneyO/PassionateBid400x600.jpg" alt="Product Image" />
    			</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0" title="Amazon">Amazon</a> 
    			<a href="https://www.allromanceebooks.com/product-passionatebid-857315-149.html" title="ARE">ARE</a>
    		</div>
    		<div class="product_description">
    			<a href="http://store.kobobooks.com/en-US/Search?query=Tierney%20O%27Malley&fcsearchfield=Author" title="KOBO">KOBO  </a>
    			<a href="https://itunes.apple.com/gb/artist/tierney-omalley/id406440413?mt=11" title="iBookstore">iBookstore</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.barnesandnoble.com/w/passionate-bid-tierney-omalley/1022917461?ean=2940014664806" title="B & N">B & N</a> 
    			<a href="http://www.coffeetimeromance.com/BookStore/pubs_product_book_info/by-genre-erotic-c-3_5/passionate-bid-p-7920" title="Coffeetime">Coffeetime Romance</a>
    		</div>
    	</div>
    </li>
    <li><div class="book-container">
    	<div class="product_container">
    		<div class="product_image">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0">
    				<img src="http://i453.photobucket.com/albums/qq257/TierneyO/PassionateBid400x600.jpg" alt="Product Image" />
    			</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0" title="Amazon">Amazon</a> 
    			<a href="https://www.allromanceebooks.com/product-passionatebid-857315-149.html" title="ARE">ARE</a>
    		</div>
    		<div class="product_description">
    			<a href="http://store.kobobooks.com/en-US/Search?query=Tierney%20O%27Malley&fcsearchfield=Author" title="KOBO">KOBO  </a>
    			<a href="https://itunes.apple.com/gb/artist/tierney-omalley/id406440413?mt=11" title="iBookstore">iBookstore</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.barnesandnoble.com/w/passionate-bid-tierney-omalley/1022917461?ean=2940014664806" title="B & N">B & N</a> 
    			<a href="http://www.coffeetimeromance.com/BookStore/pubs_product_book_info/by-genre-erotic-c-3_5/passionate-bid-p-7920" title="Coffeetime">Coffeetime Romance</a>
    		</div>
    	</div>
    </li>
    <li><div class="book-container">
    	<div class="product_container">
    		<div class="product_image">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0">
    				<img src="http://i453.photobucket.com/albums/qq257/TierneyO/PassionateBid400x600.jpg" alt="Product Image" />
    			</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0" title="Amazon">Amazon</a> 
    			<a href="https://www.allromanceebooks.com/product-passionatebid-857315-149.html" title="ARE">ARE</a>
    		</div>
    		<div class="product_description">
    			<a href="http://store.kobobooks.com/en-US/Search?query=Tierney%20O%27Malley&fcsearchfield=Author" title="KOBO">KOBO  </a>
    			<a href="https://itunes.apple.com/gb/artist/tierney-omalley/id406440413?mt=11" title="iBookstore">iBookstore</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.barnesandnoble.com/w/passionate-bid-tierney-omalley/1022917461?ean=2940014664806" title="B & N">B & N</a> 
    			<a href="http://www.coffeetimeromance.com/BookStore/pubs_product_book_info/by-genre-erotic-c-3_5/passionate-bid-p-7920" title="Coffeetime">Coffeetime Romance</a>
    		</div>
    	</div>
    </li>
  </ul>
  <ul id="row2">
    <li><div class="book-container">
    	<div class="product_container">
    		<div class="product_image">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0">
    				<img src="http://i453.photobucket.com/albums/qq257/TierneyO/PassionateBid400x600.jpg" alt="Product Image" />
    			</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0" title="Amazon">Amazon</a> 
    			<a href="https://www.allromanceebooks.com/product-passionatebid-857315-149.html" title="ARE">ARE</a>
    		</div>
    		<div class="product_description">
    			<a href="http://store.kobobooks.com/en-US/Search?query=Tierney%20O%27Malley&fcsearchfield=Author" title="KOBO">KOBO  </a>
    			<a href="https://itunes.apple.com/gb/artist/tierney-omalley/id406440413?mt=11" title="iBookstore">iBookstore</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.barnesandnoble.com/w/passionate-bid-tierney-omalley/1022917461?ean=2940014664806" title="B & N">B & N</a> 
    			<a href="http://www.coffeetimeromance.com/BookStore/pubs_product_book_info/by-genre-erotic-c-3_5/passionate-bid-p-7920" title="Coffeetime">Coffeetime Romance</a>
    		</div>
    	</div>
    </li>
    <li><div class="book-container">
    	<div class="product_container">
    		<div class="product_image">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0">
    				<img src="http://i453.photobucket.com/albums/qq257/TierneyO/PassionateBid400x600.jpg" alt="Product Image" />
    			</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0" title="Amazon">Amazon</a> 
    			<a href="https://www.allromanceebooks.com/product-passionatebid-857315-149.html" title="ARE">ARE</a>
    		</div>
    		<div class="product_description">
    			<a href="http://store.kobobooks.com/en-US/Search?query=Tierney%20O%27Malley&fcsearchfield=Author" title="KOBO">KOBO  </a>
    			<a href="https://itunes.apple.com/gb/artist/tierney-omalley/id406440413?mt=11" title="iBookstore">iBookstore</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.barnesandnoble.com/w/passionate-bid-tierney-omalley/1022917461?ean=2940014664806" title="B & N">B & N</a> 
    			<a href="http://www.coffeetimeromance.com/BookStore/pubs_product_book_info/by-genre-erotic-c-3_5/passionate-bid-p-7920" title="Coffeetime">Coffeetime Romance</a>
    		</div>
    	</div>
    </li>
    <li><div class="book-container">
    	<div class="product_container">
    		<div class="product_image">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0">
    				<img src="http://i453.photobucket.com/albums/qq257/TierneyO/PassionateBid400x600.jpg" alt="Product Image" />
    			</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0" title="Amazon">Amazon</a> 
    			<a href="https://www.allromanceebooks.com/product-passionatebid-857315-149.html" title="ARE">ARE</a>
    		</div>
    		<div class="product_description">
    			<a href="http://store.kobobooks.com/en-US/Search?query=Tierney%20O%27Malley&fcsearchfield=Author" title="KOBO">KOBO  </a>
    			<a href="https://itunes.apple.com/gb/artist/tierney-omalley/id406440413?mt=11" title="iBookstore">iBookstore</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.barnesandnoble.com/w/passionate-bid-tierney-omalley/1022917461?ean=2940014664806" title="B & N">B & N</a> 
    			<a href="http://www.coffeetimeromance.com/BookStore/pubs_product_book_info/by-genre-erotic-c-3_5/passionate-bid-p-7920" title="Coffeetime">Coffeetime Romance</a>
    		</div>
    	</div>
    </li>
  </ul>
  <ul id="row3">
    <li><div class="book-container">
    	<div class="product_container">
    		<div class="product_image">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0">
    				<img src="http://i453.photobucket.com/albums/qq257/TierneyO/PassionateBid400x600.jpg" alt="Product Image" />
    			</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0" title="Amazon">Amazon</a> 
    			<a href="https://www.allromanceebooks.com/product-passionatebid-857315-149.html" title="ARE">ARE</a>
    		</div>
    		<div class="product_description">
    			<a href="http://store.kobobooks.com/en-US/Search?query=Tierney%20O%27Malley&fcsearchfield=Author" title="KOBO">KOBO  </a>
    			<a href="https://itunes.apple.com/gb/artist/tierney-omalley/id406440413?mt=11" title="iBookstore">iBookstore</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.barnesandnoble.com/w/passionate-bid-tierney-omalley/1022917461?ean=2940014664806" title="B & N">B & N</a> 
    			<a href="http://www.coffeetimeromance.com/BookStore/pubs_product_book_info/by-genre-erotic-c-3_5/passionate-bid-p-7920" title="Coffeetime">Coffeetime Romance</a>
    		</div>
    	</div>
    </li>
    <li><div class="book-container">
    	<div class="product_container">
    		<div class="product_image">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0">
    				<img src="http://i453.photobucket.com/albums/qq257/TierneyO/PassionateBid400x600.jpg" alt="Product Image" />
    			</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0" title="Amazon">Amazon</a> 
    			<a href="https://www.allromanceebooks.com/product-passionatebid-857315-149.html" title="ARE">ARE</a>
    		</div>
    		<div class="product_description">
    			<a href="http://store.kobobooks.com/en-US/Search?query=Tierney%20O%27Malley&fcsearchfield=Author" title="KOBO">KOBO  </a>
    			<a href="https://itunes.apple.com/gb/artist/tierney-omalley/id406440413?mt=11" title="iBookstore">iBookstore</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.barnesandnoble.com/w/passionate-bid-tierney-omalley/1022917461?ean=2940014664806" title="B & N">B & N</a> 
    			<a href="http://www.coffeetimeromance.com/BookStore/pubs_product_book_info/by-genre-erotic-c-3_5/passionate-bid-p-7920" title="Coffeetime">Coffeetime Romance</a>
    		</div>
    	</div>
    </li>
    <li><div class="book-container">
    	<div class="product_container">
    		<div class="product_image">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0">
    				<img src="http://i453.photobucket.com/albums/qq257/TierneyO/PassionateBid400x600.jpg" alt="Product Image" />
    			</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.amazon.com/Passionate-Bid-Blue-Eyed-Four-Series/dp/1614957320/ref=tmm_pap_title_0" title="Amazon">Amazon</a> 
    			<a href="https://www.allromanceebooks.com/product-passionatebid-857315-149.html" title="ARE">ARE</a>
    		</div>
    		<div class="product_description">
    			<a href="http://store.kobobooks.com/en-US/Search?query=Tierney%20O%27Malley&fcsearchfield=Author" title="KOBO">KOBO  </a>
    			<a href="https://itunes.apple.com/gb/artist/tierney-omalley/id406440413?mt=11" title="iBookstore">iBookstore</a>
    		</div>
    		<div class="product_description">
    			<a href="http://www.barnesandnoble.com/w/passionate-bid-tierney-omalley/1022917461?ean=2940014664806" title="B & N">B & N</a> 
    			<a href="http://www.coffeetimeromance.com/BookStore/pubs_product_book_info/by-genre-erotic-c-3_5/passionate-bid-p-7920" title="Coffeetime">Coffeetime Romance</a>
    		</div>
    	</div>
    </li>
  </ul>
</div>
</body>
</html>

SrWebDeveloper · Sep 13, 2013

Ap0ks said:

Code:

.book-table > ul {
	display: table;
}

.book-table > ul > li {
	display: table-cell;
}

.book-container {
	margin: 0 10px 0 10px;
	padding: 5px;
	border: 1px solid #333;
}

Careful there, as per the W3C:

Note: The values "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" are not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.

I really liked the UL/LI being used in the way you did, that's actually a common technique for CSS menu drop downs and accordions, etc. But consider using float and clear and parent containers using cross-browser compatible CSS to do alignments like that and leave tables in any form for tabular data only.

Ap0ks · Sep 13, 2013

SrWebDeveloper said:
leave tables in any form for tabular data only.

It's a table of containers

As for the W3C guidelines, I just gave some code that does the job asked by the OP. If they do want to support older versions of IE then they would need to investigate an alternative. I myself wouldn't cater for IE7 or earlier since I believe it to be too old to be useful, anyone running XP can upgrade to IE8 which does support CSS table layout.

CSS table layout is great for creating grids quickly and efficiently especially where you need uniform margins/padding or alignment.

SrWebDeveloper · Sep 14, 2013

Ap0ks said:
It's a table of containers

As for the W3C guidelines, I just gave some code that does the job asked by the OP. If they do want to support older versions of IE then they would need to investigate an alternative. I myself wouldn't cater for IE7 or earlier since I believe it to be too old to be useful, anyone running XP can upgrade to IE8 which does support CSS table layout.

CSS table layout is great for creating grids quickly and efficiently especially where you need uniform margins/padding or alignment.

I understand, honest, I do. But it would be reckless of me not to at least mention (based on my experiences) that IE7 is still a very prevalent browser in government and education, and other IT departments with limited budgets. IE6 is most certainly is a fossil of the past in terms of expectations of support by a developer based on any modern SLA. I am just adding some words of wisdom for those following this, not directed only to you -- I am fully aware and accept we all have different clients and needs. Thanks for explaining and allowing me this one rebuttal.

Search

Search

Can someone help with the HTML?

notsogood

macrumors newbie

SrWebDeveloper

macrumors 68000

notsogood

macrumors newbie

Hakiroto

macrumors 6502a

notsogood

macrumors newbie

mpainesyd

macrumors 6502a

SrWebDeveloper

macrumors 68000

notsogood

macrumors newbie

Ap0ks

macrumors 6502

notsogood

macrumors newbie

Ap0ks

macrumors 6502

SrWebDeveloper

macrumors 68000

Ap0ks

macrumors 6502

SrWebDeveloper

macrumors 68000

Our Staff