dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Tabs using DIV problem

  1. #1
    Join Date
    May 2012
    Posts
    1

    Tabs using DIV problem

    Hi

    I created two tabs form, my code is just on one page, my goal is to divide my page into two tabs, I created it using ASP web and it works just fine, my problem is when I change it to HTML. when I change everything to HTML and run it on I.E, everything appears on One Page not on two tabs as intended.

    Here is my code below:

    <body>
    <div id="tab-container" class='tab-container'>

    <ul class='etabs' style="">
    <li class='tab'><a href="#CDD_page1">Page 1 of 2 Pages</a></li>
    <li class='tab'><a href="#CDD_page2">Page 2 of 2 Pages</a></li>

    </ul>
    <div class='panel-container'>
    <form name="form" method="post" action="">


    <div id="CDD_page1">
    <code>
    <fieldset><legend>DESCRIPTION OF CHANGE</legend>
    <table>

    <tr title="Brief Description of Change"><td class="style17">
    Description of your Change Request <img src="req.gif" alt="Required" /> &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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;
    </td><!--<span title="Brief Description of Change">-->
    <td>
    <input name="BriefDescriptionofChange" type="text" id="MainContent_TextBox1" style="width:168px;" />
    </td><!--</span>--></tr>
    <tr title="Change Reference Number And The Change Type">
    <td class="style17">
    Change Number <img src="req.gif" alt="Required" />
    </td><!--<span title="Change Reference Number And The Change Type">-->
    <td class="style3">
    <input name="ChangeNumberType" type="text" id="MainContent_TextBox3" value="" style="width:95px;" />

    <select name="ChangeType" id="MainContent_DropDownList1" onchange="showEntry(this,this.value, 'Flare2')">
    <option value="">-Select-</option>
    <option value="Flare">Flare</option>
    <option value="SR">SR</option>
    <option value="PAF">PAF</option>
    <option value="CR">CR</option>

    </select></td><!--</span>--></tr>

    <tr id="Flare" style="display: none;">

    <td class="style17">
    Hyperlink to Flare <img src="req.gif" alt="Required"/></td><td><input name="HyperlinktoFlare" type="text" id="MainContent_TextBox2" value="" style="width:168px;" /></td>
    </tr>

    <tr id="Flare2" style="display: none;"> <!--<span id="Flare2" style="display: none;">-->

    <td class="style17">
    Flare Priority <img src="req.gif" alt="Required"/></td><td>
    <select name="FlarePriority" id="MainContent_DropDownList2" onchange="changePriority(this.selectedIndex)" style="width:168px;">
    <option value="">-Select-</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>

    </select></td> <!--</span>--></tr><!--</span>-->

    <tr title="Dependency">
    <td class="style17">
    Dependency<img src="req.gif" alt="Required"/></td><td>
    <input name="Dependency" type="text" id="MainContent_TextBox4" value="" style="width:168px;" />
    </td></tr>


    <tr title="Developer">
    <td class="style17">
    Developer <img src="req.gif" alt="Required" />
    </td><!--<span title="Developer">-->
    <td>
    <input name="Developer" class="reqtext" type="text" id="Developer" value= "" style="width:168px;" />
    </td><!--</span>--></tr>

    <tr title="Dependency">
    <td class="style17">
    Unit Tester <img src="req.gif" alt="Required" />
    </td><!--span title="Dependency">-->
    <td>
    <input name="UnitTester" class="reqUnit" type="text" id="MainContent_TextBox6" value= "" style="width:168px;" />
    </td><!--</span>--></tr>
    <tr title="Developer">
    <td class="style17">
    Project Manager <img src="req.gif" alt="Required" />
    </td><!--<span title="Developer">
    --> <td>
    <input name="ProjectManager" type="text" id="MainContent_TextBox7" value= "" style="width:168px;" />
    </td><!--</span>--></tr>

    <tr><td><input type="button" value="Continue" onclick="verify();"></td><td><a class="menuitem" href="CDD_page1.aspx">Cancel</a>
    </td>
    </tr>

    <div id="CDD_page2">
    <code>
    <fieldset><legend>TEST STATUS AND REQUIREMENT</legend>
    <table class="style6">
    <tr title="Is the COMPILED CODE and SOURCE CODE correct?">
    <td class="style9">
    SIT&nbsp; Test&nbsp;&nbsp;&nbsp;&nbsp; Status&nbsp;&nbsp; <img src="req.gif" alt="Required"/> </td>
    <td class="style10">

    <select name="SITStatus" id="DropDownSIT" onchange="showSITtxtField(this,this.value)" style="width:168px;">
    <option value="">-Select-</option>
    <option value="Not Applicable">Not Applicable</option>
    <option value="In Progress">In Progress</option>
    <option value="On Hold">On Hold</option>
    <option value="Signed Off">Signed Off</option>

    </select>

    </td>
    </tr >

    <!-- <span id="SITN/A" style="display: none;">-->

    <tr title="Is the COMPILED CODE and SOURCE CODE correct?" id="SITN/A" style="display: none;">
    <td class="style11">
    What testing was done? <img src="req.gif" alt="Required"/></td>
    <td class="style4">
    <input name="testingDone" id="Text13" type="text" value= "" style="width:168px;"/></td>
    </tr>

    <!-- </span> -->

    <span id="UAT" style="display: inline;">
    <tr title="Is the COMPILED CODE and SOURCE CODE correct?">
    <td class="style11">
    UAT Test Status <img src="req.gif" alt="Required"/></td>
    <td class="style4">
    <select name="UATTest" id="DropDownUAT" onchange="showUATtxtField(this,this.value)" style="width:168px;">
    <option value="">-Select-</option>
    <option value="Not Applicable">Not Applicable</option>
    <option value="In Progress">In Progress</option>
    <option value="On Hold">On Hold</option>
    <option value="Signed Off">Signed Off</option>

    </select></td>
    </tr>
    </span>

    <!--<span >-->

    <tr title="Is the COMPILED CODE and SOURCE CODE correct?" id="UATN/A" style="display: none;">
    <td class="style11">
    What testing was done? <img src="req.gif" alt="Required"/></td>
    <td class="style4">
    <input name="testingDone2" id="Text13" type="text" value= "" style="width:168px;"/></td>
    </tr>
    <tr >
    <td><a class="menuitem" href="#CDD_page1">Back</a></td><td><a class="menuitem" href="CDD_page1.aspx">Cancel</a>
    </td><td><input type="button" value="Submit" onclick="mySubmit();"/></td>
    </tr>

    </table>


    </code>
    </div>


    </form>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    There is no reason for your tabs to work when using ASP and fail in HTML. That's because ASP ultimately generates the HTML code to send to the web browser.
    Where is your CSS styles sheet?

    Your <div id="CDD_page1"> should be closed before the <div id="CDD_page2"> starts as well as its corresponding (nested in) table.
    I suggest you format your HTML properly to start with.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles