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

Aligning Multiple Images

As Web pages become more complex, you'll want to effectively place images so they look balanced and in proportion to other elements on the page. Let's walk through a page that has a graphic header, an image, and dynamic text:

  1. Begin in your editor with a standard shell:

    <!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>
    <title>An Excerpt from Homer's Odyssey</title>             
    </head>
    <body>
    
    </body>
    </html>
    
  2. Add the text and page formatting:

    <!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>
    <title>An Excerpt from Homer's Odyssey</title>             
    </head>
    <body>
    
    <p>A maid servant then brought them water in a beautiful golden ewer and poured
    it
    into a silver basin for them to wash their hands, and she drew a clean table
    beside them. An upper servant brought them bread, and offered them many good
    things of what there was in the house, the carver fetched them plates of all
    manner of meats and set cups of gold by their side, and a man-servant brought
    them wine and poured it out for them.</p>
    
    <p>Then the suitors came in and took their places on the benches and seats.
    Forthwith men servants poured water over their hands, maids went round with the
    bread-baskets, pages filled the mixing-bowls with wine and water, and they laid
    their hands upon the good things that were before them.</p>
    
    <p>As soon as they had had enough to eat and drink they wanted music and
    dancing,
    which are the crowning embellishments of a banquet, so a servant brought a lyre
    to Phemius, whom they compelled perforce to sing to them. As soon as he touched
    his lyre and began to sing Telemachus spoke low to Minerva, with his head close
    to hers that no man might hear.</p>
    
    </body>
    </html>
    
    
    					  
  3. Add the header image, aligned right, with all the appropriate attributes. I used the <br clear="all" /> trick to break out of the right alignment:

    <!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>
    <title>An Excerpt from Homer's Odyssey</title>             
    
    </head>
    <body>
    
    <img src="images/odyssey_hed.gif" width="350" height="50" border="0"
    align="right" alt="an excerpt from homer's odyssey" />
    <br clear="all" />
    
    
    <p>A maid servant then brought them water in a beautiful golden ewer and poured
    it
    into a silver basin for them to wash their hands, and she drew a clean table
    beside them. An upper servant brought them bread, and offered them many good
    things of what there was in the house, the carver fetched them plates of all
    manner of meats and set cups of gold by their side, and a man-servant brought
    them wine and poured it out for them.</p>
    
    <p>Then the suitors came in and took their places on the benches and seats.
    Forthwith men servants poured water over their hands, maids went round with the
    bread-baskets, pages filled the mixing-bowls with wine and water, and they laid
    their hands upon the good things that were before them.</p>
    
    <p>As soon as they had had enough to eat and drink they wanted music and
    dancing,
    which are the crowning embellishments of a banquet, so a servant brought a lyre
    to Phemius, whom they compelled perforce to sing to them. As soon as he touched
    his lyre and began to sing Telemachus spoke low to Minerva, with his head close
    to hers that no man might hear.</p>
    
    </body>
    </html>
    
    
    					  
  4. Add the image you intend to float with all the necessary attributes, including <br clear="all" />, which forces anything that comes after the image to the next available line:

    <!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>
    <title>An Excerpt from Homer's Odyssey</title>             
    
    </head>
    <body>
    
    <img src="images/odyssey_hed.gif" width="350" height="50" border="0"
    align="right" alt="an excerpt from homer's odyssey" />
    <br clear="all" />
    
    
    
    <p>A maid servant then brought them water in a beautiful golden ewer and poured
    it
    into a silver basin for them to wash their hands, and she drew a clean table
    beside them. An upper servant brought them bread, and offered them many good
    things of what there was in the house, the carver fetched them plates of all
    manner of meats and set cups of gold by their side, and a man-servant brought
    them wine and poured it out for them.</p>
    
    <p><img src="images/schooner2.jpg" width="270" height="140" border="0"
    align="right" hspace="5" vspace="5" alt="image of schooner" /></p>
    
    <p>Then the suitors came in and took their places on the benches and seats.
    Forthwith men servants poured water over their hands, maids went round with the
    bread-baskets, pages filled the mixing-bowls with wine and water, and they laid
    their hands upon the good things that were before them.</p>
    
    <p>As soon as they had had enough to eat and drink they wanted music and
    dancing,
    which are the crowning embellishments of a banquet, so a servant brought a lyre
    to Phemius, whom they compelled perforce to sing to them. As soon as he touched
    his lyre and began to sing Telemachus spoke low to Minerva, with his head close
    to hers that no man might hear.</p>
    
    </body>
    </html>
    
    
    					  

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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