View Single Post
Old 08-17-2010, 01:14 AM   #15
capidamonte
Not who you think I am...
capidamonte is faster than slow light.capidamonte is faster than slow light.capidamonte is faster than slow light.capidamonte is faster than slow light.capidamonte is faster than slow light.capidamonte is faster than slow light.capidamonte is faster than slow light.capidamonte is faster than slow light.capidamonte is faster than slow light.capidamonte is faster than slow light.capidamonte is faster than slow light.
 
capidamonte's Avatar
 
Posts: 364
Karma: 29999
Join Date: Jan 2010
Location: Honolulu
Device: Ectaco Jetbook Mini -- Yellow
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 01:16 AM.
capidamonte is offline   Reply With Quote