Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Oct 2002
    Posts
    178
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Attempting to switch from frames to tables

    I'm attempting to convert from a frames based site to a tables based site to avoid the headaches associated with frames.

    However, I'm running into a couple of different snags.

    The top row would be the header, the second row would be split into 2 columns w/ the nav menu down the left side and the content on the right last but not least, their would be a footer across the bottom.

    Now the problems:
    • How can I make it so that if the middle row doesn't take up enough room to fill the browser window, the footer row is forced to the bottom of the browser window. If the middle row takes up enough space to cause the browser to scroll, the footer row would just go below the content as far down as it needs to be.
    • I want to use style sheets so that if I need to make changes, I won't have to change EVERY page. With the exception of the background this worked fine using classes. The body content cells should be Blue text on white background while the OTHER cells should all be white text on blue background.

    I attempted to do this through nested tables--not quite sure if I went about that the right way though.

    Here's the code I've come up with so far:
    Code:
    <!DOCTYPE HTML PUBLIC "-//SoftQuad Software//DTD HoTMetaL PRO 6.0::19990601::extensions to HTML 4.0//EN" "hmpro6.dtd">
    <HTML> 
      <HEAD> 
        <TITLE></TITLE>
       <LINK REL="stylesheet" TYPE="text/css" HREF="StyleSheets/Styles.css"> 
      </HEAD> 
      <BODY> 
        <TABLE CLASS="nav" WIDTH="100%" HEIGHT="100%"> <!-- First Table  -->
          <TR HEIGHT="30"> 
            <TD  ALIGN="LEFT"> <H1>Welcome to My Site </H1></TD> 
          </TR> 
          <TR> 
            <TD>
              <TABLE WIDTH="100%" HEIGHT="*"> <!-- Second Table  --> 
                <TR>
                  <TD WIDTH="50"> ROW 2 COL 1</TD> 
                  <TD CLASS="normal">
                    <TABLE WIDTH="100%" CLASS="normal"> <!-- Third Table  -->
                      <TR><TD VALIGN="TOP"><P>ROW 2 COL 2</P></TD></TR>
                    </TABLE> <!-- End Third Table  --></TD>
                  </TR>
                </TABLE> <!-- End Second Table  --></TD>
              </TR>
              <TR HEIGHT="10"><TD ALIGN="CENTER">Copyright 2002 Don I, All rights reserved.</TD>
               </TR>
             </TABLE> <!-- End First Table  -->
           </BODY>
    </HTML>
    The CSS page:
    Code:
    @media screen
    {
    .normal{
    ul.star {list-style-image: url(images/star.jpg);}
    a:link{text-decoration: none; color: #000066; margin-left: 5px}
    a:visited{text-decoration: none; color: #000066; margin-left: 5px}
    a:hover{text-decoration: underline; color: #000066; margin-left: 5px}
    h1,h2,h3,h4 {color: #000099; margin-left: 5px}
    table,tr,td,p {color: #0000CC; margin-left: 5px}
    hr{margin-left: 3px;margin-right: -1px;}
    }}
    @media print
    {.normal{
    ul.star {list-style-image: url(images/star.jpg);}
    a:link,a:visited,a:hover,h1,h2,h3,h4,p,body{background-color:  #FFFFFF}
    a:link{text-decoration: none; color: #000000; margin-left: 5px}
    a:visited{text-decoration: none; color: #000000; margin-left: 5px}
    a:hover{text-decoration: underline; color: #000000; margin-left: 5px}
    table,tr,td,h1,h2,h3,h4 {color: #000000; margin-left: 5px}
    p {color: #000000; margin-left: 5px}
    }}
    
    
    @media screen
    {.nav{
    ul.star {list-style-image: url(images/star.jpg);}
    a:link,a:visited,a:hover,h1,h2,h3,h4,p,body{color: #ffffff}
    a:link{text-decoration: none; color: #ffffff}
    a:visited{text-decoration: none; color: #ffffff}
    a:hover{text-decoration: overline underline; color: #FFFF00}
    a:link,a:visited,a:hover,h1,h2,h3,h4,p{color: #ffffff;background-color: #0000cd;}
    }}
    
    @media print
    {.nav{
    ul.star {list-style-image: url(images/star.jpg);}
    a:link{text-decoration: none; color: #ffffff}
    a:visited{text-decoration: none; color: #ffffff}
    a:hover{text-decoration: overline underline; color: #FFFF00}
    }}
    Thanks again.
    Last edited by doni; 11-18-2002 at 03:05 AM.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm.. without looking at your page, the only thing that I could suggest would be to make your table width 100%.

    Can you give us a URL?
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)

  • #3
    Regular Coder
    Join Date
    Oct 2002
    Posts
    178
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Whammy,

    I'll attempt to fix the indents right now--when I posted, I didn't expect them to come out like that.

    The reason I was editing the post was that I realized that I hadn't put the CSS content--instead I had reposted the HTML code.

    Thanks.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ugh, I apologize too... I deleted my above post.

    It's just that sloppy indentation (and tag capitalization) annoys me to no end, since I have to deal with other developers' sloppy code at work.



    I think what you should do, before trying to convert every page, is make a template (one page only, with NO content except maybe "test test") - of what you want the site to look like, with 100% width tables or whatever.

    That way, you know it works BEFORE you try to convert the entire site over.
    Last edited by whammy; 11-18-2002 at 02:53 AM.
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)

  • #5
    Regular Coder
    Join Date
    Oct 2002
    Posts
    178
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Originally posted by whammy
    Ugh, I apologize too... I deleted my above post.

    It's just that sloppy indentation (and tag capitalization) annoys me to no end, since I have to deal with other developers' sloppy code at work.

    As someone who's done some programming, it does the same to me. When I saw the way it looked in the text area window, I assumed that was the result of the area properties. After I saw your post, I looked again and saw that I was wrong.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hhehehe, I hear you. I guess I should edit my posts when someone else is posting. LOL

    Anyway, I would suggest making ONE page, that you want the entire website to conform to. Get that working right first, then you can just include the contents of the other pages.

    That's what I would do, although I'm doing that right now with my website and it becomes a bit problematic if someone included dynamic server-side stuff in the template like I did originally.
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)

  • #7
    Regular Coder
    Join Date
    Oct 2002
    Posts
    178
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Originally posted by whammy
    Hhehehe, I hear you. I guess I should edit my posts when someone else is posting. LOL

    Anyway, I would suggest making ONE page, that you want the entire website to conform to. Get that working right first, then you can just include the contents of the other pages.
    That was my intention.

    I think I've fixed the indents in such a way that you should be able to figure it out. I also added comments to help keep track of the tables I put in. Also, note that there are 3 three tables:
    [list=1][*]The whole page[*]The second row[*]The Second column of the second row.[/list=1]

    Thanks again.

    Don

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perhaps this kind of formatting will clear things up for you. :

    Code:
    <!DOCTYPE HTML PUBLIC "-//SoftQuad Software//DTD HoTMetaL PRO 6.0::19990601::extensions to HTML 4.0//EN" "hmpro6.dtd">
    <html> 
         <head> 
              <title></title>
              <link rel="stylesheet" type="text/css" href="StyleSheets/Styles.css"> 
         </head> 
         <body> 
              <table class="nav" width="100%" height="100%"> <!-- First Table     -->
                   <tr height="30"> 
                        <td align="left"><h1>Welcome to My Site </h1></td> 
                   </tr> 
                   <tr> 
                        <td>
    <!-- Second Table --> 
                             <table width="100%" height="*">
                                  <tr>
                                       <td width="50"> ROW 2 COL 1</td> 
                                       <td class="normal">
    <!-- Third Table     -->
                                            <table width="100%" class="normal">
                                                 <tr>
                                                      <td valign="TOP"><p>ROW 2 COL 2</p></td>
                                                 </tr>
                                            </table>
    <!-- End Third Table     -->
                                       </td>
                                  </tr>
                             </table>
    <!-- End Second Table -->
                        </td>
                   </tr>
                   <tr height="10"><td align="CENTER">Copyright 2002 Don I, All rights reserved.</td>
                   </tr>
             </table>
    <!-- End First Table -->
         </body>
    </html>
    I know it looks a lot less confusing to me - and with that kind of indentation you don't need the comments, really.
    Last edited by whammy; 11-18-2002 at 03:17 AM.
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry if I seem anal about indentation, but that preserves my sanity when I'm looking at someone else's code. Perhaps after my last post you'll agree.
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)

  • #10
    Regular Coder
    Join Date
    Oct 2002
    Posts
    178
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Any success?

    Your efforts have been appreciated.

    Thanks.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    41° 8' 52" N -95° 53' 31" W
    Posts
    3,660
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm, actually, table height is deprecated anyway - I'd do a search for jkd's posts using "table height" as a keyword - you get a very nice solution:

    http://www.codingforums.com/showthre...&threadid=9963

    Hope this helps!
    Former ASP Forum Moderator - I'm back!

    If you can teach yourself how to learn, you can learn anything. ;)

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    while framed layout is definetely stone age, tables are outdated as well. If you taking up the task of redesigning your site, why not do it with css
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"


  •  

    Posting Permissions

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