SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Cool Tables-Only (No Header, No Script) frustrations with positioning + Typical IEx prob

    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:

    1. 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 . . .

    2. 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.

    3. 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.

    4. 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

    Code HTML4Strict:
    <!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>

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    What exactly are you pulling from the google group or doing to it? I'd be looking at seeing if I could pull the RSS feed and format it any way I want instead of screwing around with a trip in the wayback machine with Mr. Peabody.


    Wait... people use Google Groups?!? didn't they discontinue that, or am I thinking something like "buzz".

  3. #3
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Death, the Google Group is anecdotal to the Google Site I'm trying to help set up for a buddy who happens also to moderate a Google Group. He has some networking features available to him as a direct result of being the Administrator for both if that helps explain the context. In other words, this thread is about a Google Site and I really would appreciate any help you or anyone else can give me.

    s

  4. #4
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Important update! Thanks to the following site, I was reminded of the magnificent position: absolute; property. Hooyeah! I think we have liftoff on issue #2, the notorious Explorer quirks issue. Also I paroled the background image from the <body> tag and placed it in a table, so will see how far I can clean this up before running into my next headache heh heh.

    Learn CSS Positioning in Ten Steps: position static relative absolute float


Bookmarks

Posting Permissions

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