View Single Post
Old 08-17-2010, 02:14 AM   #15
capidamonte
Not who you think I am...
capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!capidamonte , Klaatu Barada Niktu!
 
capidamonte's Avatar
 
Posts: 346
Karma: 5337
Join Date: Jan 2010
Location: Honolulu
Device: Sony PRS-350
Okay, here's an example...

Code:
<ul class="ImageGrid">
	<li>
		<a href="http://www.authorwebpage.com/Book_1.html">
			<img alt="Title of Book 1" src="images/book1.png" />
		</a>
		<br />
		Book 1 Caption
	</li>
	<li>
		<a href="http://www.authorwebpage.com/Book_2.html">
			<img alt="Title of Book 2" src="images/book2.png" />
		</a>
		<br />
		Book 2 Caption
	</li>
	<li>
		<a href="http://www.authorwebpage.com/Book_3.html">
			<img alt="Title of Book 3" src="images/book3.png" />
		</a>
		<br />
		Book 3 Caption
	</li>
</ul>
... with the following CSS:

Code:
/*horizontal list of images*/
ul.ImageGrid {
list-style-type:none;
float:none;
text-align: center;
margin:0;
padding:0;
border:0px solid;
}

ul.ImageGrid li {
display:inline;
}
Adjust the margin and padding as it suits you.

Each such <ul> will produce what is effectively a "row" of images with a caption. Add as many "cells" as you need by adding additional <li> elements.

I think it should work -- but I haven't tested it yet in this application, just my navigation links, where it works properly (but without captions.)

Last edited by capidamonte; 08-17-2010 at 02:16 AM.
capidamonte is offline   Reply With Quote