Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Aug 6, 2013, 05:05 PM   #1
notsogood
macrumors newbie
 
Join Date: Aug 2013
Can someone help with the HTML?

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/Sea...chfield=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.
notsogood is offline   0 Reply With Quote
Old Aug 7, 2013, 06:14 AM   #2
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by notsogood View Post
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/Sea...chfield=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

__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   1 Reply With Quote
Old Aug 7, 2013, 11:37 AM   #3
notsogood
Thread Starter
macrumors newbie
 
Join Date: Aug 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!
notsogood is offline   0 Reply With Quote
Old Aug 7, 2013, 04:15 PM   #4
eattherich
macrumors 6502
 
Join Date: Jul 2011
Location: Berlin
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!
eattherich is offline   1 Reply With Quote
Old Aug 12, 2013, 06:06 PM   #5
notsogood
Thread Starter
macrumors newbie
 
Join Date: Aug 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.
notsogood is offline   0 Reply With Quote
Old Aug 12, 2013, 07:31 PM   #6
mpainesyd
macrumors member
 
Join Date: Nov 2008
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
mpainesyd is offline   0 Reply With Quote
Old Aug 12, 2013, 07:43 PM   #7
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by mpainesyd View Post
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.

__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   2 Reply With Quote
Old Aug 30, 2013, 01:39 PM   #8
notsogood
Thread Starter
macrumors newbie
 
Join Date: Aug 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/Sea...chfield=Author

I look forward to hearing from you.
notsogood is offline   0 Reply With Quote
Old Aug 30, 2013, 04:32 PM   #9
Ap0ks
macrumors regular
 
Join Date: Aug 2008
Location: Cambridge, UK
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;
}
Ap0ks is offline   0 Reply With Quote
Old Aug 30, 2013, 06:53 PM   #10
notsogood
Thread Starter
macrumors newbie
 
Join Date: Aug 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 &nbsp; <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 &nbsp; <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 &nbsp; <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>
notsogood is offline   0 Reply With Quote
Old Aug 31, 2013, 08:08 AM   #11
Ap0ks
macrumors regular
 
Join Date: Aug 2008
Location: Cambridge, UK
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>&nbsp;
    			<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 &nbsp;</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 &amp; N</a>&nbsp;
    			<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>&nbsp;
    			<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 &nbsp;</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 &amp; N</a>&nbsp;
    			<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>&nbsp;
    			<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 &nbsp;</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 &amp; N</a>&nbsp;
    			<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>&nbsp;
    			<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 &nbsp;</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 &amp; N</a>&nbsp;
    			<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>&nbsp;
    			<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 &nbsp;</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 &amp; N</a>&nbsp;
    			<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>&nbsp;
    			<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 &nbsp;</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 &amp; N</a>&nbsp;
    			<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>&nbsp;
    			<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 &nbsp;</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 &amp; N</a>&nbsp;
    			<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>&nbsp;
    			<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 &nbsp;</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 &amp; N</a>&nbsp;
    			<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>&nbsp;
    			<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 &nbsp;</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 &amp; N</a>&nbsp;
    			<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>
Ap0ks is offline   0 Reply With Quote
Old Sep 13, 2013, 06:18 AM   #12
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by Ap0ks View Post
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:

Quote:
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.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Sep 13, 2013, 05:43 PM   #13
Ap0ks
macrumors regular
 
Join Date: Aug 2008
Location: Cambridge, UK
Quote:
Originally Posted by SrWebDeveloper View Post
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.
Ap0ks is offline   0 Reply With Quote
Old Sep 14, 2013, 08:06 AM   #14
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by Ap0ks View Post
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.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
iPhone: Help with HTML lockscreen eddyecb Jailbreaks and iOS Hacks 19 Apr 10, 2013 02:32 PM
iPhone: Help with HTML Wallpaper everydayghost Jailbreaks and iOS Hacks 0 Mar 20, 2013 01:02 AM
html problem terra Mac Basics and Help 5 Feb 23, 2013 04:21 AM
HTML in my e-mail Connie9238 Mac Basics and Help 3 Jan 12, 2013 02:32 PM
HTML Editor kathryne_B Community Discussion 7 Jun 7, 2012 02:31 AM

Forum Jump

All times are GMT -5. The time now is 01:18 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC