Hello friends you can now, add caption to your images (web/blog). With simple CSS and HTML, you can quickly add text captions to images. Just read the following steps to add this feature to your site.
The image will look something like the pic below.
Step 1:
Add the following CSS code to an external CSS file or to your blog template under the <HEAD> section.
<style type="text/css">
.picture { background-color: #F9F9F9;
border: 1px solid #CCCCCC; padding: 3px;
font: 11px/1.4em Arial, sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }
</style>
Step 2:
Now insert the following HTML code anywhere in the web page, where you want to display the image. The process is exactly the same as inserting regular images but we have just enclosed that inside a <DIV> tag.
<div class="picture left" style="width:278px;"> <img src="google.gif" width="276" height="120" alt="Google Logo" /> <br />Image Caption goes here. </div>
In the above example, we add the file google.gif left aligned and the image has dimensions 276×120.
Replace left with right if you want to right align the image box. You’ll also need to modify the style:width of the <DIV> tag such it is equal to image width + 2.
You can also fiddle with the CSS to change the font name, size, border colors, background, margins, etc.
Source : Add text caption to your web image
Go back to Useful widgets
The image will look something like the pic below.
Step 1:
Add the following CSS code to an external CSS file or to your blog template under the <HEAD> section.
<style type="text/css">
.picture { background-color: #F9F9F9;
border: 1px solid #CCCCCC; padding: 3px;
font: 11px/1.4em Arial, sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }
</style>
Step 2:
Now insert the following HTML code anywhere in the web page, where you want to display the image. The process is exactly the same as inserting regular images but we have just enclosed that inside a <DIV> tag.
<div class="picture left" style="width:278px;"> <img src="google.gif" width="276" height="120" alt="Google Logo" /> <br />Image Caption goes here. </div>
In the above example, we add the file google.gif left aligned and the image has dimensions 276×120.
Replace left with right if you want to right align the image box. You’ll also need to modify the style:width of the <DIV> tag such it is equal to image width + 2.
You can also fiddle with the CSS to change the font name, size, border colors, background, margins, etc.
Source : Add text caption to your web image
Go back to Useful widgets
0 comments:
Post a Comment