Adding Text Captions Align Images on Web Pages » Digital Compass
Enter your email address:

Delivered by FeedBurner

feedburner count

Adding Text Captions Align Images on Web Pages

Labels: , , , ,

CSS and HTML help you create images like wikipedia ie. Image shown here contain google logo with text caption below the image, its fair easy to implement the code for creating Images with text caption...

Given below the css and html code and steps to do it Step 1. Add the CSS code to an external CSS file or into your blog template below the head section

<style type="text/css"> <br />.picture { background-color: #F9F9F9; <br />border: 1px solid #CCCCCC; padding: 3px; <br />font: 11px/1.4em Arial, sans-serif; } <br />.picture img { border: 1px solid #CCCCCC; <br />vertical-align:middle; margin-bottom: 3px; } <br />.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; } <br />.left { margin: 0.5em 0.8em 0.5em 0; float:left; } <br /></style>
Step 2. Now insert the HTML code into the template. its as easy as adding an image but its just having div tag. before and after.

<div class="picture left" style="width: 278px;"> <img src="" alt="Google Logo" height="120" width="276" /> Image Caption goes here. </div>

Enjoyed Reading! Subscribe to our feeds to get more

Digg Technorati Stumbleupon Reddit



Post a Comment