Forum Moderators: open
(Note: This is taken from the browser source, this is what the browser is seeing).
---Code---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>MM ¦ Version 5 Demo Version 5 ¦¦ Evolution</title>
<link rel="stylesheet" href="mmcss2.css" type="text/css">
</head>
<body>
<!--
A DHTML Website Navigation Menu Version 5.0+
Copyright 2004 (c) Some Solutions Limited (UK). All Rights Reserved.
-->
<script type="text/javascript" src="/menu2/src.js"></script>
<scripttype="text/javascript">
if(ns4)_d.write("<script language=JavaScript src=/menu2/mmenuns4.js><\/script>");
else _d.write("<script language=JavaScript src=/menu2/mmenudom.js><\/script>");
</script>
<script type="text/javascript" src="/menu2/menu_data.js"></script>
<center><font size="1"><a href="link" class="top">Menu provided by Someone</a></font></center>
<br>
<div align="center">
<table width="750">
<tr><td colspan="3">
<center>
<center><div style="text-align:center;width:740px; background-color:#000066;"><img src="/link" alt="Top Image"></div></center>
<font size="1">Currently this site is for Windows (Specifically Windows 98/ME/XP).</font></center>
<br>
<br>
<!-- Side Banner -->
</td></tr>
<tr><td colspan="3">
<table width="750">
<tr>
<td width="150" valign="top">
<p class="navi">
<b>Version:</b>
<br>
5.00.00.00 Demo
</p>
<p class="navi">
<b>Navigation:</b>
<br>
<a href="/link">Staff</a>
<br>
<a href="/link">About</a>
<br>
<a href="/link">Affiliates</a>
<br>
<a href="/link">Site Version?</a>
<br>
<a href="/link">Previous Layouts</a>
<br>
<a href="/v5/">Version 5?</a>
</p>
<p class="navi">
<b>Project Guardian:</b>
<br>
<a href="/link">Home</a>
<br>
<a href="/link">Anti-Virus</a>
<br>
<a href="/link">Online Protection</a>
<br>
<a href="/link">Dialers</a>
<br>
<a href="/link">Spam E-mail</a>
<br>
<a href="/link">Wireless Connection</a>
<br>
<a href="/link">Various Tips</a>
</p>
<p class="navi">
<b>Contact:</b>
<br>
<a href="link">E-Mail</a>
<br>
<a href="link">AOL Messenger</a>
<br>
<a href="link">Yahoo! Messenger</a>
</p>
<p class="navi">
<b>Misc:</b>
<br>
<a href="link">Help Wanted</a>
<br>
<a href="/link">Site look wrong?</a>
</p>
</td>
<!-- Main Table -->
<td width="450" valign="top">
<p>This is a demo Version 5. I hope to include a new system and
smaller coding to help everyone out. I am still coding and debugging this demo, please keep
checking back to see my progress.</p>
<p>
I will be doing a lot of work on this section for awhile. This will consist
of buiding and debugging the new system. Then I must make the actual code I will be using, then make the
layout. After I complete that I will concentrate on Version 4 while
I slowly change all current pages to the v5 code.</p>
<p>I know what your asking yourself, "I see no difference". Well there is, you just can't see it yet. I'll explain below\:</p>
<p>
<ul style="list-style-image: url(/images/arrow2.gif);">
<li> New Code - Code 4.0
<li> New CSS Code - CSS Code 2.0
<li> Php Templates - One page of code, the other pages are just content.
<li> Dynamic pages - Calling up pages with information not provided in the template or content pages.
<li> Easier to update pages - Updating pages and layouts will take minutes.
<li> New layout designs - (Currently being worked on).
</ul>
</p>
<p>
Lots of things being added to Version 5. I personally can't wait for it to be done, the time and work
i'm putting into it should really pay off. I have alot in store for Version 5 and hope I can create it. I wanted alot more
then will be put up but I'm pushing myself to the limits to create something to blow the doors open haha.</p>
</td>
<!-- Side Bar Begin -->
</td>
<td width="150" valign="top">
<center><a href="link" target=_blank><img src="link" alt="Against TCPA"></a></center>
<p></p>
<center>
<a href="link" title="Get Firefox - The Browser, Reloaded.">
<img src="link"
width="110" height="32" alt="Get Firefox"></a>
</center>
<p class="navi">
...Content...
</p>
</td>
</tr>
<tr>
<td colspan="3">
<br>
<br>
<br>
<br>
<center>
<small>
<small>
<script type="text/javascript"><!--
google_ad_client = "pub-0542779060331684";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_channel ="";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<p></p>
<!-- Start "Layout" Copyright Code -->
<a href="link">Menu provided by Someone</a>
<br>
<br>
<br>
Monthly Maintenance
<!-- End "Layout" Copyright Code -->
</small>
</small>
</center>
</td>
</tr>
</table>
</div>
</body>
</html>
---End Code---
For another thing I ran this page through the WC3 validator it is now 100% validated. Taht's not the problem...
Another thing is some things are controlled by the CSS, i'll post it just because it may have an error I overlooked (but i doubt it)
---CSS---
A:link
{
text-decoration: underline;
color: #000066;
}
A:visited
{text-decoration: underline;
color: #000066;
}
A:active
{text-decoration: underline;
color: #000066;
}
A:hover
{
text-decoration: underline;
color: #000066;
}
a.top:link
{
text-decoration: none;
color: #ffffff;
}
a.top:visited
{
text-decoration: none;
color: #ffffff;
}
a img
{
border: none;
}
p
{
text-indent: 20px;
text-align: left;
font-family: times new roman;
color: #000066;
}
body
{
background: #FFFFFF;
font-family: times new roman;
font-size: 12pt;
color: #000066;
scrollbar-face-color : #000066;
scrollbar-highlight-color : #0000AA;
scrollbar-3dlight-color : #0000CC;
scrollbar-shadow-color : #000044;
scrollbar-darkshadow-color : #000022;
scrollbar-track-color : #F0F7FF;
scrollbar-arrow-color : #F0F7FF;
}
td
{
text-align: left;
font-family: times new roman;
font-size: 12pt;
color: #000066;
}
.navi
{
text-indent: 0px;
font-family: times new roman;
font-size: 12pt;
color: #000066;
}
---End CSS---
If you can solve this then you are a GOD. If you can re-work the code where teh tables will move around on there own (like a div setup... I don't know how to do one of those -.-) then THAT is just as helpful. I need informationi ASAP i'm running behind on my site project!
Thank you.
[edited by: BlobFisk at 12:25 pm (utc) on Aug. 22, 2004]
[edit reason] Examplified Post [/edit]
And one of those tables (the second one) have no </table> tag.
[Added: Also, try setting cellpadding and cellspacing. If you don't, every browser adds a default value (2 or 3 px) for both. That would make your second table to mathematically not really fit in the first one.]
The top loads fine, the left "td" loads fine. the middle "td" loads fine, but the right "td" sticks way to the left, when it should be away.
As for the cellpadding and spacing all of this is one or two tables with 3 table data's, cellpadding and spacing wouldn't work... would it, since that's a table command, not a TD command.
When you process the code look at the right "navigation table". it's so close to the middle content... Whenever I try to pull it away... it won't.
I probably should goto DIV's or 3 independent tables shouldn't I?
Rather than worrying about the nested table errors, I would eliminate the 2nd table altogether, since you can use the table's colspan to accomplish the full header and footer areas with the columns in the middle. I would consider going with something like this:
<table border="0" cellpadding="0" cellspacing=0 width="750"><tr><td colspan="3" valign="top">
<!-- full-wide content Header -->
</td></tr><tr><td width="150" valign="top">
<!-- left column -->
</td><td width="450" valign="top">
<!-- center column -->
</td><td width="150" valign="top">
<!-- right column -->
</td></tr><tr><td colspan="3" valign="top">
<!-- full-wide content Footer -->
</td></tr></table>
Of course CSS would probably be a better solution (and faster to download), but the above should fix the table errors.
Steve
hope it helps
henry
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>MM ¦ Version 5 Demo Version 5 ¦¦ Evolution</title>
<link rel="stylesheet" href="mmcss2.css" type="text/css">
</head>
<body>
<!--
A DHTML Website Navigation Menu Version 5.0+
Copyright 2004 (c) Some Solutions Limited (UK). All Rights Reserved.
-->
<script type="text/javascript" src="/menu2/src.js"></script>
<scripttype="text/javascript">
if(ns4)_d.write("<script language=JavaScript src=/menu2/mmenuns4.js><\/script>");
else _d.write("<script language=JavaScript src=/menu2/mmenudom.js><\/script>");
</script>
<script type="text/javascript" src="/menu2/menu_data.js"></script>
<center><font size="1"><a href="link" class="top">Menu provided by Someone</a></font></center>
<br>
<div align="center">
<table width="750" border="1">
<tr><td colspan="3">
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" valign="top">
<!-- announcement -->
<tr>
<td colspan="3" align="center" valign="top"
<center>
<center><div style="text-align:center;width:740px; background-color:#000066;"><img src="/link" alt="Top Image"></div></center>
<font size="1">Currently this site is for Windows (Specifically Windows 98/ME/XP).</font></center>
<br>
<br>
</td></table>
</td></tr>
<!-- Side Banner -->
<tr><td width="150" align="left" valign="top">
<table width="100%">
<tr>
<td width="100%" valign="top" align="left">
<p class="navi">
<b>Version:</b>
<br>
5.00.00.00 Demo
</p>
<p class="navi">
<b>Navigation:</b>
<br>
<a href="/link">Staff</a>
<br>
<a href="/link">About</a>
<br>
<a href="/link">Affiliates</a>
<br>
<a href="/link">Site Version?</a>
<br>
<a href="/link">Previous Layouts</a>
<br>
<a href="/v5/">Version 5?</a>
</p>
<p class="navi">
<b>Project Guardian:</b>
<br>
<a href="/link">Home</a>
<br>
<a href="/link">Anti-Virus</a>
<br>
<a href="/link">Online Protection</a>
<br>
<a href="/link">Dialers</a>
<br>
<a href="/link">Spam E-mail</a>
<br>
<a href="/link">Wireless Connection</a>
<br>
<a href="/link">Various Tips</a>
</p>
<p class="navi">
<b>Contact:</b>
<br>
<a href="link">E-Mail</a>
<br>
<a href="link">AOL Messenger</a>
<br>
<a href="link">Yahoo! Messenger</a>
</p>
<p class="navi">
<b>Misc:</b>
<br>
<a href="link">Help Wanted</a>
<br>
<a href="/link">Site look wrong?</a>
</p>
</tr></td></table>
</td>
<!-- Main Table - (Center) -->
<td width="450" valign="top">
<table width="100%" align="left" valign="top" bgcolor="#ffffcc">
<tr>
<td width="100%" align="left" valign="top">
<p>This is a demo Version 5. I hope to include a new system and
smaller coding to help everyone out. I am still coding and debugging this demo, please keep
checking back to see my progress.</p>
<p>
I will be doing a lot of work on this section for awhile. This will consist
of buiding and debugging the new system. Then I must make the actual code I will be using, then make the
layout. After I complete that I will concentrate on Version 4 while
I slowly change all current pages to the v5 code.</p>
<p>I know what your asking yourself, "I see no difference". Well there is, you just can't see it yet. I'll explain below\:</p>
<p>
<ul style="list-style-image: url(/images/arrow2.gif);">
<li> New Code - Code 4.0
<li> New CSS Code - CSS Code 2.0
<li> Php Templates - One page of code, the other pages are just content.
<li> Dynamic pages - Calling up pages with information not provided in the template or content pages.
<li> Easier to update pages - Updating pages and layouts will take minutes.
<li> New layout designs - (Currently being worked on).
</ul>
</p>
<p>
Lots of things being added to Version 5. I personally can't wait for it to be done, the time and work
i'm putting into it should really pay off. I have alot in store for Version 5 and hope I can create it. I wanted alot more
then will be put up but I'm pushing myself to the limits to create something to blow the doors open haha.</p>
</tr></td>
</table></td>
<!-- Side Bar Begin -->
</td>
<td width="150" valign="top">
<table width="100%">
<tr>
<td width="100%" align="center" valign="top">
<center><a href="link" target=_blank><img src="link" alt="Against TCPA"></a></center>
<p></p>
<center>
<a href="link" title="Get Firefox - The Browser, Reloaded.">
<img src="link"
width="110" height="32" alt="Get Firefox"></a>
</center>
<p class="navi">
...Content...
</p>
</tr></tr>
</table></td>
</tr>
<tr>
<td colspan="3">
<br>
<br>
<br>
<br>
<center>
<small>
<small>
<script type="text/javascript"><!--
google_ad_client = "pub-0542779060331684";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_channel ="";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<p></p>
<!-- Start "Layout" Copyright Code -->
<a href="link">Menu provided by Someone</a>
<br>
<br>
<br>
Monthly Maintenance
<!-- End "Layout" Copyright Code -->
</small>
</small>
</center>
</td>
</tr>
</table>
</div>
</table>
</body>
</html>
And Henry your code is jsut about the same as mine too, except a few things are closed and opened wrong i think, anyway. I want it all white because i'm slipping a background behind all of this, something that fits the layout. I will still try your ideas and see if they work, if so I will build off what you have.
Ok I just made both of yours. Both have the same problem. but Netguy's code gave me an idea...
How do I space out the td's? Is there a way to put a space between them, like cell padding and spacing, can that be put in the TD code, if not then i can make 3 dif tables.
Henry said how CSS code would be easier, true but i haven't learned that much yet -.-
Also what is the dif between padding and spacing.
Thank you.
If you would have read carefully, I pointed out that you can't have 2 <td>s together, and you didn't close the nested table. The better solution was to eliminate the 2nd table altogether, and just go with the cleaner code as I outlined.
In most cases, it is unnecessary to have many nested tables in a page design. If you hand code using colspan and rowspan properly - combined with cellpadding and cellspacing, you can generally create code that is lean and fast to download (and isn't bloated like it was made with FrontPage).
As I said in my earlier post, CSS is probably the best solution, but you seemed to be in a hurry, so I doubt if that is your short-term fix.
Steve
<added> I hope one day Henry can explain why he puts a nested width="100%" table inside hard <TD>s.
</added>
td
{
text-align: left;
font-family: times new roman;
font-size: 12pt;
color: #000066;
border: 1px solid red;
padding: 20px;
}
I'm aware that that is not the correct "fix" but it (the bolded bits) should help you to see what makes the "spacing" between your cells.. you could just add some left and/or right padding as an inline style to the right td if that's the only cell content you wish to "move"
e.g.
<td width="150" valign="top" style="padding-left: 20px;">
Suzy
Henry
ps) if you exec my code you will find that it works fine in separating each col
I don't see what your problem is either.
If you're talking about the text "..Content.." not being centered it's because the text is left aligned within the table cell.
Add a border to your table temporarily to see the outline, it will help with debugging, like:
<table border="1">
Then you'll be able to see where everything is positioned within the borders of the table cells.
The left column has left aligned text, and short lines, so there is spacing between it and the center column. The center column text is full width, so having text left aligned in the right column places it up against the center column.
Is that what you're talking about, the right column text is left aligned up against the center column text?
Jimmy