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

#javascript-css-tabview-demo.htm / htm



  <head>
  <style>
  div.TabView div.Tabs {
    height: 24px;
    overflow: hidden;
  }
  
  div.TabView div.Tabs a {
    float: left;
    display: block;
    width:  90px;
    text-align: center;
    height:      24px;
    line-height: 28px;
    vertical-align: middle;
    background: url('/img/tab-view/tabs.png') no-repeat -2px -1px;
    text-decoration: none;
    font-family: "Times New Roman", Serif;
    font-weight: 900;
    font-size: 13px;
    color: #000080;
  }
  
  div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {
    background: url('tabs.png') no-repeat -2px -31px;
  }
  
  div.TabView div.Pages {
    clear: both;
    border: 1px solid #404040;
    overflow: hidden;
  }
  
  div.TabView div.Pages div.Page {
    height: 100%;
    padding: 0px;
    overflow: hidden;
  }
  
  div.TabView div.Pages div.Page div.Pad {
    padding: 3px 18px;
  }
  
  </style>
  
  <script type="text/javascript" src="javascript-css-tabview-script.js"></script>
  </head>
  <body>
  
  <div class="TabView" id="TabView">
  
  <!-- *** Tabs ************************************************************** -->
  
  <div class="Tabs" style="width: 350px;">
    <a>Basic Info.</a>
    <a>Categories</a>
    <a>Order Form</a>
  </div>
  
  <!-- *** Pages ************************************************************* -->
  
  <div class="Pages" style="width: 450px; height: 250px; text-align: left;">
  
    <div class="Page">
    <div class="Pad">
  
    <!-- *** Page1 Start *** -->
  
  <br>
  You can put regular text on the tabs.
  <p>
  We have put together a collection of thousands of free JavaScripts that are available to you for use on your Web pages. The scripts are available, including a working JavaScript example of most of the scripts and the complete actual JavaScript code used.</p>
  <p>
  We also have a great JavaScript Forum where you can post script requests, script questions, and more.</p>
  
    <!-- *** Page1 End ***** -->
  
    </div>
    </div>
  
    <!-- *** Page2 Start *** -->
  
    <div class="Page">
    <div class="Pad">
  <br>
  Categories include:<br>
  <table cellpadding="15" valign="top">
  <tr>
  <td>
   Cookies<br>
   CSS<br>
   Forms<br>
  </td><td>
   Games<br>
   Generators<br>
   Image Effects
  </td><td>
   Math Related<br>
   Miscellaneous<br>
   Navigation
  </td></tr><tr><td>
   Page Details<br>
   Security<br>
   Snippets
  </td><td>
   Time & Date<br>
   Tools<br>
   Tutorials
  </td><td>
   Text Effects<br>
   User Details
  </td>
  </tr>
  </table>
  
    <!-- *** Page2 End ***** -->
  
    </div>
    </div>
  
    <div class="Page">
    <div class="Pad">
  
    <!-- *** Page3 Start *** -->
  
    <br>
  <p>
  You can also use forms on the tab pages. <small><em>(This one is just an example; it doesn't work.)</em></small></p>
  
    <table>
    <tr>
      <td>Username: </td>
      <td><input style="width: 120px;" type="text"     name="username" /></td>
    </tr>
    <tr>
      <td>Password: </td>
      <td><input style="width: 120px;" type="password" name="password" /></td>
    </tr>
    <tr>
      <td> </td>
      <td><input type="submit" value="Submit" /></td>
    </tr>
    </table>
  
    <!-- *** Page3 End ***** -->
  
    </div>
    </div>
  </body>
[] 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.