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:
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:
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...
To frame an image with the text on the right
/* To frame an image with the text on the right */ ightimg, .leftimg, entreimg img { border:1px solid #AAAAAA; background-color:#E9E9E9; padding:3px; margin:6px; } ightimg {float:right;} .leftimg {float:left;} dientreimg { text-align:center; }
Use it as such:
