Help - Search - Members - Calendar
Full Version: HTML Tabs
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
rv1
Oct 20 2009, 03:31 PM
Hello,

I have this need of creating multiple nested HTML tabs and below is how I am doing it.

The issue: Pleaes take a look at Div ID "KI" and "DI" it is not showing the messages in child tab. What am I doing wrong?

Thanks,
Ruchir

Complete code below

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Coexsys EagleEye for Oracle</title>
<meta content="Evrsoft First Page" name="GENERATOR"><!-- Javascript file and CSS file embedding for main tabls -->

<script language="Javascript" src="tabcontent.js" type="text/javascript">
</script>
<link href="tabcontent.css" type="text/css" rel="stylesheet"><!-- Images and logs here -->
</head>

<body>
<p dir="ltr" style="Design_Time_Lock: True"><img style="WIDTH: 291px; HEIGHT: 64px" height="64" src="file:///C:/WIDGET/home.jpg" width="340" border=
"0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img style="WIDTH: 232px; HEIGHT: 62px"
height="62" src="file:///C:/WIDGET/supprot.gif" width="299" border=
"0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<blockquote dir="ltr" style="MARGIN-RIGHT: 0px">
<blockquote dir="ltr" style="MARGIN-RIGHT: 0px">
<blockquote dir="ltr" style="MARGIN-RIGHT: 0px">
<blockquote dir="ltr" style="MARGIN-RIGHT: 0px">
<blockquote dir="ltr" style="MARGIN-RIGHT: 0px">
<blockquote dir="ltr" style="MARGIN-RIGHT: 0px">
<p>&nbsp;&nbsp;&nbsp;<img height="59" src="file:///C:/WIDGET/center.gif" width="198" border="0">&nbsp;&nbsp;&nbsp;&nbsp; <img height="54" src="file:///C:/WIDGET/left.gif" width="310"
border="0"></p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>

<p dir="ltr">Saturday, 17, October, 2009 at 12:18:29 PM</p><!-- Table to display Oracle SID -->

<table width="100%" bgcolor="#CCCCCC">
<tbody>
<tr>
<td>
<p dir="ltr" style="MARGIN-RIGHT: 0px" align="right">17/10/2009 at 12:34</p>
</td>
</tr>
</tbody>
</table>
<!-- Main tabs HTML -->

<ul class="shadetabs" id="countrytabs">
<li><a class="selected" href="#" rel="T1">EagleEye Home</a></li>

<li><a href="#" rel="T2">DB HealthCheck</a></li>

<li><a href="#" rel="T3">EBS HealthCheck</a></li>

<li><a href="#" rel="T4">CPU Usage</a></li>

<li><a href="#" rel="T5">Middle Tier</a></li>

<li><a href="#" rel="T6">Alerts &amp; Reports</a></li>

<li><a href="#" rel="T7">Metalink</a></li>
</ul>

<div style=
"BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 10px; MARGIN-BOTTOM: 1em; PADDING-BOTTOM: 10px; BORDER-LEFT: gray 1px solid; WIDTH: 100%; PADDING-TOP: 10px; BORDER-BOTTOM: gray 1px solid; HEIGHT: 1000px">
<!-- Home Page -->
<div class="tabcontent" id="T1">

<ul class="shadetabs" id="countrytabs1">
<li><a class="selected" href="#" rel="KI">Key Indicators</a></li>
<li><a href="#" rel="DI">Database Information</a></li>
</ul>

<div style= "BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 10px; MARGIN-BOTTOM: 1em; PADDING-BOTTOM: 10px; BORDER-LEFT: gray 1px solid; WIDTH: 95%; PADDING-TOP: 10px; BORDER-BOTTOM: gray 1px solid; HEIGHT: 950px">

<div class="ctabcontent" id="KI">
Tab content for Key Indicators here<br>
Tab content for Key Indicators here<br>
</div>

<div class="ctabcontent" id="DI">
Tab content for Database Information here<br>
Tab content for Database Information here<br>
</div>
</div> </div>

<!-- DB Healthcheck Pack -->

<div class="tabcontent" id="T2">

