Adding caption to Image

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Caption</title>
<style>
body {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

#content {
  margin-left: 15px;
  margin-top: 15px;
  border: 1px dashed #999;
  border-right: none;
  border-bottom: none;
}

h1 {
  font: normal 2.4em Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  border-bottom: 1px dashed #999;
  padding: 5px 0 5px 8px;
  color: #14556b;
}

p {
  font: 1.6em/160% Georgia, "Times New Roman", Times, serif;
  margin: 10px 8px;
}

.copyright {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  color: #666666;
  margin-left: 0;
  padding-left: 8px;
  border-top: 1px dashed #999;
  clear: both;
}

.figure img {
    border: 1px solid #666;
    padding: 10px;
}

.figure {
    float: right;
    width: 222px;
    margin: 15px 10px 5px 10px;
}
.figure p {
    font: bold 1em/normal Verdana, Arial, Helvetica, sans-serif;
    color: #333;
    text-align: center;
background-color: #e6f3ff; 
    border: 1px dashed #666;
    padding: 5px;
  margin: 10px 0 0 0;
}

</style>
</head>

<body>
<div id="content">
<h1>CosmoFarmer&#8217;s Guide to Apartment Lawn Maintenance </h1>
<div class="figure">
<img src="http://www.java2s.com/style/logo.png" alt="Creeping Bentgrass" width="200" 
height="200" />
<p>Figure 1: This is a caption.</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p>
<p class="copyright">Copyright 2006, CosmoFarmer.com </p>
</div>
</body>
</html>

Related examples in the same category

1.	Adding images and alt message with XHTML
2.	Alternative Text Rendering
3.	Set background to #fff for an image
4.	Set padding to 4px
5.	display block
6.	in a with class
7.	Set image margin top and left to negative value
8.	Image block
9.	image clear: left;
10.	Switch image for link
11.	Image as a link
12.	Creating an Image Map
13.	Top link with image
14.	Wrap text along with image
15.	Using arrow image for LI
16.	Use image to create line
17.	Using color image to create round corner
18.	Large corner image for the top bar
19.	Image slide show
20.	Text wrap around image
21.	Image side bar
22.	Text wrap image
23.	Using huge image to highlight your content
24.	Using image to add shading to your text
25.	Image Text wraper
26.	Marginal Graphic Dropcap
27.	Raised image
28.	Lowered text
29.	Image with clear left
30.	Using css to wrap text around images
31.	Image map area
32.	HTML Image map
33.	Creating and Using Image Maps
34.	shape = "rect" indicates a rectangular area, with coordinates for the upper-left and lower-right corners
35.	value "poly" creates a hotspot in the shape of a polygon, defined by coords
36.	shape = "circle" indicates a circular area with the given center and radius
37.	indicates that the specified image map is used with this image
38.	Client-side Image Map Example
39.	'area' defines the clickable area on a graphic or image
40.	'coords' sets the coordinates of an 'a' or 'area' element
41.	'galleryimg' eliminate the appearance of the toolbar for all 'img' elements
42.	'img' displays a picture or a video clip
43.	Adding shading to the picture
44.	HTML code for image scaling
45.	'ismap': Whether the image in 'img' element is a server-side image map
46.	'lowsrc' gives the URL of a low-resolution image
47.	'map' specifies the coordinates of an image map
48.	'nohref' indicates that the 'area' in the 'map' has no link
49.	'shape' sets the shape of an 'a' or 'area' element
50.	'src' specifies a URL to be loaded by the element
51.	'start' specifies when a video clip should start playing
52.	'usemap' sets the image map for the map element
53.	'hspace' sets the space in pixels between the left and right sides of an element
54.	'vspace' sets the size in pixels of the vertical margins

Adding caption to Image : img « Tags « HTML / CSS

Related examples in the same category