1 Replies - 1786 Views - Last Post: 20 January 2010 - 05:10 PM

#1 Excavator  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 21
  • View blog
  • Posts: 60
  • Joined: 10-December 06

Thumbnail presentation

Posted 20 January 2010 - 05:09 PM

Description: To accomodate odd sized images width can be specified as need inline like <p><span style="width: **px;"><a href

To make all the thumbs float in nice lines you can specify the height of the span in CSS to match the tallest thumbnail image you expect.
•It spaces out as many thumbs as will fit in the container
•when it line breaks the thumbs that drop are centered
•a few lines of CSS control it all. As many thumbs as you want to put on a page.
•the only extra markup is the span tags

Can easily accomodate odd sized thumbs with some very simple inline width added.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="" content="authored by http://www.nopeople.com/design/" />
<title>Centered thumbnails</title>
<style type="text/css"> 
html, body {
	background-color: #CCCCCC;
}
.wrapper {
	text-align: center;
	background-color: #999999;
	margin: 100px 0 0;
}
.wrapper p {
	display: inline;
}
.wrapper span {
	width: 150px;
	margin: 5px 10px;
	vertical-align: top;
	display: table-cell;
	display: inline-table; 
	display: inline-block;
}
.wrapper p img {margin: 5px 0;}	
.wrapper a {text-decoration: none;}
</style>
</head>
<body>
 <div class="wrapper">
        <p><span><a href="http://link/to/big/image.jpg"><img src="path/to/TN.jpg"   alt="description" width="150" height="122" /> a picture</a></span></p
 <!--closes wrapper --></div>



Is This A Good Question/Topic? 0
  • +

Replies To: Thumbnail presentation

#2 Excavator  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 21
  • View blog
  • Posts: 60
  • Joined: 10-December 06

Re: Thumbnail presentation

Posted 20 January 2010 - 05:10 PM

See it in action at http://nopeople.com/...tion/index.html
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1