Developers
The Thumbnailed List template
Description
This template is intended for the display of lists of rich items, each item being made of:
- a title
- a description
- a picture
Please note that a thumbnail's style is fixed in the provided CSS, with the properties float: left and width: 92px, among others. The positioning of the text is also fixed.
Preview
Code
Defined CSS classes
nv-thumbnailedList item thumbnail odd even
Sample code
<div class="nv-thumbnailedList"> <div class="item even"> <a href="#"><img src="http://example.com/image.jpg" alt="" class="thumbnail" /></a> <h3><a href="#">Item #1</a></h3> <p class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus</p> </div> <div class="item odd"> <a href="#"><img src="http://example.com/image.jpg" alt="" class="thumbnail" /></a> <h3><a href="#">Item #2</a></h3> <p class="description">Short text to test flotting picture behaviour.</p> </div> <div class="item even"> <a href="#"><img src="http://example.com/image.jpg" alt="" class="thumbnail" /></a> <h3><a href="#">Item #3</a></h3> <p class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas vitae elit at sem dapibus iaculis. Nullam nec ipsum. Fusce gravida, magna nec tincidunt laoreet, est lorem porttitor nunc, non suscipit mauris turpis non turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis nec metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed gravida aliquam pede.</p> </div> </div>
Sample widget
- Send to a friend
- Add to favorites
- Last modified: 2008/04/24 23:27

