|
| Summary of Content |
 A little exercise in image floating. Using css styles. |
|
<style> .thumbnail { float: left; text-align: center; / treating the image as if it were text to centre it width:120px; / 20px more than actual image width height:95px; / 20px more than actual image height filter:shadow(color:gray); / add drop shadow margin: 0 15px 15px 0; padding: 3px; } .clearboth { clear: both; } .border3 {border: white solid 3px;} </style>
|
| In use as below : <div class="thumbnail"><img src="Image.jpg" class="border3"><br></div> |
See also my alternative to this at my Image Economy workshop page. The images here are placed using 'float' rather than tables and really the code is only useful for similar sized thumbnails, unless you make a class for each size. They will arrange themselves to suit the browser window size, or you can use the 'clearboth' class (located, but not used) in the code to fix the number of images across the page and force a line break.
| Hyperlink titles may have been abbreviated, (right click on the link and select properties for the full URL) |
 A double mouse click anywhere on the page will take you back to the top (except when over hyperlinks) |
Last Updated11/08/2009 - CSS Image Layout with Float - Neils Resource Web
