Image Functionality
By default, when a regular image is inserted into a Perfect Layout page, it will be aligned left and have padding on the bottom and right, to provide a buffer between it and the text around it. Here's an example:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas in neque. Vivamus posuere, purus eget vehicula aliquam, nunc massa vulputate justo, imperdiet posuere odio orci eu tortor. Sed pulvinar ullamcorper purus. Etiam et lectus. Mauris nec augue et lorem ultrices interdum. Pellentesque in metus rhoncus nulla condimentum tincidunt. Aliquam justo. Donec rutrum scelerisque nibh. Suspendisse hendrerit elit ut nisi varius porta. Aenean vehicula imperdiet augue. Curabitur in orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam nec eros. Morbi commodo neque quis risus. Sed malesuada tortor vitae nisi. Aliquam erat volutpat. Phasellus venenatis, orci vel consequat congue, sem pede imperdiet pede, aliquam suscipit ipsum nisi ornare elit. Vivamus imperdiet risus ut metus tristique rutrum. Suspendisse commodo varius erat. Maecenas tortor sem, interdum vitae, pellentesque venenatis, dictum in, quam. Etiam rhoncus. Vestibulum sed mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vel sem.
There's also nothing keeping you from inserting images within paragraphs (or other structures), but you will need to apply the topPadding class to the image, so that the image will get an additional padding buffer above, like so:
Etiam interdum. Maecenas eros tortor, lobortis quis, euismod ut, auctor quis, tortor. Etiam egestas urna nec erat. Morbi sit amet nisl. Nam mattis, nisl nec fermentum fermentum, nisi sapien varius magna, at volutpat libero orci quis lacus. Nam tristique. Donec eget velit. Aenean felis libero, dignissim eget, condimentum eget, blandit sed, massa. Suspendisse eu ipsum. Ut elit metus, blandit et, molestie vestibulum, tincidunt ac, turpis. Mauris quis nunc. Nulla cursus fermentum nisl. Suspendisse augue. Ut volutpat consequat felis. Quisque quis nunc. Aliquam dignissim, ligula non congue aliquam, tortor nunc tincidunt ligula, id consectetuer pede lacus at neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer malesuada aliquam nisi. Donec commodo fermentum metus. Vestibulum erat metus, laoreet mattis, semper sed, consequat id, augue. Integer in enim a eros lacinia molestie. Nullam eget lectus. Sed dapibus diam ut dolor. Duis mattis. Sed id turpis. Aliquam in mi a nisl porttitor interdum. In volutpat venenatis dui. In mauris leo, vehicula vel, varius et, hendrerit vitae, enim. Donec sit amet nisl. Sed nunc pede, iaculis nec, pharetra vel, laoreet in, lectus. Vivamus gravida augue mattis neque. Vivamus at est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed leo orci, pretium ac, rhoncus vel, iaculis nec, sem. Praesent hendrerit blandit lorem. Nunc consequat tincidunt metus. Maecenas molestie sem nec nibh. Integer non risus. Sed lorem ligula, laoreet ut, blandit a, euismod sed, orci. Suspendisse commodo. Nam tempus molestie justo. Etiam accumsan. Suspendisse non arcu. Phasellus tristique dictum sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque turpis risus, accumsan sed, cursus ut, dictum vel, risus. Cras elit ligula, mollis non, bibendum eu, malesuada at, augue. Aliquam erat volutpat. Phasellus tempus adipiscing nulla. Proin vestibulum elit id urna.
Be careful when wrapping text around the image, because the text may not always be long enough to completely envelop the image's sides. If you want to make sure that things wrap the way you want them to, regardless of the window size, be sure to use the left and right containers or make careful use of the clearBoth class on the next structure (which I used with this paragraph).
Because of the nature of image hyperlinks and some other factors, the styling for images will be applied to all divs, even divs outside of #content. Here's an example of using an image as a hyperlink (doesn't go anywhere):
As you can see above, there are no borders, backgrounds, or underlines on the image when you hover over it. I've specifically turned them off because they can cause inconsistencies on different browsers.
Relevant HTML
<!-- Paragraph wrapping around an image. --> <img src="../images/image.jpg" alt="sample image" /> <p>This is a long paragraph that will hopefully wrap completely around the image.</p> <p class="clearBoth">But if it doesn't just use the clearBoth class on the next item.</p> <!-- Inserting an image inside a paragraph. --> <p>I can insert an image at any <img src="../images/image.jpg" alt="sample image" /> point inside a paragraph.</p> <!-- Using an image as a hyperlink. --> <a href="#"><img src="../images/image.jpg" alt="sample image" /></a>
Relevant CSS
img
{
float:left;
padding:0 10px 10px 0;
}
a img
{
border:none;
background:none;
}
.topPadding
{
padding-top:1em;
}