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-chapter8-3col.htm / htm



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

3 column(s) 


  <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Chapter 8</title>

style(s) 


  <style type="text/css" media="screen">
  body {
   margin: 0;
   padding: 0;
   font-family: Verdana, sans-serif;
   font-size: small;
   background: #fff;
   }

wrap(s) / id 


  #wrap {
   max-width: 1200px;
   background: url(lib-present-style-bullet-chapter8-img-threecol-r.gif) repeat-y 70% 0;
   }
  #wrap-inner {
   background: url(lib-present-style-bullet-chapter8-img-threecol-l.gif) repeat-y 28% 0;
   }

header(s) / id 


  #header {
   margin: 0;
   padding: 10px 20px;
   background: #369;
   }
  #header h1 {
   margin: 0;
   padding: 0;
   font-family: "Trebuchet MS", sans-serif;
   font-size: 180%;
   color: #fff;
   }

main / id 


  #main-body {
   float: left;
   width: 70%;
   }
  #content {
   float: right;
   width: 60%;
   }

sidebar(s) / id 


  #sidebar {
   float: left;
   width: 40%;
   }
  #sidebar-2 {
   float: right;
   width: 30%;
   }

content sidebar / div(s) 


  #content div, #sidebar div, #sidebar-2 div {
   padding: 20px;
   }

footer / id 


  #footer {
   clear: both;
   padding: 10px 20px;
   background: #cc9;
   }
  </style>
  </head>

body 


  <body>
  
  <div id="wrap">
  <div id="wrap-inner">
   <div id="header">
    <h1>Header Goes Here</h1>
   </div>

main 


   <div id="main-body">
    <div id="content">
     <div>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tristique, sapien id scelerisque euismod, turpis lacus sollicitudin nulla, non iaculis quam nulla ullamcorper erat. Nam accumsan laoreet enim. Cras vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas malesuada mattis metus. Proin vehicula pretium nunc. Donec est arcu, viverra a, rutrum sit amet, interdum vitae, est. Aenean enim orci, faucibus in, posuere et, congue pretium, nunc. Vestibulum sagittis turpis vitae pede. Praesent est. Aenean consectetuer ornare arcu. Nulla rhoncus. Pellentesque venenatis enim eu tellus. Etiam fermentum, orci non iaculis gravida, neque nulla aliquam diam, a consequat enim neque vel nunc. Aliquam tincidunt. Suspendisse potenti. Donec mauris. Donec id lectus. Ut ultricies leo vitae velit.</p>

paragraph(s) 


     <p>Cras et turpis vel erat pulvinar faucibus. Sed molestie euismod quam. Nunc rhoncus. Vestibulum iaculis purus vitae felis. Nunc vitae velit convallis eros sollicitudin aliquam. Maecenas rutrum. Nam facilisis odio at sem. In pellentesque wisi id augue. Cras urna urna, ullamcorper ut, ullamcorper eu, fermentum at, metus. Pellentesque porta, turpis eu blandit gravida, nulla dui venenatis magna, at venenatis lacus turpis ut quam. Donec pharetra. Nulla neque sem, porttitor ac, ultrices in, bibendum et, purus. Aenean enim tortor, cursus ac, molestie posuere, ullamcorper eu, dui. Aliquam ac pede. Vivamus nec lorem quis turpis feugiat rutrum. Suspendisse aliquam felis ut urna. Etiam dictum odio scelerisque lacus. Morbi ultrices dolor ac eros. Nunc eget enim in velit molestie mollis.</p>
  
     <p>Curabitur malesuada tincidunt mauris. Etiam eu risus at nulla adipiscing viverra. Suspendisse libero pede, interdum id, cursus a, suscipit nec, orci. Morbi feugiat. Quisque semper nibh eu ipsum. Nullam malesuada adipiscing magna. Phasellus ultrices tincidunt urna. Curabitur nisl. Maecenas eget nisl. Phasellus id dolor a ipsum porttitor tincidunt. In sapien. Phasellus ac est a magna ornare nonummy. Sed ut dui. Cras venenatis sapien non magna. Nullam a mauris eget dolor tincidunt ullamcorper.</p>
     </div>
    </div>

side bar 


    <div id="sidebar">
     <div>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tristique, sapien id scelerisque euismod, turpis lacus sollicitudin nulla, non iaculis quam nulla ullamcorper erat. Nam accumsan laoreet enim. Cras vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas malesuada mattis metus. Proin vehicula pretium nunc. Donec est arcu, viverra a, rutrum sit amet, interdum vitae, est. Aenean enim orci, faucibus in, posuere et, congue pretium, nunc. Vestibulum sagittis turpis vitae pede. Praesent est.</p>
     </div>

end(s) 


    </div>
   </div> <!-- end #main-body -->

sidebar 2 


   <div id="sidebar-2">
    <div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tristique, sapien id scelerisque euismod, turpis lacus sollicitudin nulla, non iaculis quam nulla ullamcorper erat. Nam accumsan laoreet enim. Cras vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas malesuada mattis metus. Proin vehicula pretium nunc. Donec est arcu, viverra a, rutrum sit amet, interdum vitae, est. Aenean enim orci, faucibus in, posuere et, congue pretium, nunc. Vestibulum sagittis turpis vitae pede. Praesent est.</p>
    </div>
   </div>

footer 


  
   <div id="footer">
    footer
   </div>
  
  </div>
  </div> <!-- end #wrap -->
  
  </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.