MobileRead Forums - View Single Post

capidamonte · 08-18-2010, 04:46 AM

I helped Hitch a bit with this, privately. We ended up with something like the following:

Spoiler:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Book Title</title>
<style type="text/css">

.OtherBooksHeader {
clear: both;
text-align: center;
}

div.row {
clear: both;
}

div.cell {
display: inline;
width: 33%;
margin: 0 0 3%;
float: left;
}

div.cell img {
height: 102px;
display: block;
margin-right: auto;
margin-left: auto;
}

div.cell h3 {
margin-top: 1%;
margin-left: 20%;
margin-right: 20%;
font-style:italic;
text-align: center;
}

</style>
</head>

<body>
<h1 class="OtherBooksHeader">Other Titles by This Author</h1>

<h2 class="OtherBooksHeader">Picture Books (in Alphabetical Order):</h2>

<div class="row">
	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book1.gif" /></a>
	<h3>Book One Title</h3>
	</div>

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book2.gif" /></a>
	<h3>Book Two Title</h3>
	</div>

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book3.gif" /></a>
	<h3>Book Three Title</h3>
	</div>

</div>

<div class="row">

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book4.gif" /></a>
	<h3>Book Four Title</h3>
	</div>

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book5.gif" /></a>
	<h3>Book Five Title</h3>
	</div>

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book6.gif" /></a>
	<h3>Book Six Title</h3>
	</div>

</div>

<div class="row">

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book7.gif" /></a>
	<h3>Book Seven Title</h3>
	</div>

</div>

<h2 class="OtherBooksHeader">Board Books (Ages 1-3):</h2>

<div class="row">

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book8.gif" /></a>
	<h3>Book Eight Title</h3>
	</div>

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book9.gif" /></a>
	<h3>Book Nine Title</h3>
	</div>

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book10.gif" /></a>
	<h3>Book Ten Title</h3>
	</div>

</div>

<div class="row">

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book11.gif" /></a>
	<h3>Book Eleven Title</h3>
	</div>

</div>

<h2 class="OtherBooksHeader">Read-Along Flip Over Books:</h2>

<div class="row">

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book11.gif" /></a>
	<h3>Book Eleven Title</h3>
	</div>

	<div class="cell"><a href="http://www.authorwebsite.com">
	<img alt="" src="../Images/book12.gif" /></a>
	<h3>Book Twelve Title</h3>
	</div>

</div>

</body>
</html>

Which is pretty flexible: you can change the number of items in each row DIV and adjust the percentage size of the contained cell DIVs to match. One nice effect is that fewer cells in a row line up properly in the column. It also resizes nicely so that it fits well on different screen sizes. The only arbitrary choice was the img height in pixels.

Hitch needed the H3 tags for import into Sigil -- you can (and probably should) replace them with P tags.

Thanks to charleski for the basic idea and the suggestion for {clear:both}. Hopefully someone else can make use of it, too.