[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Side Bar not appearing in the same row as the rest of the panels (appears on top row)

Posted on 2006-06-02
1
Medium Priority
?
236 Views
Last Modified: 2008-01-09
Hello , I have a web application in JSP where I have implemented the requsite functionality , but I am struggling with the Viewer.

I am to include a Side -Bar which acts as a Navigation to this specific Page .I am using the include directive to include another jsp/html page that should appear as a sideBar to the existing application.

I dived the page into 3 parts (after the header etc ..) out of which the first (20%) is the sidebar .

But what is happening is the other 2 panels (20 and 60) appear not as rows in the same level ..but appear below  the first row(side bar)



soemthing like :

First SideBar

SecondPanel   ThirdtPanel

Whereas I would like to have

First SideBar  SecondPanel ThirdtPanel


Sorry abt the lengthu code : Thanks for the time.


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@page contentType="text/html"%>
<%@taglib uri='/WEB-INF/cewolf.tld' prefix='cewolf' %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
       <title>Display Performance Statistics</title>
    <meta http-equiv="description" content="Displays the Requisite Graph">
    <link rel="stylesheet" href="css/main1.css" type="text/css">
      <link rel="stylesheet" href="css/main2.css" type="text/css">
 </head>
 
  <body
 
        style="background:#FFFFFF;"
        marginwidth="0"
      marginheight="0"
      leftmargin="0"
      topmargin="0"
      rightmargin="0"
      bottommargin="0"
 
  >
 
 <!-- --------------------------------------------------- TOP GIFS ---------- -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
    <td nowrap>
        <table width="500" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td ><img src="http://some/shared/$$$$$$.gif"></td>
        </tr>
       
        </table>
    </td>
</table>
 
 <!-- ---STRIPE -->
<table class="tablehead" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
      <td valign="middle" width="10"><img src="img/trans.gif" height="1"width="10"></td>
      <td valign="middle" width="100"><img src="img/trans.gif" height="1"width="10"></td>
      <td width="70%" height="25" align="center" valign="middle">
            <nobr>
                  
                  <span class="whitetitle"style="font-size:13pt;"/>
                  Webservices Statistics
                  </span>
            </nobr>
      </td>
      
      <td valign="middle" width="10"><img src="include/trans.gif" height="1"width="10"></td>

</tr>
</table>
 
 <!-- --------------------------------------------------- EMPTY SPACE SEPARATOR --- -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td height="10">&nbsp;</td></tr><tr><td height="10">&nbsp;</td></tr></table>
 
 
<!-- --------------------------------------------------- 3 PANELS TABLE ---- -->
<table border="0" width="100%" cellpadding="15">

<tr>

<td width="20%" valign="top">
      <table  border="0" cellspacing="0" cellpadding="0">
      <tr>
            <td ><%@include file="sidebar.jsp" %></td>
      </tr>
      </table>
</td>



</tr>

<tr>
<td width="20%" valign="top">
<!-- --------------------------------------------------- LEFT PANEL -------- -->
<table  border="0" cellspacing="0" cellpadding="0">
<tr>
      <td class="tablehead" width="6"><img src="img/sm_l.gif" width="6" height="6"></td>
      <td class="tablehead"><img src="img/trans.gif" width="1" height="1"></td>
      <td class="tablehead" width="6">
            <div align="right"><img src="img/sm_r.gif" width="6" height="6"></div>
      </td>
</tr>

<tr>
      <td class="tablehead" width="6"><img src="img/trans.gif" width="6" height="1"></td>
      <td class="tablehead">
            <!-- <div align="center"><span class="offwhite" style="color:#fbe249;font-size:11pt">Choose Graph Type</span></div> -->
            <div align="center"><span class="offwhite" style="font-size:11pt">Choose Graph Type</span></div>
      </td>
      <td class="tablehead" width="6"><img src="img/trans.gif" width="6" height="1"></td>
</tr>

<tr class="tableborder">
      <td colspan="3" class="tableborder"><img src="img/trans.gif" height="3" width="1"></td>
</tr>


<tr>
    <td class="tablebody" width="6"><img src="img/trans.gif" width="6" height="1"></td>
    <td class="tablebody">



<form action="graph.jsp">

      <table width="100%" border="0" cellspacing="0" cellpadding="4">
        <tr><td class="tablebody" valign="top" height="30" colspan="7">&nbsp;</td></tr>
            <tr>
                  <td width="15">&nbsp;</td>
                  <td width="150" align="right">
                        <span class="greenboldsmall"><nobr>Graph Type</nobr></span>
                  </td>
                  <td width="5">&nbsp;</td>
                  <td width="120" align="left">
                        <select name="graphType" scope="request">
                              <option>stackedVerticalBar3D</option>
                              <option>line</option>
                              <option>area</option>
                              <option>stackedverticalbar</option>
                              <option>horizontalbar</option>
                              <option>horizontalbar3d</option>
                              <option>stackedhorizontalbar</option>
                              <option>verticalbar</option>
                              <option>verticalbar3d</option>
                              
                        </select>
                  </td>
                  <td width="15">&nbsp;</td>
            </tr>
            
            <tr>
                  <td width="15">&nbsp;</td>
                  <td width="120" align="right"><br>
                        <input type="submit" border="0" class="buttongreen" style="text-align:center;width:70px;" value="Submit&nbsp;&raquo;&nbsp;" />
                  </td>
                  <td colspan="3">&nbsp;</td>
            </tr>
            <tr><td class="tablebody" colspan="7" height="30">&nbsp;</td></tr>
      </table>
 
 
        <jsp:useBean id="wsinfo" class="some.model.LogInfo" scope="session">
         <jsp:setProperty name="wsinfo" property="path" value="${initParam.filePath}" />
         <jsp:setProperty name="wsinfo" property="wsName" value="${param.name}" />
        </jsp:useBean>
        
        
        <jsp:useBean id="wsViews" class="some.model.WsViewCountData" scope="session">
         <jsp:setProperty name="wsViews" property="factorName" value="${param.name}" />
         <jsp:setProperty name="wsViews" property="wsList" value="${wsinfo.wsList}" />
        <jsp:setProperty name="wsViews" property="type" value="dayofweek" />
        </jsp:useBean>
 
 
      <jsp:useBean id="graphParam" class="some.bean.GraphBean"/>
      <jsp:setProperty name="graphParam" property="*" />


</form>

</td>
      <td class="tablebody" width="6"><img src="include/trans.gif" width="6" height="1"></td>
</tr>
<tr>
      <td class="tablebody" width="6"><img src="include/bl.gif" width="6" height="6"></td>
      <td class="tablebody"><img src="include/trans.gif" width="1" height="1"></td>
      <td class="tablebody" width="6">
      <div align="right"><img src="include/br.gif" width="6" height="6"></div>
      </td>
</tr>
</table>

   

</td>
<td width="80%" valign="top">

<!-- --------------------------------------------------- RIGHT PANEL ------- -->
<table  border="0" cellspacing="0" cellpadding="0">
<tr>
      <td class="tablehead" width="6"><img src="include/sm_l.gif" width="6" height="6"></td>
      <td class="tablehead"><img src="include/trans.gif" width="1" height="1"></td>
      <td class="tablehead" width="6">
            <div align="right"><img src="include/sm_r.gif" width="6" height="6"></div>
      </td>
</tr>

<tr>
      <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
      <td class="tablehead">
            <div align="center"><span class="offwhite" style="font-size:11pt">Type of Image</span></div>
      </td>
      <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
</tr>

<tr>
      <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
      <td>

            <table width="100%" border="0" cellspacing="0" cellpadding="15">
            <tr>
                  <td>
                  <br>
                        <c:choose>
                              <c:when test="${graphParam.graphType eq null}">
                              <cewolf:chart
                                  id="line"
                                  title="Page View Statistics"
                                  type="stackedVerticalBar3D"
                                  xaxislabel="Page"
                                  yaxislabel="Views">
                                  <cewolf:data>
                                      <cewolf:producer id="wsViews"/>
                                  </cewolf:data>
                              </cewolf:chart>
                              <p>
                              <cewolf:img chartid="line" renderer="cewolf" width="400" height="300"/>
                              </c:when>
                              
                              <c:otherwise>
                                    <cewolf:chart
                                  id="line"
                                  title="Page View Statistics"
                                  type="${graphParam.graphType}"
                                  xaxislabel="Page"
                                  yaxislabel="Views">
                                  <cewolf:data>
                                      <cewolf:producer id="wsViews"/>
                                  </cewolf:data>
                              </cewolf:chart>
                              <p>
                              <cewolf:img chartid="line" renderer="cewolf" width="400" height="300"/>
                              </c:otherwise>
                              
                        </c:choose>
                                                      
                        
                  </td>
            </tr>
            <tr><td height="150">&nbsp;</td></tr>
            </table>


      
      </td>
      <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
</tr>
<tr>
    <td class="tablehead" colspan="3"><img src="include/trans.gif" width="1" height="6"></td>
</tr>
</table>

   
</td>
</tr>



</table>

  </body>
</html>



&&&&&&&&&&&&&&&&&&&&

Side Bar :

<font size='5'>Topics</font><p>
  <table width='145'>
    <tr><td><a href='introduction.jsp'>
                         Introduction </a></td></tr>

    <tr><td><a href='underConstruction.jsp'>
                         Using Templates </a></td></tr>

    <tr><td><a href='underConstruction.jsp'>
                         Optional Content </a></td></tr>

    <tr><td><a href='underConstruction.jsp'>
                         Role-based Content </a></td></tr>

    <tr><td><a href='underConstruction.jsp'>
                         Nested Templates</a></td></tr>

    <tr><td><a href='underConstruction.jsp'>
                         Implementing Templates </a></td></tr>

  </table></p>
0
Comment
Question by:micro_learner
1 Comment
 
LVL 17

Accepted Solution

by:
gops1 earned 2000 total points
ID: 16821795
As a best practice, try indenting your code with tabs, it becomes easier to all in debugging and maintaining the code:
Some minor changes to your code, hope this is what you needed.

<html>
  <head>
       <title>Display Performance Statistics</title>
    <meta http-equiv="description" content="Displays the Requisite Graph">
    <link rel="stylesheet" href="css/main1.css" type="text/css">
     <link rel="stylesheet" href="css/main2.css" type="text/css">
 </head>
 
  <body
 
       style="background:#FFFFFF;"
       marginwidth="0"
     marginheight="0"
     leftmargin="0"
     topmargin="0"
     rightmargin="0"
     bottommargin="0"
 
  >
 
 <!-- --------------------------------------------------- TOP GIFS ---------- -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
    <td nowrap>
        <table width="500" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td ><img src="http://some/shared/$$$$$$.gif"></td>
        </tr>
       
        </table>
    </td>
</table>
 
 <!-- ---STRIPE -->
<table class="tablehead" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
     <td valign="middle" width="10"><img src="img/trans.gif" height="1"width="10"></td>
     <td valign="middle" width="100"><img src="img/trans.gif" height="1"width="10"></td>
     <td width="70%" height="25" align="center" valign="middle">
          <nobr>
               
               <span class="whitetitle"style="font-size:13pt;"/>
               Webservices Statistics
               </span>
          </nobr>
     </td>
     
     <td valign="middle" width="10"><img src="include/trans.gif" height="1"width="10"></td>

</tr>
</table>
 
 <!-- --------------------------------------------------- EMPTY SPACE SEPARATOR --- -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td height="10">&nbsp;</td></tr><tr><td height="10">&nbsp;</td></tr></table>
 
 
<!-- --------------------------------------------------- 3 PANELS TABLE ---- -->
<table border="1" width="100%" cellpadding="15">

<tr>

<td width="20%" valign="top">
     <table  border="0" cellspacing="0" cellpadding="0">
     <tr>
          <td ><%@include file="sidebar.jsp" %></td>
     </tr>
     </table>
</td>
<td width="20%" valign="top">
<!-- --------------------------------------------------- LEFT PANEL -------- -->
<table  border="0" cellspacing="0" cellpadding="0">
<tr>
     <td class="tablehead" width="6"><img src="img/sm_l.gif" width="6" height="6"></td>
     <td class="tablehead"><img src="img/trans.gif" width="1" height="1"></td>
     <td class="tablehead" width="6">
          <div align="right"><img src="img/sm_r.gif" width="6" height="6"></div>
     </td>
</tr>

<tr>
     <td class="tablehead" width="6"><img src="img/trans.gif" width="6" height="1"></td>
     <td class="tablehead">
          <!-- <div align="center"><span class="offwhite" style="color:#fbe249;font-size:11pt">Choose Graph Type</span></div> -->
          <div align="center"><span class="offwhite" style="font-size:11pt">Choose Graph Type</span></div>
     </td>
     <td class="tablehead" width="6"><img src="img/trans.gif" width="6" height="1"></td>
</tr>

<tr class="tableborder">
     <td colspan="3" class="tableborder"><img src="img/trans.gif" height="3" width="1"></td>
</tr>


<tr>
    <td class="tablebody" width="6"><img src="img/trans.gif" width="6" height="1"></td>
    <td class="tablebody">



<form action="graph.jsp">

     <table width="100%" border="0" cellspacing="0" cellpadding="4">
        <tr><td class="tablebody" valign="top" height="30" colspan="7">&nbsp;</td></tr>
          <tr>
               <td width="15">&nbsp;</td>
               <td width="150" align="right">
                    <span class="greenboldsmall"><nobr>Graph Type</nobr></span>
               </td>
               <td width="5">&nbsp;</td>
               <td width="120" align="left">
                    <select name="graphType" scope="request">
                         <option>stackedVerticalBar3D</option>
                         <option>line</option>
                         <option>area</option>
                         <option>stackedverticalbar</option>
                         <option>horizontalbar</option>
                         <option>horizontalbar3d</option>
                         <option>stackedhorizontalbar</option>
                         <option>verticalbar</option>
                         <option>verticalbar3d</option>
                         
                    </select>
               </td>
               <td width="15">&nbsp;</td>
          </tr>
         
          <tr>
               <td width="15">&nbsp;</td>
               <td width="120" align="right"><br>
                    <input type="submit" border="0" class="buttongreen" style="text-align:center;width:70px;" value="Submit&nbsp;&raquo;&nbsp;" />
               </td>
               <td colspan="3">&nbsp;</td>
          </tr>
          <tr><td class="tablebody" colspan="7" height="30">&nbsp;</td></tr>
     </table>
 
 
       <jsp:useBean id="wsinfo" class="some.model.LogInfo" scope="session">
        <jsp:setProperty name="wsinfo" property="path" value="${initParam.filePath}" />
        <jsp:setProperty name="wsinfo" property="wsName" value="${param.name}" />
       </jsp:useBean>
       
       
       <jsp:useBean id="wsViews" class="some.model.WsViewCountData" scope="session">
        <jsp:setProperty name="wsViews" property="factorName" value="${param.name}" />
        <jsp:setProperty name="wsViews" property="wsList" value="${wsinfo.wsList}" />
       <jsp:setProperty name="wsViews" property="type" value="dayofweek" />
       </jsp:useBean>
 
 
     <jsp:useBean id="graphParam" class="some.bean.GraphBean"/>
     <jsp:setProperty name="graphParam" property="*" />


</form>

</td>
     <td class="tablebody" width="6"><img src="include/trans.gif" width="6" height="1"></td>
</tr>
<tr>
     <td class="tablebody" width="6"><img src="include/bl.gif" width="6" height="6"></td>
     <td class="tablebody"><img src="include/trans.gif" width="1" height="1"></td>
     <td class="tablebody" width="6">
     <div align="right"><img src="include/br.gif" width="6" height="6"></div>
     </td>
</tr>
</table>

   

</td>
<td width="80%" valign="top">

<!-- --------------------------------------------------- RIGHT PANEL ------- -->
<table  border="0" cellspacing="0" cellpadding="0">
<tr>
     <td class="tablehead" width="6"><img src="include/sm_l.gif" width="6" height="6"></td>
     <td class="tablehead"><img src="include/trans.gif" width="1" height="1"></td>
     <td class="tablehead" width="6">
          <div align="right"><img src="include/sm_r.gif" width="6" height="6"></div>
     </td>
</tr>

<tr>
     <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
     <td class="tablehead">
          <div align="center"><span class="offwhite" style="font-size:11pt">Type of Image</span></div>
     </td>
     <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
</tr>

<tr>
     <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
     <td>

          <table width="100%" border="0" cellspacing="0" cellpadding="15">
          <tr>
               <td>
               <br>
                    <c:choose>
                         <c:when test="${graphParam.graphType eq null}">
                         <cewolf:chart
                             id="line"
                             title="Page View Statistics"
                             type="stackedVerticalBar3D"
                             xaxislabel="Page"
                             yaxislabel="Views">
                             <cewolf:data>
                                 <cewolf:producer id="wsViews"/>
                             </cewolf:data>
                         </cewolf:chart>
                         <p>
                         <cewolf:img chartid="line" renderer="cewolf" width="400" height="300"/>
                         </c:when>
                         
                         <c:otherwise>
                              <cewolf:chart
                             id="line"
                             title="Page View Statistics"
                             type="${graphParam.graphType}"
                             xaxislabel="Page"
                             yaxislabel="Views">
                             <cewolf:data>
                                 <cewolf:producer id="wsViews"/>
                             </cewolf:data>
                         </cewolf:chart>
                         <p>
                         <cewolf:img chartid="line" renderer="cewolf" width="400" height="300"/>
                         </c:otherwise>
                         
                    </c:choose>
                                             
                   
               </td>
          </tr>
          <tr><td height="150">&nbsp;</td></tr>
          </table>


     
     </td>
     <td class="tablehead" width="6"><img src="include/trans.gif" width="6" height="1"></td>
</tr>
<tr>
    <td class="tablehead" colspan="3"><img src="include/trans.gif" width="1" height="6"></td>
</tr>
</table>

   
</td>
</tr>



</table>

  </body>
</html>
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question