http://www.csssnippets.be Snippets for you, snippets for me Wed, 23 Jun 2010 09:35:12 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 http://www.csssnippets.be/2009/11/thumbnail-afbeeldingen-gallerij/ http://www.csssnippets.be/2009/11/thumbnail-afbeeldingen-gallerij/#comments Fri, 20 Nov 2009 06:10:23 +0000 Mark http://www.csssnippets.be/?p=604 Een thumbnail image galerij waarbij de afbeelding een variabele hoogte kunnen hebben.

HTML

<div class="thumbwrap">
 <a href="image.jpg">
 <span>
 <img alt="photo 01" src="image.jpg" width="160" height="162" />
 <span>sul monitor 1</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 02" src="image.jpg" width="160" height="145" />
 <span>sul monitor 2</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 03" src="image.jpg" width="160" height="200" />
 <span>sul monitor, seduto</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 04" src="image.jpgg" width="160" height="118" />
 <span>sul monitor, con il koala</span>
 </span>
 </a>
 <a href="image.jpgg">
 <span>
 <img alt="photo 05" src="image.jpg" width="160" height="134" />
 <span>sul monitor, guarda fuori</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 06" src="image.jpg" width="160" height="188" />
 <span>sul monitor, si lecca una zampa</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 07" src="image.jpg" width="160" height="100" />
 <span>sul terrazzo, sdraiato al sole 1</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 08" src="image.jpg" width="160" height="103" />
 <span>sul terrazzo, sdraiato al sole 2</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 09" src="image.jpg" width="160" height="200" />
 <span>sul terrazzo, al sole seduto</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 10" src="image.jpgg" width="160" height="128" />
 <span>sul terrazzo, si lava</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 11" src="image.jpg" width="160" height="201" />
 <span>sul balcone, seduto</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 12" src="image.jpg" width="160" height="109" />
 <span>sulla ringhiera del balcone, in piedi</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 13" src="image.jpg" width="160" height="145" />
 <span>sulla ringhiera del balcone, contro il cielo blu 1</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 14" src="image.jpg" width="160" height="135" />
 <span>sulla ringhiera del balcone, contro il cielo blu 2</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 15" src="image.jpg" width="160" height="128" />
 <span>sulla ringhiera del balcone, con l'ombra sul muro</span>
 </span>
 </a>
 <a href="image.jpg">
 <span>
 <img alt="photo 16" src="image.jpg" width="160" height="113" />
 <span>una zampa</span>
 </span>
 </a>
</div>

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;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2009/11/thumbnail-afbeeldingen-gallerij/feed/ 0 http://www.csssnippets.be/2009/04/layout-met-100-hoogte/ http://www.csssnippets.be/2009/04/layout-met-100-hoogte/#comments Fri, 24 Apr 2009 16:47:28 +0000 Mark http://www.csssnippets.be/?p=185 Hoe maak je een pagina die 100% hoog is – dus het gehele beeldscherm in beslag neemt – terwijl er eigenlijk weinig tekst of inhoud in staat ?

HTML

<div id=”container”>
<h1>Header</h1>
<div id=”inhoud”>
<p>inhoud hier</p>
</div>
<div id=”footer”>Footer</div>
</div>

CSS

html, body {
height: 100%; /* héél belangrijk */
}
#container {
position: relative;
min-height: 100%;
height:auto !important; /* voor moderne browsers */
height:100%; /* voor IE */
}
#footer {
position: absolute;
bottom: 0; /* heel belangrijk */
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2009/04/layout-met-100-hoogte/feed/ 1