This is a Google Site that I’m putting together for a friend. It ties in with the Google Group he moderates, so don’t blame me that I am stuck in HTML Tables with absolutely no CSS or Scripting allowed. I can get away with it Inline, but the Header is off limits. Everything validates but the UL tags which I frankly don’t give a damn about because I need some text styling and they can blow me lol.
THERE ARE FOUR MAIN PHASES TO MY CLEANING THIS UP:
-
The <body style="background ~> property needs to be recreated in a Table of its own since Sites won’t take anything that is a background image unless it is screwed down in a Table. I’m playing around with that right now and will update the code below if I can get it to work and not look like hell. Because the element that’s most problematic for me is . . .
-
Get the vertical alignment of the little upper-right map to make nice with Explorer, which it currently butchers. If you have Firefox, you will see that little map hanging over the table, as it is supposed to; in Explorer, the map shoves the table underneath.
-
Get more control over the margins and spacing generally than I have right now. For example, the RED sentence is supposed to be centered with considerably more indentation on each side, before returning to the regular margins that appear directly above it. I of course thought about just putting a line break in there . . . but all text needs to be scaleable as individual monitors are wider and narrower. In other words, it has to wrap.
-
The concept of this Table/Map needs to be coded in such a way as to be freestanding. In other words, I have to be careful about boxing myself in a corner as far as defining its properties proprietarily relative to the TOP MARGIN, since additional Table/Maps need to be able to be placed under this first table on the same page.
In the demo I’ve rendered for us to work with the main table is supposed to be tucking underneath the little map in the upper-right corner. In other words, it’s supposed to stay fixed in the upper-right corner as monitor widths vary, and float over the table as the viewport keeps narrowing.
Here it is folks. Thanks for your help.
s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>GOOGLE SITES</title>
</head>
<body style="background-image: url(http://2.bp.blogspot.com/_cNYiQ_wdb2g/THqbTB2pnaI/AAAAAAAABKs/IZmMcSU0N_w/s400/vintage-flowered-note-embel.png);">
<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ IMAGE \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<table style="border: 0px none ; margin: 25px; float: right; width: 276px; height: 200px; text-align: left;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img style="width: 276px; height: 200px;" src="http://sydwalker.info/blog/wp-content/uploads/2009/01/london_israeli_embassy_map.gif" alt="">
</td>
</tr>
</tbody>
</table>
<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ FRAME \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<table style="border: 5px solid BLACK; padding: 5%; margin-top: 50px; width: 90%; margin-left: 5%; margin-right: 5%; background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcQwQ_fho2OQ-rFTZNpk2SU_avSY26ACyPnHzHopAj7WSEGVDAtDqQTjOjY);">
<tbody>
<tr>
<td>
<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ TITLES \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<table style="border: 1px solid BLACK; padding: 5%; width: 100%; background-color: rgb(199, 199, 191); color: BLACK;">
<tbody>
<tr>
<td>
<font style="font-size: 30px; color: rgb(83, 83, 79); font-style: italic; font-family: Times New Roman,Times,serif; font-weight: bold;">
“Nulla In Tellus”</font>
<br>
<font style="font-size: 26px; font-weight: bold;">
NEC PLACERAT ELIT NISL IN QUAM</font>
<br>
<br>
<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ MAIN CONTENT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<center>
<table style="margin: 5%; padding: 2%; width: 90%; background-color: rgb(143, 144, 130); color: WHITE; text-align: justify;">
<tbody>
<tr>
<td>
<font style="font-size: 18px; margin-left: 5%;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.<br>
<br>
<font style="text-align: center; width: 90%; font-size: 22px; color: RED;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis:
</font>
</font>
<font style="font-size: 16px; margin-right: 5%;">
<ul type="square">
<li><b>Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam.</b></li>
<li>ALIQUAM PHARETRA.</li>
<li>ETIAM AUGUE PEDE, MOLESTIE EGET, RHONCUS AT, CONVALLIS UT, EROS.</li>
<li>NULLA IN TELLUS EGET ODIO SAGITTIS BLANDIT.</li>
<li>MAECENAS AT NISL:<br>
Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.</li>
</ul>
</font>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I think we have liftoff on issue