<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Css Snippets &#187; variable</title>
	<atom:link href="http://www.csssnippets.be/tag/variable/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.csssnippets.be</link>
	<description>Snippets for you, snippets for me</description>
	<lastBuildDate>Mon, 17 Oct 2011 08:42:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Thumbnail afbeeldingen gallerij</title>
		<link>http://www.csssnippets.be/2009/11/thumbnail-afbeeldingen-gallerij/</link>
		<comments>http://www.csssnippets.be/2009/11/thumbnail-afbeeldingen-gallerij/#comments</comments>
		<pubDate>Fri, 20 Nov 2009 06:10:23 +0000</pubDate>
		<dc:creator>Mark</dc:creator>
				<category><![CDATA[crossbrowser]]></category>
		<category><![CDATA[hack]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[Images]]></category>
		<category><![CDATA[template]]></category>
		<category><![CDATA[Xhtml Strict]]></category>
		<category><![CDATA[afbeelding]]></category>
		<category><![CDATA[gallerij]]></category>
		<category><![CDATA[gellary]]></category>
		<category><![CDATA[height]]></category>
		<category><![CDATA[hoogte]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[variable]]></category>

		<guid isPermaLink="false">http://www.csssnippets.be/?p=604</guid>
		<description><![CDATA[Een thumbnail image galerij waarbij de afbeelding een variabele hoogte kunnen hebben.]]></description>
			<content:encoded><![CDATA[<p>Een thumbnail image galerij waarbij de afbeelding een variabele hoogte kunnen hebben.</p>
<h3>HTML</h3>
<pre title="code" class="xhtml">
&lt;div class="thumbwrap"&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 01" src="image.jpg" width="160" height="162" /&gt;
 &lt;span&gt;sul monitor 1&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 02" src="image.jpg" width="160" height="145" /&gt;
 &lt;span&gt;sul monitor 2&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 03" src="image.jpg" width="160" height="200" /&gt;
 &lt;span&gt;sul monitor, seduto&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 04" src="image.jpgg" width="160" height="118" /&gt;
 &lt;span&gt;sul monitor, con il koala&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpgg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 05" src="image.jpg" width="160" height="134" /&gt;
 &lt;span&gt;sul monitor, guarda fuori&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 06" src="image.jpg" width="160" height="188" /&gt;
 &lt;span&gt;sul monitor, si lecca una zampa&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 07" src="image.jpg" width="160" height="100" /&gt;
 &lt;span&gt;sul terrazzo, sdraiato al sole 1&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 08" src="image.jpg" width="160" height="103" /&gt;
 &lt;span&gt;sul terrazzo, sdraiato al sole 2&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 09" src="image.jpg" width="160" height="200" /&gt;
 &lt;span&gt;sul terrazzo, al sole seduto&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 10" src="image.jpgg" width="160" height="128" /&gt;
 &lt;span&gt;sul terrazzo, si lava&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 11" src="image.jpg" width="160" height="201" /&gt;
 &lt;span&gt;sul balcone, seduto&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 12" src="image.jpg" width="160" height="109" /&gt;
 &lt;span&gt;sulla ringhiera del balcone, in piedi&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 13" src="image.jpg" width="160" height="145" /&gt;
 &lt;span&gt;sulla ringhiera del balcone, contro il cielo blu 1&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 14" src="image.jpg" width="160" height="135" /&gt;
 &lt;span&gt;sulla ringhiera del balcone, contro il cielo blu 2&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 15" src="image.jpg" width="160" height="128" /&gt;
 &lt;span&gt;sulla ringhiera del balcone, con l'ombra sul muro&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
 &lt;a href="image.jpg"&gt;
 &lt;span&gt;
 &lt;img alt="photo 16" src="image.jpg" width="160" height="113" /&gt;
 &lt;span&gt;una zampa&lt;/span&gt;
 &lt;/span&gt;
 &lt;/a&gt;
&lt;/div&gt;
</pre>
<h3>CSS</h3>
<pre title="code" class="css">
body {
	background-color: #fff;
	color: #000;
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	line-height: 1.1;
	text-align: center;
}
.thumbwrap {
	display: block;
	border: 1px solid #999;
	padding: 15px 8px 0 8px;
	background-color: #f8f8f8;
}
.thumbwrap a {
	display: -moz-inline-box;  /* Moz */
	display: inline-table;  /* Op6+, Saf */
	display: inline-block;  /* IE */
	margin: 0 6px 15px 6px;
	border: 4px solid #999;
	text-decoration: none;
	color: #000;
	background-color: #eee;
	border-spacing: 0;  /* Op6 */
	width: 168px;
}
.thumbwrap a:hover {
	border-color: #6f6;
	background-color: #dfd;
}
.thumbwrap a img {
	border-width: 0;
	vertical-align: bottom;
}
.thumbwrap a span {
	display: block;
}
.thumbwrap a span span {
	padding: 4px;
}
.thumbwrap a>span {
	width: 160px;
}

<!--[if IE]>
.thumbwrap a>span {
	width: auto;
}
<![endif]-->
</pre>



	<a rel="nofollow" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fwww.csssnippets.be%2F2009%2F11%2Fthumbnail-afbeeldingen-gallerij%2F&amp;title=Thumbnail%20afbeeldingen%20gallerij&amp;annotation=Een%20thumbnail%20image%20galerij%20waarbij%20de%20afbeelding%20een%20variabele%20hoogte%20kunnen%20hebben." class="google bookmarks" title="Google Bookmarks">Google Bookmarks</a>
	<a rel="nofollow" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.csssnippets.be%2F2009%2F11%2Fthumbnail-afbeeldingen-gallerij%2F&amp;title=Thumbnail%20afbeeldingen%20gallerij&amp;bodytext=Een%20thumbnail%20image%20galerij%20waarbij%20de%20afbeelding%20een%20variabele%20hoogte%20kunnen%20hebben." class="digg" title="Digg">Digg</a>
	<a rel="nofollow" href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=http%3A%2F%2Fwww.csssnippets.be%2F2009%2F11%2Fthumbnail-afbeeldingen-gallerij%2F&amp;Title=Thumbnail%20afbeeldingen%20gallerij" class="blinklist" title="BlinkList">BlinkList</a>
	<a rel="nofollow" href="http://technorati.com/faves?add=http%3A%2F%2Fwww.csssnippets.be%2F2009%2F11%2Fthumbnail-afbeeldingen-gallerij%2F" class="technorati" title="Technorati">Technorati</a>
	<a rel="nofollow" href="http://twitter.com/home?status=Thumbnail%20afbeeldingen%20gallerij%20-%20http%3A%2F%2Fwww.csssnippets.be%2F2009%2F11%2Fthumbnail-afbeeldingen-gallerij%2F" class="twitter" title="Twitter">Twitter</a>
	<a rel="nofollow" href="http://delicious.com/post?url=http%3A%2F%2Fwww.csssnippets.be%2F2009%2F11%2Fthumbnail-afbeeldingen-gallerij%2F&amp;title=Thumbnail%20afbeeldingen%20gallerij&amp;notes=Een%20thumbnail%20image%20galerij%20waarbij%20de%20afbeelding%20een%20variabele%20hoogte%20kunnen%20hebben." class="delicious" title="del.icio.us">del.icio.us</a>
	<a rel="nofollow" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.csssnippets.be%2F2009%2F11%2Fthumbnail-afbeeldingen-gallerij%2F&amp;t=Thumbnail%20afbeeldingen%20gallerij" class="facebook" title="Facebook">Facebook</a>
	<a rel="nofollow" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.csssnippets.be%2F2009%2F11%2Fthumbnail-afbeeldingen-gallerij%2F&amp;title=Thumbnail%20afbeeldingen%20gallerij" class="stumbleupon" title="StumbleUpon">StumbleUpon</a>

<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.csssnippets.be/2009/11/thumbnail-afbeeldingen-gallerij/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

