• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 10. Aligning, Floating, and Posi... > Creating an Online Picture Gallery

Creating an Online Picture Gallery

There are many ways in which you can use the float and clear properties in Web pages to flow text and other elements around floating images and other elements. A particularly good use for this is in creating an online picture gallery, in which image captions and descriptions flow alternatively around the right and left sides of floating photos. I've included an example file, gallery.html, with the other example files for this book; just open it in your text editor and then edit it as shown here to create the example online picture gallery, and then save it as mygallery.html (see Figures 10.14 and 10.15):

Listing 10.2. MYGALLERY.HTML—An online picture gallery

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>My Online Picture Gallery</TITLE>

<style type="text/css">
						<!--
						body {
						margin-top: 5px;
						color: white;
						background: black url(dark.jpg);
						}
						/* Body display settings */
						span.pictitle {
						color: aqua;
						background: transparent;
						font-family: Verdana, Arial, sans-serif;
						font-size: 2em;
						}
						/* Picture title display settings */
						img.left {
						float: left;
						border-width: 0;
						margin-right: 10px;
						}
						/* Left image float settings */
						img.right {
						float: right;
						border-width: 0;
						margin-left: 10px;
						}
						/* Right image float settings */
						-->
						</style>
</head>
<body>
<div style="text-align: center"><img src="gallery.gif" alt="Online Gallery Banner
Image" style="width: 500px; height: 75px;">
</div>
<hr>

<p><a href="picture1.jpg"><img src="picture1_sm.jpg" class="left" alt="View of
Elliott Bay" style="width: 300px; height: 203px"></a>
<span class="pictitle">View of Elliott Bay</span><br>from the west side of Queen
Anne Hill, Seattle, Washington.<br style="clear: left"></p>
<hr>

<p><a href="picture2.jpg"><img src="picture2_sm.jpg" class="right" alt="View of
Elliott Bay & Alki" style="width: 300px; height: 203px"></a>
<span class="pictitle">View of Elliott Bay and Alki</span><br>from the west side
of Queen Anne Hill, Seattle, Washington.<br style="clear: right"></p>
<hr>

<p><a href="picture3.jpg"><img src="picture3_sm.jpg" class="left" alt="View of
Elliott Bay/Alki" style="width: 300px; height: 203px"></a>
<span class="pictitle">Another View of Elliott Bay</span><br>from the west side
of Queen Anne Hill, Seattle, Washington.<br style="clear: left"></p>
<hr>

<address>
John Richards<br>
E-Mail: <a href="mailto:johnr@goforit.com">johnr@goforit.com</a><br>
Web Address: <a href="http://www.goforit.com/johnr/">http://www.goforit.com/johnr/</a>
</address>

</body>
</html>


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint