topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

lib-present-style-bullet-chapter4-index-overflow.htm / htm



  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html 


  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>Chapter 4: Creative Floating</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

style(s) 


  <style type="text/css" media="screen">
  body {
   font-family: Arial, sans-serif;
   font-size: small;
   }

sweden / id 


  #sweden {
     float: left;
     width: 304px;
     padding: 10px 0;
     background: url(lib-present-style-bullet-chapter4-img-bg.gif) no-repeat top left;
     }

sweden / list(s) 


  #sweden dl {
     overflow: auto; /* self-clears floats within */
     width: 260px;
     margin: 10px 20px;
     padding: 0;
     }

sweden / item(s) 


  #sweden dt {
     float: right;
     width: 162px;
     margin: 0;
     padding: 0;
     font-size: 130%;
     letter-spacing: 1px;
     color: #627081;
     }

sweden / entry(s) 


  #sweden dd {
     margin: 0 0 0 98px;
     padding: 0;
     font-size: 85%;
     line-height: 1.5em;
     color: #666;
     }

sweden / image(s) / dl 


  #sweden dl dd.img {
      margin: 0;
      }
  #sweden dd.img img {
     float: left;
     margin: 0 8px 0 0;
     padding: 4px;
     border: 1px solid #D9E0E6;
     border-bottom-color: #C8CDD2;
     border-right-color: #C8CDD2;
     background: #fff;
     }

sweden / float(s) 


  /* reverse float */
  
  #sweden .alt dt {
     float: left;
     }
  #sweden .alt dd {
     margin: 0 98px 0 0;
     }
  #sweden .alt dd.img img {
     float: right;
     margin: 0 0 0 8px;
     }
  </style>
  </head>

body 


  
  <body>
  
  <div id="sweden">
   <dl>
    <dt>Stockholm</dt>
    <dd class="img"><img src="lib-present-style-bullet-chapter4-img-gamlastan.jpg" width="80" height="80" alt="Gamla Stan" /></dd>
    <dd>This was taken in Gamla Stan (Old Town) in a large square of amazing buildings.</dd>
   </dl>

list(s) 


   <dl class="alt">
    <dt>Gamla Uppsala</dt>
    <dd class="img"><img src="lib-present-style-bullet-chapter4-img-uppsala.jpg" width="80" height="80" alt="Gamla Uppsala" /></dd>
    <dd>The first three Swedish kings are buried here, under ancient burial mounds.</dd>
   </dl>
   <dl>
    <dt>Perpetual Sun</dt>
    <dd class="img"><img src="lib-present-style-bullet-chapter4-img-watch.jpg" width="80" height="80" alt="Wristwatch" /></dd>
    <dd>During the summer months, the sun takes forever to go down. This is a good thing.</dd>
   </dl>

end 


  </div>
  
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.