Images with captions

Hopetoun falls

A more steady-state view of nature

HTML doesn't have an element that allows to insert an image with a caption. But there are many ways to realize such effect, and the following is just one of them.

<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 stylesheet 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 (try it!).

Couple of ways to fix the problem:

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;
}

Exercise files: click here.

Image Replacement

You have the following HTML:

<div>
	<span>Welcome</span>
</div>

Or you have this:

<h1>Welcome</h1>

And you want to show an image instead of showing the text "Welcome", let's say an image of the text "Welcome" written in a fancy font face. For example:

Welcome

There are several ways of doing this. Here is one way:

div#welcomeImg {
	background: url("cssimages/welcome.gif") no-repeat;
	height:42px;
}

#welcomeImg span {display:none;}

Then your HTML code should be modified as:

<div id="welcomeImg"><span>Welcome</span></div>

The declaration block display:none; inside the span rule makes anything placed inside span disappear.

Exercise: I have 3 different <h1> headers, 

<h1>Home</h1>
<h1>Demo</h1>
<h1>Tour</h1>

and I want to specify different images for different headers using image replacement technique. I have the part of the image replacement CSS as following:

h1.imgReplace {
  height:<YOU SPECIFY THE HEIGHT>; 
  background-repeat:no-repeat;}
h1.imgReplace span {
  display:none;}

I have images home_icon.gif, demo_icon.gif, and tour_icon.gif. I want to replace the text "Home" with home_icon.gif, and so on so forth. I need to both change my XHTML code little bit (may be add id or class attributes to <h1> tag) and write rest of my CSS. Please help me write rest of CSS for implementing the image replacement, and the necessary modification to current XHTML code to implement the image replacement effect.

Files provided to you: exer1.zip

Think about it, why do we need image replacement. Give a few example of possible usage for image replacement.

Other image replacement techniques

The following method eliminates the span by setting height of the parent element to 0 and overflow to hidden, which hides the text. Then it uses top padding to force the element to the height of the image in the background.

#ID_OF_ELEMENT {
  padding: HEIGHT_OF_IMAGEpx 0 0 0;
  overflow: hidden;
  background-image: url("URL_OF_THE_IMAGE");
  background-repeat: no-repeat;
  height: 0px !important; /* for most browsers */
  height /**/:HEIGHT_OF_IMAGEpx;  /* for IE5.5's bad box model */
}

Replace the ID_OF_ELEMENT, HEIGHT_OF_IMAGE, and URL_OF_THE_IMAGE with corresponding id, height value of image, and image url in your case.

The following method uses the CSS text-indent property to shift contained text outside the visible element window.

#ID_OF_ELEMENT {
  text-indent: -9999px;
  overflow: hidden;
}

Replace the ID_OF_ELEMENT with the id of the element you want to apply this image replacement techniuqe for.

Controlled Drop Caps

In the following example the first letter "N" of the word "Nature" is replaced by an image of "N" in a nice font face and bigger font-size.

Nature, in the broadest sense, is equivalent to the natural world, physical universe, material world or material universe. "Nature" refers to the phenomena of the physical world, and also to life in general. The term generally does not include manufactured objects and human interaction unless qualified in ways such as, e.g., "human nature" or "the whole of nature". Nature is also generally distinguished from the supernatural. It ranges in scale from the subatomic to the galactic.

The 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>

Exercise files: exer2.zip