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