I don't know what my problem is. But I do know I have a problem.
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border=0>
<tr height="100%">
<td width="100%" align="center" valign="top">
<TABLE FONT="Book Antiqua" BGCOLOR="#800000" BORDER="0" CELLPADDING="0" CELLSPACING="0" style="border: #666666 1px solid;">
<TR>
<TD HEIGHT="75" WIDTH="800" BGCOLOR="#800000" COLSPAN="3" align="center"><B><FONT FACE="Edwardian Script ITC" COLOR="#FFFFFF" SIZE="10">The Official Collected Plays of Neil Simon Online</font></B></TD>
</TR>
<TR>
<TD BGCOLOR="#C0C0C0" ALIGN="left" VALIGN="top" HEIGHT="600" WIDTH="200" FONT="Book Antiqua"> <font color="#000052" size="2"> <P>Barefoot in the Park<br>Come Blow Your Horn<BR>The Odd Couple</P></TD>
<TD BGCOLOR="wheat" ALIGN="left" VALIGN="top" HEIGHT="600" WIDTH="400" FONT="Book Antiqua">
What my problem is (I think) how do I... reduce the amount of memory space that is being taken up by removing the table setup and replacingit with <DIV> tags.. but I realize that DIV tags only work with CSS... HELP!!<table width="100%" height="100%" cellspacing="0" cellpadding="0" border=0>
<tr height="100%">
Height is not a valid attribute for table, tr or td.
<TABLE FONT="Book Antiqua" BGCOLOR="#800000" BORDER="0" CELLPADDING="0" CELLSPACING="0" style="border: #666666 1px solid;">
You haven't specified any alternative fonts. If the user doesn't have Book Antiqua, they will get the default font their browser is set to. In Mozilla that's Times Roman. In IE it's Verdana.
Also the border style should be in the order Size, Type then Colour last.
<font color="#000052" size="2">
The font tag is deprecated. Do not use it.
I realise you want to replace the table with divs. Create three divs to replace your table cells and just position, colour and pad them as appropriate.
I took a look at your code and I really like the design.
So I spent some time making it work. It was not easy as I tried to make the layout flexible like tables, so they expand and contract with the size of the browser window. I failed and had to use exact positioning. But now there are no tables, just divs!
Can someone else upgrade my code so it is flexible? I tried percentage widths which worked great for the banner and the left (grey) menu but I couldn't see a way to get the remaining section to fit. I also tried floats but they are a bit of a nightmare!
I'll show my code and explain it in the next post.<!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" xml:lang="en" lang="en">
<head>
<style>
html, body {margin:0; padding:0;}
#header {
position:absolute;
left:100px;
top:10px;
width:770px;
height:60px;
background-color:#800;
font-family:'Edwardian Script ITC', Arioso, 'Kunstler Script', 'Palace Script MT', 'Vladimir Script', Vivaldi, Times, script;
color:#fff;
font-size:46px;
font-weight:bold;
text-align:center;
padding:6px;
border:1px solid #666;
border-bottom:1px solid #800;}
#menu {
position:absolute;
top:84px; /* header height + padding + border */
left:100px;
width:265px;
height:600px;
background-color:#c0c0c0;
font-family:'Book Antiqua', 'Times New Roman', Times, serif;
color:#000052;
font-size:12px;
text-align:left;
padding:6px;
border-left:1px solid #666;
border-bottom:1px solid #666;}
#right {position:absolute;
top:84px;
left:366px;
height:600px;
width:505px;
background-color:wheat;
font-family:'Book Antiqua', 'Times New Roman', Times, serif;
color:#000052;
font-size:12px;
text-align:left;
padding:6px;
border-right:1px solid #666;
border-bottom:1px solid #666;}
</style>
</head>
<body>
<div id="header">The Official Collected Plays of Neil Simon Online</div>
<div id="menu"><p>Barefoot in the Park
<br />Come Blow Your Horn
<br />The Odd Couple</p></div>
<div id="right">Some text to go in here later</div>
</body>
</html>
First I set the file to XHTML as this cures IE's broken divs bug. Next I put the styles in the top but they can also go in a separate file. I then set the margin and padding of the page to zero so the browser doesn't add gaps of its own.
The page is split into 3 divs as you can see from the HTML. I call them names using the 'id' attribute. I can then style them using the same name with a hash infront in my style code.
Note the alternative fonts given, leading down to the most basic one everyone should have.
I use 'position:absolute' to fix the position of the divs in set places on the screen. Because divs don't have space inside them I then add 6 pixels of space using 'padding:6px'. Note this affects all sides.
I then set the grey border you had before around the header. But we don't want the border on the bottom so I cheat by making the bottom border red (the same colour as the header background).
I then define the other two divs in the same way, styling the borders so they are only on two sides. This gives the impression that there is one continuous border around the whole layout.
The rest of the styles should be self-explanatory. Experiment by altering them!
See how simpler the HTML now looks as well. When you come to design a new layout, all you have to do is move the divs around by altering the CSS. The colours and fonts can also be changed very easily this way without touching the HTML.
If you need me to explain any more about my code just say. It works with Mozilla 1.4, IE6 and Opera 7.11.A couple of notes about that mark up posted above:
1) The "type" attribute is always required with the STYLE element.
2) With XHTML you have to specify that the CSS is CDATA.
<style type="text/css">
<![CDATA[
... unescaped style content ...
]]>
</style>
See <!-- m --><a class="postlink" href="http://www.w3.org/TR/xhtml1/#h-4.8.Yeah">http://www.w3.org/TR/xhtml1/#h-4.8.Yeah</a><!-- m --> sorry about that, it was just a rough markup. I believe the <title> tag is also required (oops).
It might be better to stick with HTML4 and use a hack to supply IE with the correct code. I did this but took it out.Thanks for the help, I wish I knew much more about the coding of DIV. I'll be learning much more about it as I continue to wade through the concentricities of Web programming. ThanksHey hester - if you don't want the padding to affect all sides you could try:
padding-left:
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border=0>
<tr height="100%">
<td width="100%" align="center" valign="top">
<TABLE FONT="Book Antiqua" BGCOLOR="#800000" BORDER="0" CELLPADDING="0" CELLSPACING="0" style="border: #666666 1px solid;">
<TR>
<TD HEIGHT="75" WIDTH="800" BGCOLOR="#800000" COLSPAN="3" align="center"><B><FONT FACE="Edwardian Script ITC" COLOR="#FFFFFF" SIZE="10">The Official Collected Plays of Neil Simon Online</font></B></TD>
</TR>
<TR>
<TD BGCOLOR="#C0C0C0" ALIGN="left" VALIGN="top" HEIGHT="600" WIDTH="200" FONT="Book Antiqua"> <font color="#000052" size="2"> <P>Barefoot in the Park<br>Come Blow Your Horn<BR>The Odd Couple</P></TD>
<TD BGCOLOR="wheat" ALIGN="left" VALIGN="top" HEIGHT="600" WIDTH="400" FONT="Book Antiqua">
What my problem is (I think) how do I... reduce the amount of memory space that is being taken up by removing the table setup and replacingit with <DIV> tags.. but I realize that DIV tags only work with CSS... HELP!!<table width="100%" height="100%" cellspacing="0" cellpadding="0" border=0>
<tr height="100%">
Height is not a valid attribute for table, tr or td.
<TABLE FONT="Book Antiqua" BGCOLOR="#800000" BORDER="0" CELLPADDING="0" CELLSPACING="0" style="border: #666666 1px solid;">
You haven't specified any alternative fonts. If the user doesn't have Book Antiqua, they will get the default font their browser is set to. In Mozilla that's Times Roman. In IE it's Verdana.
Also the border style should be in the order Size, Type then Colour last.
<font color="#000052" size="2">
The font tag is deprecated. Do not use it.
I realise you want to replace the table with divs. Create three divs to replace your table cells and just position, colour and pad them as appropriate.
I took a look at your code and I really like the design.
So I spent some time making it work. It was not easy as I tried to make the layout flexible like tables, so they expand and contract with the size of the browser window. I failed and had to use exact positioning. But now there are no tables, just divs!
Can someone else upgrade my code so it is flexible? I tried percentage widths which worked great for the banner and the left (grey) menu but I couldn't see a way to get the remaining section to fit. I also tried floats but they are a bit of a nightmare!
I'll show my code and explain it in the next post.<!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" xml:lang="en" lang="en">
<head>
<style>
html, body {margin:0; padding:0;}
#header {
position:absolute;
left:100px;
top:10px;
width:770px;
height:60px;
background-color:#800;
font-family:'Edwardian Script ITC', Arioso, 'Kunstler Script', 'Palace Script MT', 'Vladimir Script', Vivaldi, Times, script;
color:#fff;
font-size:46px;
font-weight:bold;
text-align:center;
padding:6px;
border:1px solid #666;
border-bottom:1px solid #800;}
#menu {
position:absolute;
top:84px; /* header height + padding + border */
left:100px;
width:265px;
height:600px;
background-color:#c0c0c0;
font-family:'Book Antiqua', 'Times New Roman', Times, serif;
color:#000052;
font-size:12px;
text-align:left;
padding:6px;
border-left:1px solid #666;
border-bottom:1px solid #666;}
#right {position:absolute;
top:84px;
left:366px;
height:600px;
width:505px;
background-color:wheat;
font-family:'Book Antiqua', 'Times New Roman', Times, serif;
color:#000052;
font-size:12px;
text-align:left;
padding:6px;
border-right:1px solid #666;
border-bottom:1px solid #666;}
</style>
</head>
<body>
<div id="header">The Official Collected Plays of Neil Simon Online</div>
<div id="menu"><p>Barefoot in the Park
<br />Come Blow Your Horn
<br />The Odd Couple</p></div>
<div id="right">Some text to go in here later</div>
</body>
</html>
First I set the file to XHTML as this cures IE's broken divs bug. Next I put the styles in the top but they can also go in a separate file. I then set the margin and padding of the page to zero so the browser doesn't add gaps of its own.
The page is split into 3 divs as you can see from the HTML. I call them names using the 'id' attribute. I can then style them using the same name with a hash infront in my style code.
Note the alternative fonts given, leading down to the most basic one everyone should have.
I use 'position:absolute' to fix the position of the divs in set places on the screen. Because divs don't have space inside them I then add 6 pixels of space using 'padding:6px'. Note this affects all sides.
I then set the grey border you had before around the header. But we don't want the border on the bottom so I cheat by making the bottom border red (the same colour as the header background).
I then define the other two divs in the same way, styling the borders so they are only on two sides. This gives the impression that there is one continuous border around the whole layout.
The rest of the styles should be self-explanatory. Experiment by altering them!
See how simpler the HTML now looks as well. When you come to design a new layout, all you have to do is move the divs around by altering the CSS. The colours and fonts can also be changed very easily this way without touching the HTML.
If you need me to explain any more about my code just say. It works with Mozilla 1.4, IE6 and Opera 7.11.A couple of notes about that mark up posted above:
1) The "type" attribute is always required with the STYLE element.
2) With XHTML you have to specify that the CSS is CDATA.
<style type="text/css">
<![CDATA[
... unescaped style content ...
]]>
</style>
See <!-- m --><a class="postlink" href="http://www.w3.org/TR/xhtml1/#h-4.8.Yeah">http://www.w3.org/TR/xhtml1/#h-4.8.Yeah</a><!-- m --> sorry about that, it was just a rough markup. I believe the <title> tag is also required (oops).
It might be better to stick with HTML4 and use a hack to supply IE with the correct code. I did this but took it out.Thanks for the help, I wish I knew much more about the coding of DIV. I'll be learning much more about it as I continue to wade through the concentricities of Web programming. ThanksHey hester - if you don't want the padding to affect all sides you could try:
padding-left: