A few words of thanks would be greatly appreciated.

CSS to enhance the presentation of your images

Latest update on October 2, 2012 at 07:33 AM by deri58 .

Implementation
Some examples to place in the CSS code
To frame an image with text to the left
To frame an image with the text on the right

To enhance the presentation of your images, you can incorporate some additional code in your CSS. They are flexible depending on what you want to achieve on your site.

Implementation

Put the desired codes CSS and test in your page, like this:

<img class="photo" other attributes...>

Some examples to place in the CSS code

.photo { 
  background-color:#fafbfc; 
  border:1px solid #b0b0b0; 
  margin:0 0 10px 10px; 
  padding:5px; 
}

.phototoright { 
  border: 5px solid #b0b0b0; 
  margin: 5px 6px 15px 6px; 
}

.phototoleft { 
  border : 5px solid #b0b0b0; 
  float : left; 
  margin : 5px 15px 6px 15 px; 
}

To frame an image with text to the left

div#photoflot p{ 
  margin:0; 
  padding:0; 
  text-align:justify; 
} 
div#photoflot img{ 
  float:left; 
  background-color:#fafbfc; 
  border:1px solid #b0b0b0; 
  margin:0 0 10px 10px; 
  padding:5px; 
} 
hr{ 
  clear:left; 
}

Use it as such:

<div id="photoflot"><img attributs...> 
<p>Fusce sem turpis, mollis ut, commodo quis, aliquet eget, ipsum. Ut nonummy libero vitae neque. Quisque lacus. Nullam lobortis. Cras quam. Nulla vitae ante nec eros mollis luctus. Vivamus velit. Morbi interdum euismod sapien...</p> 
</div>

To frame an image with the text on the right

/* To frame an image with the text on the right */ 
.rightimg, .leftimg, .centreimg img { 
  border:1px solid #AAAAAA; 
  background-color:#E9E9E9; 
  padding:3px; 
  margin:6px; 
} 
.rightimg {float:right;} 
.leftimg {float:left;} 
div.centreimg { 
 text-align:center; 
}

Use it as such:

<img class="rightimg" attributs...>Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis...

CSS to enhance the presentation of your images
Css remove image border - How-To - HTML
HTML/CSS - Several links on a single image - How-To - HTML
CSS - Remove space between images - How-To - Programming
Deplacer une image css - Articles
A separate or external file with extension is created to store css declaration - Articles

This document, titled « CSS to enhance the presentation of your images », is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).

CSS: border-style property

CSS - The properties

Implementation

Some examples to place in the CSS code

To frame an image with text to the left

To frame an image with the text on the right

Subscribe To Our Newsletter!