CSS Tips & Tricks

IT Solution In JalandharBy Virtuous Valley

Images with Captions

HTML doesn't have an element that allows to insert an image with the caption.

But there are many other ways to use such effect, and the following is just one of them.

HTML Coding<div id="captioned_image">

<p><img src="images/Hopetoun_falls.jpg" width="180"

height="135" alt="Hopetoun falls" /></p>

<p>A more steady-state view of nature</p></div>

The CSS style-sheet for formatting:

#captioned_image {

float: right;

width: 28%;

border: 1px silver solid;

margin: 0.5em;

padding: 0.5em;

}

#captioned_image p {

text-align: center;

font-style: italic;

font-size: smaller;

text-indent: 0;

padding: 0;

}

There is one problem here, and that is that the image may be too wide. In this case, the image is 180 px wide and the div is 28% of the surrounding text. So if you make the window narrower, it may be that the image overflows the div.

Couple of ways to fix the problem by IT solution in jalandhar:

Add a minimum width to the div Add a width to the img Edit the size of every image before

inserting into your web page.

Add a minimum width

If you know the width of all images in the document, you can add a minimum width to the div, like min-width: 150px; (in this case we know the minimum width of all images) to the rule div.captioned_image.

Add a image width

Another way is to scale the image itself. Add the following rule:

#captioned_image img { width: 100%;}

Display the caption on top

#captioned_image p { display: table-cell; width: 100%;}

#captioned_image p + p { display: table-caption; caption-side: top;}

Controlled Drop CapsThe technique we use here is the same we used for the image replacement. See the following example code:

#dropcap_n {

display:block;

float:left;

width: 62px;

height:56px;

margin-right:5px;

background-image:url("cssimages/dropcap_n.gif");

background-repeat:no-repeat;

}

#dropcap_n span {display:none;}

The HTML code looks like:

<p><span id="dropcap_n"><span>N</span></span>ature, ....</p>

Be In Touch With Virtuous ValleyContact@

+91-9803329610

Website: www.virtuousvalley.com

Facebook: https://www.facebook.com/virtuousvalley/

Twitter: https://twitter.com/virtuousvalley

Google+: ttps

://plus.google.com/u/0/107078111188408241781Pinterest:

https://www.pinterest.com/virtuousvalley/