<ul class="shadetabs" id="countrytabs2">
<li><a class="selected" href="#" rel="Dh1">SQL Profiler</a></li>
<li><a href="#" rel="Dh2">PlSql Optimizer</a></li>
<li><a href="#" rel="Dh3">Statspack</a></li>
<li><a href="#" rel="Dh4">Locks & Waits</a></li>
<li><a href="#" rel="Dh5">Sessions</a></li>
<li><a href="#" rel="Dh6">Security </a></li>
<li><a href="#" rel="Dh7">Files</a></li>
<li><a href="#" rel="Dh8">Object Browser</a></li>
<li><a href="#" rel="Dh9">Tracing</a></li>
<li><a href="#" rel="Dh10">Audit Trail</a></li>
</ul>

<div style= "BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 10px; MARGIN-BOTTOM: 1em; PADDING-BOTTOM: 10px; BORDER-LEFT: gray 1px solid; WIDTH: 95%; PADDING-TOP: 10px; BORDER-BOTTOM: gray 1px solid; HEIGHT: 950px">

<div class="ctabcontent" id="Dh1">
Tab content for Key Indicators here<br>
Tab content for Key Indicators here<br>
</div>

<div class="ctabcontent" id="Dh2">
Tab content for Database Information here<br>
Tab content for Database Information here<br>
</div>

<div class="ctabcontent" id="Dh3">
Tab content for Database Information here<br>
Tab content for Database Information here<br>
</div>

<div class="ctabcontent" id="Dh4">
Tab content for Database Information here<br>
Tab content for Database Information here<br>
</div>

<div class="ctabcontent" id="Dh5">
Tab content for Database Information here<br>
Tab content for Database Information here<br>
</div>

<div class="ctabcontent" id="Dh6">
Tab content for Database Information here<br>
Tab content for Database Information here<br>
</div>

<div class="ctabcontent" id="Dh7">
Tab content for Database Information here<br>
Tab content for Database Information here<br>
</div>

<div class="ctabcontent" id="Dh8">
Tab content for Database Information here<br>
Tab content for Database Information here<br>
</div>

<div class="ctabcontent" id="Dh9">
Tab content for Database Information here<br>
Tab content for Database Information here<br>
</div>

<div class="ctabcontent" id="Dh10">
Tab content for Database Information here<br>
Tab content for Database Information here<br>
</div>
</div>
</div>

<!-- EBS Health Check -->

<div class="tabcontent" id="T3">
<ul class="shadetabs" id="countrytabs3">
<li><a class="selected" href="#" rel="Eb1">EBS Dashboards</a></li>
<li><a href="#" rel="Eb2">Modules</a></li>
<li><a href="#" rel="Eb3">Concurrent Processing</a></li>
<li><a href="#" rel="Eb4">Workflow Monitor</a></li>
<li><a href="#" rel="Eb5">Patching</a></li>
<li><a href="#" rel="Eb6">Change Management</a></li>
<li><a href="#" rel="Eb7">Customizations & Extensions</a></li>
</ul>

<div style= "BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 10px; MARGIN-BOTTOM: 1em; PADDING-BOTTOM: 10px; BORDER-LEFT: gray 1px solid; WIDTH: 95%; PADDING-TOP: 10px; BORDER-BOTTOM: gray 1px solid; HEIGHT: 950px">

<div class="ctabcontent" id="Eb1">
Tab content for Key Indicators here<br>
Tab content for Key Indicators here<br>
</div>

<div class="ctabcontent" id="Eb2">
Tab content for Database Information here<br>
Tab content for Database Information here<br>
</div>

<div class="ctabcontent" id="Eb3">
Tab content for Key Indicators here<br>
Tab content for Key Indicators here<br>
</div>

<div class="ctabcontent" id="Eb4">
Tab content for Key Indicators here<br>
Tab content for Key Indicators here<br>
</div>

<div class="ctabcontent" id="Eb5">
Tab content for Key Indicators here<br>
Tab content for Key Indicators here<br>
</div>

<div class="ctabcontent" id="Eb6">
Tab content for Key Indicators here<br>
Tab content for Key Indicators here<br>
</div>

<div class="ctabcontent" id="Eb7">
Tab content for Key Indicators here<br>
Tab content for Key Indicators here<br>
</div>
</div>
</div>

