Simple table troubles

Antony N. Lord · Mar 8, 2005

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 ***

Adrienne · Mar 8, 2005

Gazing into my crystal ball I observed "Antony N. Lord"

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. 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">
Your content here
</div>
</body>

RoseW · Mar 8, 2005

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.

<img src="cclogo.jpg" alt="" width="95%"

Just my thoughts, Rose

Oli Filth · Mar 8, 2005

Antony said:
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. ) 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 
everywhere is deprecated and discouraged. You could remove all of this
with CSS.

Hope this helps.

Henry · Mar 8, 2005

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! (e-mail address removed)

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

<!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">

<img border="0" src="cclogo.jpg" width="320" height="170">
<div align="center">
Yelverton Road, Wilyabrup
Updated March 2005
<hr>

Chapman's Creek was established in 1989 by
the late Tony Lord, founder of world renowned wine magazine
Decanter.
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.
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. 
In Ray Jordan's 2004 "Guide to Wine" he
gave each of the 4 wine varieties scores of more than 8 /10.

The cellar door is open Monday to Saturday
stocking a full range of estate wine, port and desert wine.

Due to the passing of its
founder, Chapman's Creek is currently for sale. 
Please click <a
href="http://www.chapmanscreek.com/ChapmansCreekBrochure.pdf">here</a>
to download the detailed sales prospectus 
(may require Adobe Acrobat
Reader) 
</div>
<div align="left">
<hr>
Perth Offices
</div>
<div align="center">
E-Mail
<a
href="mailto:[email protected]">[email protected]</a>
Telephone 
+61 8 9383 4739
Fax
+61 8 9383 4579
Post
Chapman's Creek Vineyard
10/14 Victoria Avenue
Claremont, 6010
Australia
<div align="left">
Cellar Door
</div>
<div align="center">
E-Mail
<a
href="mailto:[email protected]">[email protected]</a>
Telephone 
+61 8 9755 7545
Fax
+61 8 9755 7571
Post
Chapman's Creek Vineyard
Yelverton Road, Wilyabrup
</div>
<hr>
Â©2005 Chapman's Creek
Vineyard
</div>
</td>
</tr>
</tbody></table>
</div>
</body></html>

Henry · Mar 8, 2005

Oli said:
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. ) 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 
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...

Mark Parnell · Mar 8, 2005

Previously in alt.html 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.

Henry · Mar 9, 2005

Mark said:
<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!

dorayme · Mar 9, 2005

From: "Antony N. Lord said:
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

Adrienne · Mar 9, 2005

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.

Henry · Mar 9, 2005

Adrienne said:
Gazing into my crystal ball I observed Henry <[email protected]>
writing in news:[email protected]:

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?

Antony N. Lord · Mar 9, 2005

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 ***

Henry · Mar 9, 2005

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

Uppssss... underestimated.

kchayka · Mar 10, 2005

Henry said:
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.

Only one table shows up with the information	2	Mar 29, 2023
? Trouble with: passing dragElement(e.target.id);	8	Jan 12, 2023
Simple table--weird results	9	Aug 29, 2010
HTML Aligning social media icons	2	Dec 6, 2020
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Can't make table the size of the screen	12	Apr 29, 2010
need help with simple html problem	9	Nov 26, 2008
5x5 rounded-corner table	8	Sep 30, 2009

Simple table troubles

Antony N. Lord

Adrienne

RoseW

Oli Filth

Henry

Henry

Mark Parnell

Henry

dorayme

Adrienne

Henry

Antony N. Lord

Henry

kchayka

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads