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

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 443
  • Last Modified:

Masterpage align nested table with Main table.

Hi,
I am attempting to build my first web site using VB 2008/ASP.
I have a main table that has two rows. The first row has 3 columns, the second is spanned so that it is one row.  In that row I inserted another table w/ 5 columns.
I am having problems aligning the top table with the bottom table and getting the 2nd to the right column to resize to 150px.
I've attached a screen shot and the code I am currently using.
Thanks
<%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="MasterPages_Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        
        .site
        {
            width: 100%;
            height:100%;
           
        }
        
        .tableinsite
        {
            width: 94%;
            height:100%;
           
        }
        
        .header 
        {
            width: 62%;
            height:125px;
            vertical-align:middle;
            border-width:medium;
            border-left-color:Black;
            border-right-color:#909090;
         
            margin:0 0 0 0;
            
            
        }
        
        .sideborders
        {
            width: 2%;
            vertical-align:top;
        }
        
         .lsideborders
        {
            width: 2%;
            vertical-align:top;
            border-width:medium;
            border-left-color:Black;
            border-right-color:#909090;
            border-top-color:Black;
            border-bottom-color:Black;
            margin:0 0 0 0;
            
            
        }
        
        
         .rsideborders 
        {
            width: 2%;
            vertical-align:top;
            border-width:medium;
            border-left-color:#909090;
            border-right-color:Black;
            border-top-color:Black;
            border-bottom-color:Black;
            margin:0 0 0 0;
            
        }
        .sidepanels
        {
            width: 10%;
            vertical-align:top;
            height:auto;
            border-left-width:thin;
            border-left-color:Black;
            margin:0 0 0 0;
        }
        
        .righttickers
        {
            width: 150px;
            vertical-align:top;
            height:auto;
            border-left-width:thin;
            border-left-color:Black;
        }
        .ContentMiddle
        {
            width: 40%;
            border-width:medium;
            border-left-color:Black;
            border-right-color:#909090;
            border-top-color:Black;
            border-bottom-color:Black;
        }
        
         .divcenter
        {
            width: 100%;
            height:100%;
        }
        
         .darkcells
        {
        	
        	background-color:black;
            height:30px;
            width:62%;
            padding:0 0 0 0;
        }
       
        </style>
    <script language="JavaScript" type="text/javascript">  
   
 window.onload = maxWindow;  
   
 function maxWindow()  
 {  
     window.moveTo(0,0);  
     if (document.all)  
     {  
         top.window.resizeTo(screen.availWidth,screen.availHeight);  
     }  
     else if (document.layers||document.getElementById)  
     {  
         if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth)  
         {  
            top.window.outerHeight = screen.availHeight;  
            top.window.outerWidth = screen.availWidth;  
         }  
     }  
 }  
 </script>  
</head>
<body>
    
    <form id="form1" runat="server">
    
    <div>
    <table cellpadding="0" cellspacing="0" class="site">
        <tr>
            <td class="lsideborders" align="center" 
                
                
                style="border-right-style: solid; border-right-width: medium; border-right-color: #000000; ">
                <img alt="" width="78px" align="middle"  height="125px"  
                    src="../Images/LSideTopOut.png" /></td>
            <td class="header" align="left">
                <img alt="" width="100%" height="125px" src="../Images/HeaderCommercial.png" 
                    align="left" /></td>
            <td class="rsideborders" align="center">
                <img alt="" align="middle" width="78px" height="125px" src="../Images/RSideTopOut.png" /></td>
        </tr>
        <tr>
            <td colspan="3">
                <table cellpadding="0" cellspacing="0"  class="site">
                    <tr valign="top">
                        <td class="lsideborders" align="center"  rowspan="5">
                            <img alt="" width="78px" align="middle" src="../Images/LSideOut.png" /></td>
                        <td class="darkcells" valign="top" align="center"  colspan="3" >
                            
                            </td>
                        <td class="rsideborders" align="center" rowspan="5">
                            <img align="middle" width="78px" alt="" src="../Images/RSideOut.png" /></td>
                    </tr>
                    <tr>
                        
                        <td class="sidepanels" align="left" rowspan="2" 
                            
                            
                            style="border-left-style: solid; border-left-width: thin; border-left-color: #000000" 
                            bgcolor="Black">
                            <img alt="" width="100%" height="100%" src="../Images/LMenuBarPanel.png" /></td>
                        <td class="ContentMiddle" 
                            style="border-left-style: solid; border-left-width: thick; border-left-color: #000000">
                            &nbsp;</td>
                        <td class="righttickers" width="150px" align="right" bgcolor="Black">
                        
                        
                        
                        <!-- MLCALC RATES BEGIN -->
                        <script type="text/javascript">                            document.write(unescape("%3Cscript src='" + (document.location.protocol == 'https:' ? 'https:' : 'http:') + "//www.mlcalc.com/jquery.js' type='text/javascript'%3E%3C/script%3E"));</script><div style="font-weight:normal;font-size:9px;font-family:Tahoma;padding:0;margin:0;border:0;background:transparent;color:#E5E5E5;width:150px;text-align:center;" id="mlcalcRatesWidgetHolderXX"><script type="text/javascript">                                                                                                                                                                                                                                                                                                                                                                                                                                                           document.write(unescape("%3Cscript src='" + (document.location.protocol == 'https:' ? 'https:' : 'http:') + "//www.mlcalc.com/mortgage-rates/widget-narrow.js' type='text/javascript'%3E%3C/script%3E"));</script>Powered by <a href="http://www.mlcalc.com/mortgage-rates/" style="color:#E5E5E5;text-decoration:none">Interest Rates</a></div>
                        <!-- MLCALC RATES END -->                     
                        
                        
                        
                        
                        
                        
                         </td>   
                    </tr>
                    <tr>
                       
                        <td class="ContentMiddle" 
                            style="border-left-style: solid; border-left-width: thick; border-left-color: #000000">
                            &nbsp;</td>
                        <td class="righttickers" width="150px" align="right" valign="top" bgcolor="Black">
                        
                        <!-- MLCALC BEGIN -->
                        <script type="text/javascript"><!--
                            mlcalc_default_calculator = 'loan';
                            mlcalc_currency_code = 'usd';
                            mlcalc_amortization = 'year_nc';
                        //--></script>
                        <script type="text/javascript">                            document.write(unescape("%3Cscript src='" + (document.location.protocol == 'https:' ? 'https:' : 'http:') + "//www.mlcalc.com/jquery.js' type='text/javascript'%3E%3C/script%3E"));</script>
                        <div style="font-weight:normal;font-size:9px;font-family:Tahoma;padding:0;margin:0;border:0;background:transparent;color:#E5E5E5;width:150px;text-align:center;" id="Div2">
                        <script type="text/javascript">                            document.write(unescape("%3Cscript src='" + (document.location.protocol == 'https:' ? 'https:' : 'http:') + "//www.mlcalc.com/widget-narrow.js' type='text/javascript'%3E%3C/script%3E"));</script>Powered by <a href="http://www.mlcalc.com/" style="color:#E5E5E5;text-decoration:none">Loan Calculator</a></div>
                        <!-- MLCALC END -->                        
                        

                            </td>   
                        
                    </tr>
                    <tr>
                        <td class="sidepanels">
                        
                            &nbsp;</td>
                        <td class="ContentMiddle">
                            &nbsp;</td>
                        <td class="righttickers" width="150px">
                            &nbsp;</td>   
                    </tr>
                    <tr>
                        <td class="sidepanels">
                            &nbsp;</td>
                        <td class="ContentMiddle">
                            &nbsp;</td>
                        <td class="righttickers" width="150px">
                            &nbsp;</td>   
                    </tr>
                </table>
            </td>
        </tr>
    </table>
     </div>  
    </form>
 
</body>
</html>

Open in new window

WebPicture.png
0
Sheritlw
Asked:
Sheritlw
  • 5
  • 5
1 Solution
 
Bob LearnedCommented:
I don't quite get the layout requirements, but I always feel that a single HTML table can sometimes serve my purpose more easily than multiple ones...
0
 
SheritlwAuthor Commented:
Hi TheLearnedOne,

My intention is the have a centered website where the side bars - outside portion (the two long grey gradient images) fill the exterior of the site.
I then wanted to have columns next to the side bars to be a set width.  The left side, with the picture of woman with bad credit, works fine.  The right side, with mortgage rates, I can't seem to get to resize.
When I run the web and the screen is maximized, the top portion (Header and small grey gradient images) which is table 1, everything is aligned great.  
When I resize the screen, the top portion (Table 1) doesn't align with the nested table (table 2) that holds all the body info i.e. long gradient bars, side panels (Bad Credit picture, mortgage rates) and the center,
Not sure why this is happening.
Thanks
0
 
Bob LearnedCommented:
Can you attach a .png screen shot from the designer, that shows how the table is laid out?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
SheritlwAuthor Commented:
Absolutely... see attached and thank you
DesignerPicture.png
0
 
Bob LearnedCommented:
OK, I forgot to suggest that it might be useful to show where the alignment is off...

Here is a suggested layout, with a single table:


<table style="width: 800px;height: 600px;font-family: Verdana;" cellpadding="0" cellspacing="0">
            <tr style="height: 100px;">
                <td style="width: 100px;background-color: Silver;"></td>
                <td colspan="3" style="background-color: Teal;text-align:center;font-size: x-large;font-weight: 700;">Logo</td>
                <td style="width: 100px;background-color: Silver;"></td>
            </tr>
            <tr style="height: 50px;background-color: Black;">
                <td style="width: 100px;background-color: Silver;"></td>
                <td colspan="3"></td>
                <td style="width: 100px;background-color: Silver;"></td>
            </tr>
            <tr style="height: 300px;">
                <td style="width: 100px;background-color: Silver;"></td>
                <td rowspan="2" style="width: 80px;background-color: Black;"></td>
                <td rowspan="2" style="text-align:center;">Content</td>
                <td style="width: 120px;background-color: Black;"></td>
                <td style="width: 100px;background-color: Silver;"></td>
            </tr>
            <tr style="height: 100px;">
                <td style="width: 100px;background-color: Silver;"></td>
                <td style="width: 120px;background-color: Black;"></td>
                <td style="width: 100px;background-color: Silver;"></td>
            </tr>
        </table>

Open in new window

1-7-2010-15-13-35.png
0
 
SheritlwAuthor Commented:
Sorry, I should have circled the areas on the first picture.
I am reloading it.
The pictures shows it in a browser.  When it's not maximized, the red circled sides don't link up.

Thanks for your help
WebPicture.png
0
 
Bob LearnedCommented:
How are the tables defined?  One in the master page, and another in the content page?  How are the tables defined (border, cellPadding, cellSpacing, width, height, ...)?
0
 
SheritlwAuthor Commented:
When I created the masterpage I deleted the content place holder and inserted a 3 column/2 Row table in the Div.
I merged the 2nd rows columns to create one long cell.  I then inserted a 5 column/5 row table within that cell.
Both tables are defined with 0 cell padding, 0 spacing and 100% width and height.
Thanks
0
 
Bob LearnedCommented:
Can you show me the simplified HTML for that layout (like I included above)?
0
 
SheritlwAuthor Commented:
I took your advice and created one primary table.  I did insert another table in a side panel for menu items.

Thanks for your help
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now