<!-- CPU Usage -->

<div class="tabcontent" id="T4">
Tab content 4 here<br>
Tab content 4 here<br>
</div>

<!-- Middle Tier -->

<div class="tabcontent" id="T5">
<ul class="shadetabs" id="countrytabs1">
<li><a class="selected" href="#" rel="Mt1">Web Servers</a></li>
<li><a href="#" rel="Mt2">Transaction Performance</a></li>
<li><a href="#" rel="Mt3">Page Performance</a></li>
<li><a href="#" rel="Mt4">Components</a></li>
</ul>

<div style= "BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 10px; MARGIN-BOTTOM: 1em; PADDING-BOTTOM: 10px; BORDER-LEFT: gray 1px solid; WIDTH: 95%; PADDING-TOP: 10px; BORDER-BOTTOM: gray 1px solid; HEIGHT: 950px">

<div class="ctabcontent" id="Mt1">
Tab content for Key Indicators here<br>
Tab content for Key Indicators here<br>
</div>

<div class="ctabcontent" id="Mt2">
Tab content for Database Information here<br>
Tab content for Database Information here<br>
</div>

<div class="ctabcontent" id="Mt3">
Tab content for Key Indicators here<br>
Tab content for Key Indicators here<br>
</div>

<div class="ctabcontent" id="Mt4">
Tab content for Database Information here<br>
Tab content for Database Information here<br>
</div>
</div>
</div>

<!--Reports and Alerts -->

<div class="tabcontent" id="T6">
<ul class="shadetabs" id="countrytabs1">
<li><a class="selected" href="#" rel="Ra1">Reports</a></li>
<li><a href="#" rel="Ra2">Alerts</a></li>
</ul>

<div style= "BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 10px; MARGIN-BOTTOM: 1em; PADDING-BOTTOM: 10px; BORDER-LEFT: gray 1px solid; WIDTH: 95%; PADDING-TOP: 10px; BORDER-BOTTOM: gray 1px solid; HEIGHT: 950px">

<div class="ctabcontent" id="Ra1">
Tab content for Key Indicators here<br>
Tab content for Key Indicators here<br>
</div>

<div class="ctabcontent" id="Ra2">
Tab content for Database Information here<br>
Tab content for Database Information here<br>
</div>
</div>
</div>

<div class="tabcontent" id="T7">
Tab content 7 here<br>
Tab content 7 here<br>
</div>
</div><script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</body>
</html>
Darin McGrew
Oct 20 2009, 03:47 PM
Can you provide the URL (address) of a document that demonstrates the problem?
rv1
Oct 20 2009, 05:00 PM
QUOTE(Darin McGrew @ Oct 20 2009, 03:47 PM) *

Can you provide the URL (address) of a document that demonstrates the problem?


Unfortunately, it is still in development and not yet deployed. However, I am pasting the complete content of CSS below. Hope that may offer some clue.

/* ######### CSS for Shade Tabs. Remove if not using ######### */

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: white;
background: rgb(0,70,140);
}

.shadetabs li a:visited{
background-color: rgb(255,169,83);
color: rgb(0,70,140);
}

.shadetabs li a:hover{
text-decoration: underline;
background-color: rgb(234,234,234);
color: rgb(0,70,140);
}

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
background-color: rgb(255,169,83);
color: rgb(0,70,140);
}

.shadetabs li a.selected{ /*selected main tab style */
background-color: rgb(255,169,83);
color: rgb(0,70,140);
}

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

// customization

.shadetabsx{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabsx li{
display: inline;
margin: 0;
}

.shadetabsx li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: white;
background: rgb(0,70,140);
}

.shadetabsx li a:visited{
background-color: rgb(255,169,83);
color: rgb(0,70,140);
}

.shadetabsx li a:hover{
text-decoration: underline;
background-color: rgb(234,234,234);
color: rgb(0,70,140);
}

.shadetabsx li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

.shadetabsx li a.selected{ /*selected main tab style */
border-color: rgb(0,70,140);
}

.shadetabsx li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontent{
display:none;
}

.ctabcontent{
display:block;
}


@media print {
.tabcontent {
display:block !important;
}
}

@media print {
.ctabcontent {
display:block !important;
}
}
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.