topical media & game development

talk show tell print

lib-present-style-bullet-chapter3-index.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" lang="en" xml:lang="en">
  <head>
  <title>Chapter 3: Expandable Rows</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  

style(s)


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

container / id


  #container {
   width: 768px;
   margin: 0 auto;
   text-align: left;
   font-size: 80%;
   } 
  

register / id


  #register { 
     float: left;
     width: 100%;
     margin: 0;
     padding: 0;
     list-style: none;
     color: #690;
     background: #BDDB62 url(lib-present-style-bullet-chapter3-img-reg-bottom.gif) no-repeat bottom left;
     }
  

register / link(s)


  #register a {
     text-decoration: none;
     color: #360;
     }
  

reg / id


  #reg {
     float: left;
     margin: 0;
     padding: 8px 14px;
     }
  

find / id


  #find {
     float: right;
     margin: 0;
     padding: 8px 14px;
     background: url(lib-present-style-bullet-chapter3-img-mag-glass.gif) no-repeat 0 50%;
     } 
  

message / id


  #message {
     float: left;
     width: 100%;
     margin: 0;
     padding: 0;
     font-weight: bold;
     font-size: 110%;
     color: #fff;
     text-align: center;
     background: #92B91C url(lib-present-style-bullet-chapter3-img-ship-top.gif) no-repeat top left;
     }
  

message / paragraph(s)


  #message p {
     margin: 0;
     padding: 8px 14px;
     background: url(lib-present-style-bullet-chapter3-img-ship-bottom.gif) no-repeat bottom left;
     }
  

message / strong(s)


  #message strong {
     text-transform: uppercase;
     }
  

message / link(s)


  #message a {
     margin: 0 0 0 6px;
     padding: 2px 15px;
     text-decoration: none;
     font-weight: normal;
     color: #fff;
     background: url(lib-present-style-bullet-chapter3-img-arrow.gif) no-repeat 0 50%;
     }
  </style>
  </head>
  

body


  
  <body>
  
  <div id="container">
   
   <ul id="register">
    <li id="reg">Not registered? <a href="#">Register</a> now!</li>
    <li id="find"><a href="#">Find a store</a></li>
   </ul>
   
   <div id="message">
    <p><strong>Special this week:</strong> $2 shipping on all orders! <a href="#">LEARN MORE</a></p>
   </div>
  
  </div>
  
  </body>
  </html>
  


(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.