...
PDA

Attempting to switch from frames to tables

doni
11-18-2002, 02:36 AM
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:
<!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:
@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.
whammy
11-18-2002, 02:42 AM
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? :D
doni
11-18-2002, 02:47 AM
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.
whammy
11-18-2002, 02:49 AM
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. :)
doni
11-18-2002, 02:52 AM
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.
whammy
11-18-2002, 02:55 AM
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. :(
doni
11-18-2002, 03:08 AM
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
whammy
11-18-2002, 03:13 AM
Perhaps this kind of formatting will clear things up for you. ;) :


<!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. :D
whammy
11-18-2002, 03:16 AM
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. :D
doni
11-22-2002, 11:22 PM
Any success?

Your efforts have been appreciated.

Thanks.
whammy
11-22-2002, 11:33 PM
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/showthread.php?s=&threadid=9963

Hope this helps!
Vladdy
11-23-2002, 12:23 AM
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 :confused: :confused:

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum