Simple table troubles

Discussion in 'HTML' started by Antony N. Lord, Mar 8, 2005.

  1. Would someone be kind enough to take a look at :

    http://www.chapmanscreek.com

    and tell me either what I'm doing wrong with the table or perhaps a
    better way of doing things.

    What I was trying to do was generate a "margin" so the text doesn't
    overlap the background image.

    You'll see what I mean...

    Thanks in advance,

    Antony.

    *** When replying via e-mail be sure to correct the spelling error in my
    address ***
    Antony N. Lord, Mar 8, 2005
    #1
    1. Advertising

  2. Antony N. Lord

    Adrienne Guest

    Gazing into my crystal ball I observed "Antony N. Lord"
    <> writing in news:d0kfm7$u1n$:

    > Would someone be kind enough to take a look at :
    >
    > http://www.chapmanscreek.com
    >
    > and tell me either what I'm doing wrong with the table or perhaps a
    > better way of doing things.
    >
    > What I was trying to do was generate a "margin" so the text doesn't
    > overlap the background image.
    >
    > You'll see what I mean...
    >
    > Thanks in advance,
    >


    Well, I can see a few things that need fixing. First, get rid of
    depreciated markup, eg. <font> element, use CSS:

    --- style.css --
    body {font-family: tahoma, sans-serif; background-image:url("newbg.jpg");
    color:#000; background-color:#fff; font-size:100%}
    #content {margin-left:200px}
    #content p {text-align:center}
    ---

    Then get rid of the table. You do not need it. Tables should be used for
    tabular data, data that would be in a spreadsheet for example.


    <head>
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div id="content">
    <p>Your content here</p>
    </div>
    </body>


    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne, Mar 8, 2005
    #2
    1. Advertising

  3. Antony N. Lord

    RoseW Guest

    re: take a look at :
    http://www.chapmanscreek.com tell me either what I'm doing wrong with the
    table or perhaps a better way of doing things.

    What I was trying to do was generate a "margin" so the text doesn't overlap
    the background image.
    _____________________
    Only because I have just this week been down this road of working in a large
    screen view ....the text does not overlap on my screen resolution at 1280 *
    1024 (19 or 20 inch monitor) but if I resize to simulate the generally
    accepted viewing size the text moves over the side picture.
    Perhaps setting your page up into two columns - left side having the
    vertical column of images and 2nd column being the main body with text.
    Otherwise have a plain background and as the screen is resized by the
    viewers settings it is not noticeable that the text moves to the left.

    There is a handy trick using a script which I found on one of the PC
    magazine sites and its adjusting the properties of a favourite link to be an
    automatic resize script
    1. Create a favourite- it doesn't matter where you are when you make a new
    favourite and put it in the LINKS.
    2. Edit the properties on the Web Document tab (in Xp) of the new favourite
    to be javascript:self.resizeTo(800,640);
    make another favourite....
    javascript:self.resizeTo(1024,720);
    etc
    A message from Windows will pop up as you create this which can be
    ignored....
    3.Rename this favourite in the General tab - something like Resize to 800
    and the rest can be Resize to 1024_720 Resize to ...etc.

    With one click you can check how your set-up looks at the different viewing
    sizes. This isn't a solution to your text moving over the pictures but it
    lets you know sooner, rather than later that something has to be adjusted.
    I wondered if you changed the percentage width of your logo width if it
    would be sharper....usually its the width and the height of the img that is
    included rather than a percentage.

    <font face="Tahoma"><img src="cclogo.jpg" alt="" width="95%"

    Just my thoughts, Rose
    RoseW, Mar 8, 2005
    #3
  4. Antony N. Lord

    Oli Filth Guest

    Antony N. Lord wrote:
    > Would someone be kind enough to take a look at :
    >
    > http://www.chapmanscreek.com
    >
    > and tell me either what I'm doing wrong with the table or perhaps a
    > better way of doing things.
    >
    > What I was trying to do was generate a "margin" so the text doesn't
    > overlap the background image.
    >
    > You'll see what I mean...


    A lot of people in this newsgroup will strongly discourage the use of
    tables for simple layout things like this.

    If you do away with the <table>, and rewrite the <body> of your page as
    follows:

    ======= START HTML CODE =======

    <body style="margin: 0; padding: 0;">
    <div style="float: left; width: 130px; height: 100%;">
    <img src="newbg.jpg">
    </div>
    <div style="text-align: center">
    <img src="cclogo.gif" alt="" style="width: 75%; border: 0">
    </div>

    ... the textual content ...

    </body>

    ======== END HTML CODE ========

    The background image has moved into the foreground, and now sits in its
    own <div> which is floated to the left. Ensure you remove the whitespace
    from "newbg.jpg" (see below).

    The "cclogo.gif" image (also see below) will now re-size with the
    window. In IE, this works at basically all window sizes. In Firefox this
    seems to work down to around 640px wide, which should be good enough.

    Just a few thoughts about the page in general:

    * Your image file sizes are absurd, and a huge waste of bandwidth, which
    will slow down your users' impression of your page. If you remove the
    whitespace from "newbg.jpg" (cutting it down from 1600px wide to 130px),
    the file size would drop from 64kB to 5kB. For the logo image
    "cclogo.jpg", if you converted it from a JPEG to GIF, you could drop the
    file size from 119kB to 16kB.

    * Don't use empty paragraphs (i.e. <p></p>) to simulate space. This is
    what CSS margins and padding are for.

    * You should always specify dimensions with units, except for "0". "130"
    is meaningless. Acceptable units are "px", "pt", "%" or "em".

    * I highly recommend learning some basic CSS. The use of <font ...>
    everywhere is deprecated and discouraged. You could remove all of this
    with CSS.

    Hope this helps.

    --
    Oli
    Oli Filth, Mar 8, 2005
    #4
  5. Antony N. Lord

    Henry Guest

    Simple solution.

    Evidently, you are an amateur, who wants a quick solution, not 6 months
    extensive study of css.

    (You must be mad to suggest such thing, Adrienne!Why the hell he should
    do that, to have just one page with two pics and email address!?)

    You guys are unbelievable with your obsession with css!

    Religion, a cult or what?


    Use that code. Is not perfect but I'm sure that's what you were asking for.


    If you know how, change the size of your pic cclogo.jpg because that's
    where is your problem anyway. I have resized so it works. BG pic is
    crazy regards it's size.

    But you don't have to do it. Just copy the code and will work.

    Problem fixed. No need to go to the university to achieve that.

    If you want something better, send me an email.

    I'm in Perth as well!

    ----------------------------------------------------------------------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html><head>
    <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    <meta name="generator" content="Adobe GoLive 6"><title>Chapman's Creek
    Vineyard</title>

    <meta name="keywords" content="chapman, chapman's, creek, vineyard,
    chapmans, tony, lord, margaret river, wine, winery">
    <meta name="organization" content="Chapman's Creek Vineyard">
    <meta name="description" content="Official Web Site for Chapman's
    Creek Vineyard">

    <style type="text/css">
    p {margin: 25px;}
    </style>


    </head>



    <body background="newbg.jpg" text="black">
    <div align="right">
    <table width="85%">
    <tbody><tr>
    <td width="0"></td>
    <td width="820">
    <p align="center">
    <img border="0" src="cclogo.jpg" width="320" height="170"></p>
    <div align="center">
    <font face="Tahoma">Yelverton Road, Wilyabrup</font>
    <p><font face="Tahoma" size="-2">Updated March 2005</font></p>
    <hr>
    <p></p>
    <p><font face="Tahoma">Chapman's Creek was established in 1989 by
    the late Tony Lord, founder of world renowned wine magazine
    Decanter.</font></p>
    <p><font face="Tahoma">Situated
    in the midst of the Margaret River Wine Appellation, Chapman's Creek is
    a boutique vineyard on quality, undulating land and surrounded by state
    forest.</font></p>
    <p><font face="Tahoma">It now boasts 14 year
    old vines covering some 50 acres that have produced significant wines
    over the past years with numerous awards and accolades. </font></p>
    <p><font face="Tahoma">In Ray Jordan's 2004 "Guide to Wine" he
    gave each of the 4 wine varieties scores of more than 8 /10.</font></p>
    <p></p>
    <p><font face="Tahoma">The cellar door is open Monday to Saturday
    stocking a full range of estate wine, port and desert wine.</font></p>
    <p></p>
    <p><font color="#ef0000" face="Tahoma">Due to the passing of its
    founder, Chapman's Creek is currently for sale</font><font
    face="Tahoma">. </font></p>
    <p><font face="Tahoma">Please click <a
    href="http://www.chapmanscreek.com/ChapmansCreekBrochure.pdf">here</a>
    to download the detailed sales prospectus </font></p>
    <p><font face="Tahoma" size="-2">(may require Adobe Acrobat
    Reader)</font><font face="Tahoma"> </font></p>
    </div>
    <div align="left">
    <hr>
    <p><font face="Tahoma"><b>Perth Offices</b></font></p>
    </div>
    <div align="center">
    <p><font face="Tahoma"><b>E-Mail</b></font></p>
    <p><font face="Tahoma" size="-1"><a
    href="mailto:"></a></font></p>
    <p><font face="Tahoma"><b>Telephone</b> </font></p>
    <p><font face="Tahoma" size="-1">+61 8 9383 4739</font></p>
    <p><font face="Tahoma" size="+1"><b>Fax</b></font></p>
    <p><font face="Tahoma" size="-1">+61 8 9383 4579</font></p>
    <p><font face="Tahoma"><b>Post</b></font></p>
    <p><font face="Tahoma" size="-1">Chapman's Creek Vineyard</font></p>
    <p><font face="Tahoma" size="-1">10/14 Victoria Avenue</font></p>
    <p><font face="Tahoma" size="-1">Claremont, 6010</font></p>
    <p><font face="Tahoma" size="-1">Australia</font></p>
    <div align="left">
    <p><font face="Tahoma"><b>Cellar Door</b></font></p>
    </div>
    <div align="center">
    <p><font face="Tahoma"><b>E-Mail</b></font></p>
    <p><font face="Tahoma" size="-1"><a
    href="mailto:"></a></font></p>
    <p><font face="Tahoma"><b>Telephone</b> </font></p>
    <p><font face="Tahoma" size="-1">+61 8 9755 7545</font></p>
    <p><font face="Tahoma" size="+1"><b>Fax</b></font></p>
    <p><font face="Tahoma" size="-1">+61 8 9755 7571</font></p>
    <p><font face="Tahoma"><b>Post</b></font></p>
    <p><font face="Tahoma" size="-1">Chapman's Creek Vineyard</font></p>
    <p><font face="Tahoma" size="-1">Yelverton Road, Wilyabrup</font></p>
    </div>
    <hr>
    <p><font face="Tahoma" size="-2">©2005 Chapman's Creek
    Vineyard</font></p>
    </div>
    </td>
    </tr>
    </tbody></table>
    </div>
    </body></html>
    Henry, Mar 8, 2005
    #5
  6. Antony N. Lord

    Henry Guest

    Oli Filth wrote:
    > Antony N. Lord wrote:
    >
    >> Would someone be kind enough to take a look at :
    >>
    >> http://www.chapmanscreek.com
    >>
    >> and tell me either what I'm doing wrong with the table or perhaps a
    >> better way of doing things.
    >>
    >> What I was trying to do was generate a "margin" so the text doesn't
    >> overlap the background image.
    >>
    >> You'll see what I mean...

    >
    >
    > A lot of people in this newsgroup will strongly discourage the use of
    > tables for simple layout things like this.
    >
    > If you do away with the <table>, and rewrite the <body> of your page as
    > follows:
    >
    > ======= START HTML CODE =======
    >
    > <body style="margin: 0; padding: 0;">
    > <div style="float: left; width: 130px; height: 100%;">
    > <img src="newbg.jpg">
    > </div>
    > <div style="text-align: center">
    > <img src="cclogo.gif" alt="" style="width: 75%; border: 0">
    > </div>
    >
    > ... the textual content ...
    >
    > </body>
    >
    > ======== END HTML CODE ========
    >
    > The background image has moved into the foreground, and now sits in its
    > own <div> which is floated to the left. Ensure you remove the whitespace
    > from "newbg.jpg" (see below).
    >
    > The "cclogo.gif" image (also see below) will now re-size with the
    > window. In IE, this works at basically all window sizes. In Firefox this
    > seems to work down to around 640px wide, which should be good enough.
    >
    > Just a few thoughts about the page in general:
    >
    > * Your image file sizes are absurd, and a huge waste of bandwidth, which
    > will slow down your users' impression of your page. If you remove the
    > whitespace from "newbg.jpg" (cutting it down from 1600px wide to 130px),
    > the file size would drop from 64kB to 5kB. For the logo image
    > "cclogo.jpg", if you converted it from a JPEG to GIF, you could drop the
    > file size from 119kB to 16kB.
    >
    > * Don't use empty paragraphs (i.e. <p></p>) to simulate space. This is
    > what CSS margins and padding are for.
    >
    > * You should always specify dimensions with units, except for "0". "130"
    > is meaningless. Acceptable units are "px", "pt", "%" or "em".
    >
    > * I highly recommend learning some basic CSS. The use of <font ...>
    > everywhere is deprecated and discouraged. You could remove all of this
    > with CSS.
    >
    > Hope this helps.




    I don't think so!

    You have wasted your time. He needs an extensive study of html and css
    and I don't think for just one page is worth.

    Unless he wants to be a web page designer pro or just hobbyist.

    In other cases, pure waste of time.


    Cheers...
    Henry, Mar 8, 2005
    #6
  7. Antony N. Lord

    Mark Parnell Guest

    Previously in alt.html, Henry <> said:

    > Simple solution.


    <snip code>

    And you think that mountain of crap is better than the dozen or so lines
    that Adrienne posted because...?

    P.S. How'd you get out of my killfile? Get back in there where you
    belong.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    Mark Parnell, Mar 8, 2005
    #7
  8. Antony N. Lord

    Henry Guest

    Mark Parnell wrote:
    > Previously in alt.html, Henry <> said:
    >
    >
    >>Simple solution.

    >
    >
    > <snip code>
    >
    > And you think that mountain of crap is better than the dozen or so lines
    > that Adrienne posted because...?





    I never said that is better.

    The problem is, a person without any knowledge is not able to use that code.

    That page will be seen by several people because no one knows about and
    those who know, will have no problems with the contents.

    Of course can be done in css but if bloke wants done today, what other
    options he has except hiring pro, who will charge him an arm and leg for
    that one simple page.

    It's evident that he has not a slightest clues what he is doing.


    So... what you would suggest him?


    Learn a quick course in 10 hours and be pro?


    or...


    Call a pro?


    To change a wheel in a car you will call a mechanic?

    Can be done without. Maybe slower and not pro way but can be done.


    Everything can be done in a pro way but the result have to justify by
    the cost. In this case no safety is at the stake and I have supply for
    him a quick and perfect solution he can use in 10 minutes.

    Than he can decide if he wants go further or that would be just a one
    little adventure in his life.


    I'm not promoting this type of coding, however Adobe Golive or Front
    Page are tools designed by professionals and people with basic word
    processing skill can design simple pages in few minutes. That's the idea
    and that's why we have computers.

    To work for us.



    > P.S. How'd you get out of my killfile? Get back in there where you
    > belong.




    My guess is, you have something f*cked up!

    ;)
    Henry, Mar 9, 2005
    #8
  9. Antony N. Lord

    dorayme Guest

    > From: "Antony N. Lord" <>
    > Organization: WA Internet Association
    > Newsgroups: alt.html
    > Date: Tue, 08 Mar 2005 23:25:09 +0800
    > Subject: Simple table troubles
    >
    > Would someone be kind enough to take a look at :
    >
    > http://www.chapmanscreek.com
    >
    > and tell me either what I'm doing wrong with the table or perhaps a
    > better way of doing things.
    >
    > What I was trying to do was generate a "margin" so the text doesn't
    > overlap the background image.
    >
    > You'll see what I mean...
    >
    > Thanks in advance,
    >
    > Antony.
    >
    > *** When replying via e-mail be sure to correct the spelling error in my
    > address ***



    your "Chapman's Creek" img is 1024 x 486 pixels, that is a lot for a cursive
    text logo the way you use it...

    the bg image is a strip on the left, yes? why not not make it part of the
    table, a td and not a bg image...

    dorayme
    dorayme, Mar 9, 2005
    #9
  10. Antony N. Lord

    Adrienne Guest

    Gazing into my crystal ball I observed Henry <>
    writing in news:422e5e6d$:

    > Mark Parnell wrote:
    >> Previously in alt.html, Henry <> said:
    >>
    >>
    >>>Simple solution.

    >>
    >>
    >> <snip code>
    >>
    >> And you think that mountain of crap is better than the dozen or so
    >> lines that Adrienne posted because...?

    >
    >
    > I never said that is better.
    >
    > The problem is, a person without any knowledge is not able to use that
    > code.
    >


    So, you say, put a little duct tape on it and go on your vacation in Death
    Vally. The tape should hold. Or do you say, hey, this is a pretty simple
    hose that needs replacing, here's the hose you need, and this is where you
    stick it. Now you'll have a new hose when you go on vacation in Death
    Valley, and be sure to enjoy the lovely desert flowers.


    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne, Mar 9, 2005
    #10
  11. Antony N. Lord

    Henry Guest

    Adrienne wrote:
    > Gazing into my crystal ball I observed Henry <>
    > writing in news:422e5e6d$:


    > So, you say, put a little duct tape on it and go on your vacation in Death
    > Vally. The tape should hold. Or do you say, hey, this is a pretty simple
    > hose that needs replacing, here's the hose you need, and this is where you
    > stick it. Now you'll have a new hose when you go on vacation in Death
    > Valley, and be sure to enjoy the lovely desert flowers.




    Wrong example.

    I would put it that way. Cut a cheap hose and fix it or get really
    expensive one and get a pro to fix it.

    You code is great, but for one, who knows how to use it.
    If you would supply the whole exact code, that most likely would help.

    But with just an idea... no chances.

    If he would know how to use it, he would not ask for a help for such
    simple task.

    :)


    Did he fixed it?

    Nope!

    Why?

    We would never know, huh?
    Henry, Mar 9, 2005
    #11
  12. > Would someone be kind enough to take a look at :
    > http://www.chapmanscreek.com


    Well there are no shortage of strong opinions here :)

    Yes, the table attempt was very dirty.

    Despite Henry's lack of faith I've been able to kludge some basic CSS
    and its up on the site (thanks all).

    Naturally its a work in progress - at least it now displays correctly on
    all the different platforms / browsers I have tried. There's more
    tidying up to be done for sure (like all the paragraph spacers) - this
    will mean more exploration of CSS.

    And the reason for the large 1024 logo - I figured some users out there
    would have 1600 or larger screens and the logo should look good at that
    size.

    Interestingly I tried the sidebar image WITHOUT the white area and the
    file size is EXACTLY the same...

    I can tell this adventure means I'll be rewriting all sorts of my old
    crappy HTML work :)

    Cheers, Antony.

    *** When replying via e-mail be sure to correct the spelling error in
    my address ***
    Antony N. Lord, Mar 9, 2005
    #12
  13. Antony N. Lord

    Henry Guest

    Antony N. Lord wrote:

    > I can tell this adventure means I'll be rewriting all sorts of my old
    > crappy HTML work :)



    Uppssss... underestimated.


    ;)
    Henry, Mar 9, 2005
    #13
  14. Antony N. Lord

    kchayka Guest

    Henry wrote:
    >
    > You have wasted your time. He needs an extensive study of html and css
    > and I don't think for just one page is worth.


    I'm confused by your posts in this thread.

    The OP doesn't really know either HTML or CSS. That was fairly obvious.

    You post the full code for a table-layout solution and your only comment
    on it is "Just copy the code and [it] will work."

    Somebody posts the full code for a CSS solution, complete with
    explanations, and you say he needs to study it for 6 months before he
    can use it.

    And you wonder why you're treated like a troll. ;)

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Mar 10, 2005
    #14
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Williams
    Replies:
    2
    Views:
    1,113
    Jacob Yang [MSFT]
    Aug 12, 2003
  2. Ober
    Replies:
    6
    Views:
    530
    Frank Mamone
    Sep 13, 2004
  3. Victor
    Replies:
    10
    Views:
    3,426
    Victor van Hillo
    Nov 21, 2004
  4. Owen

    cookie troubles

    Owen, Jan 7, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    309
    Exception
    Jan 7, 2005
  5. Rio
    Replies:
    4
    Views:
    1,182
Loading...

Share This Page