Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Simple table troubles

Reply
Thread Tools

Simple table troubles

 
 
Antony N. Lord
Guest
Posts: n/a
 
      03-08-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 ***
 
Reply With Quote
 
 
 
 
Adrienne
Guest
Posts: n/a
 
      03-08-2005
Gazing into my crystal ball I observed "Antony N. Lord"
<(E-Mail Removed)> writing in news:d0kfm7$u1n$(E-Mail Removed):

> 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
 
Reply With Quote
 
 
 
 
RoseW
Guest
Posts: n/a
 
      03-08-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.

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

Just my thoughts, Rose


 
Reply With Quote
 
Oli Filth
Guest
Posts: n/a
 
      03-08-2005
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
 
Reply With Quote
 
Henry
Guest
Posts: n/a
 
      03-08-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! http://www.velocityreviews.com/forums/(E-Mail 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">
<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="(E-Mail Removed)">chapmanscreek (E-Mail Removed)</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="(E-Mail Removed)">chapmanscreek (E-Mail Removed)</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>
 
Reply With Quote
 
Henry
Guest
Posts: n/a
 
      03-08-2005
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...
 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      03-08-2005
Previously in alt.html, Henry <(E-Mail Removed)> 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
 
Reply With Quote
 
Henry
Guest
Posts: n/a
 
      03-09-2005
Mark Parnell wrote:
> Previously in alt.html, Henry <(E-Mail Removed)> 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!


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      03-09-2005
> From: "Antony N. Lord" <(E-Mail Removed)>
> 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

 
Reply With Quote
 
Adrienne
Guest
Posts: n/a
 
      03-09-2005
Gazing into my crystal ball I observed Henry <(E-Mail Removed)>
writing in news:422e5e6d$(E-Mail Removed):

> Mark Parnell wrote:
>> Previously in alt.html, Henry <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Wireless troubles =?Utf-8?B?VG9ueSBM?= Wireless Networking 4 11-03-2005 04:45 PM
Home Network Troubles using Windows XP Network Setup Wizard =?Utf-8?B?RHJlZA==?= Wireless Networking 6 08-05-2005 02:06 PM
Table/table rows/table data tag question? Rio HTML 4 11-05-2004 08:11 AM
Mozilla Mail troubles (newbie) Orlando Firefox 0 10-31-2003 01:44 PM
Could not load type VTFixup Table from assembly Invalid token in v-table fix-up table. David Williams ASP .Net 2 08-12-2003 07:55 AM



Advertisments