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

basic-css-18-Exercises-exercise18-2.htm / htm



  <!DOCTYPE html PUBLIC "-/pp/W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html>
      <head>
          <title>Oops</title>
          <style type='text/css'>
              body {
                  font: 1em sans-serif;
              }
              div#content {
                  background: lightblue;
                  padding: 10px;
                  border: 1px solid black;
              }
              div#nav {
                  float: left;
                  display: inline;
                  margin-left: 10px;
                  background: lightsteelblue;
                  width: 150px;
                  border: 1px solid black;
              }
              div#nav ul {
                  list-style: none;
                  padding: 0;
                  margin: 0;
              }
              div#nav a {
                  color: black;
                  display: block;
                  width: 100%;
                  margin: 4px;
                  padding: 4px;
                  text-decoration: none;
                  border: 1px solid lightsteelblue;
              }
              div#nav a:hover {
                  border: 1px solid black;
                  background: steelblue;
                  color: white;   
              }
              div#gallery {
                  margin-left: 200px;
                  padding: 10px;
                  border: 1px solid black;
                  text-align: center;   
              }
              div#gallery a:hover {
                  background: seagreen;
                  color: white;
              }
              div#gallery img {
                  border: 1px solid black;
                  width: 10em;
                  height: auto;
              }
              div#guillotine {
                  visibility: hidden;
                  clear: both;   
              }
          </style>
      </head>
      <body>
          <div id='content'>
              <div id='nav'>
                  <ul>
                      <li><a href='#'>Home</a></li>
                      <li><a href='#'>About us</a></li>
                      <li><a href='#'>Products</a></li>
                      <li><a href='#'>Services</a></li>
                      <li><a href='#'>FAQ</a></li>
                      <li><a href='#'>Privacy Statement</a></li>
                      <li><a href='#'>Site Usage Agreement</a></li>
                  </ul>
              </div>
              <div id='body'>
                  <div id='gallery'>
                      <a href='oops.jpg'><img src='oops.jpg'/></a><br/>
                      <a href='oops.jpg'>Larger image</a>
                  </div>
               </div>
          </div>
          <div id='guillotine'>
          </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 20/2/2008

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.