Adding Text Captions Align Images on Web Pages
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="http://www.blogger.com/google.gif" alt="Google Logo" height="120" width="276" /> Image Caption goes here. </div>
|
Post a Comment