Solved

Trouble with Tables 2 ....

Posted on 2000-02-23
17
161 Views
Last Modified: 2010-04-09
I am having difficulties getting tables to do what I want them to do!
The example of the problem, with a short explaination is at this URL:

http://www.angelfire.com/nf/Viking1000/

I would really appreciate assistance.
0
Comment
Question by:Luby
  • 8
  • 5
  • 4
17 Comments
 

Author Comment

by:Luby
Comment Utility
Although I have given the points for the question in a previously posted message, the answer was not exactly what I was after. Therefore here it is again.
The text of the URL asks:

"Why does this work like this, and how can I set the table so that 1)equal widths are in the columns at either side of the image and 2)the image fills the middle column. I've tried several variations using % size and pixel size for each column. (Perhaps you should not
mix % and pixel in the same table??)
3)Important: I would also like to set the table width in % of screen size NOT in pixel size.
0
 
LVL 1

Expert Comment

by:sureshkumar
Comment Utility
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%"
BACKGROUND="key.gif">
<tr>
<td>&nbsp;</td>

<td><img SRC="graphic.gif" height=72 width=500></td>

<td>&nbsp;</td>
</tr>
</table>

now you can adjust widths of cells what ever you like it

further queries
sureshkumar
0
 

Author Comment

by:Luby
Comment Utility
Ok sureshkumar,
I have added the code you suggested. In fact I added thirty (30) of the &nbsp; html characters in between each of the tags. The problem is still that the center column isn't filled by the 700 pixel wide graphic! How do I set the column in the center to be no wider than 700 pixels, when the table size is set in the <table> tag to 100%?

See updated URL for progress.

http://www.angelfire.com/nf/Viking1000/
0
 
LVL 3

Expert Comment

by:MorFF
Comment Utility
Nope guys, this is the way to do it.

<table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%" BACKGROUND="key.gif">
<tr>
<td WIDTH=20%></td>

<td WIDTH=60% ALIGN=CENTER><img SRC="graphic.gif" height=72 width=500></td>

<td WIDTH=20%></td>
</tr>
</table>

You can now fiddle with the width of the individual table cells, and the graphic will always centre in the middle cell.

Cheers - MorFF
0
 
LVL 3

Expert Comment

by:MorFF
Comment Utility
PS, you don't need any &nbsp 's either
0
 

Author Comment

by:Luby
Comment Utility
OK. Now I've tried MorFF's way using 40%-60%-40% and table width=100%. You can see the results at the same URL as listed above.
This doesn't seem to work either. I am using netscape 4.7 to view. Could this make a difference?
Who's volley?
0
 

Author Comment

by:Luby
Comment Utility
..of course the above should have read 20%-60%-20%   typo...oops!
0
 
LVL 3

Expert Comment

by:MorFF
Comment Utility
Looks just fine to me v (I'm on ie5 tho')  I'll have a look via netscape tho', you play keepy-uppy just now.

Cheers - MorFF
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:Luby
Comment Utility
I hang on...
0
 
LVL 1

Expert Comment

by:sureshkumar
Comment Utility
hi luby,

the main problem is

you have to reduce the image size otherwise even though you are adjusting the cell width the navigator never recognise.

So solutions are :

1.take small image.

2. adjust image width and height (problem is clarity will reduce).


further queries
sureshkumar
0
 
LVL 3

Accepted Solution

by:
MorFF earned 100 total points
Comment Utility
Luby,

Tried with Netscrape (v4.5 is the latest I've got)

If you put a couple of &nbsp's in the empty table cells, the background gif will display in them again (code pasted below).  I think it's to do with Netscape not displaying empty cells - even the background.  Another thing is that it doesn't tile as nicely as it does in IE either.

Cheers - MorFF

<table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%" ALIGN=LEFT BACKGROUND="key.gif">
<tr>
<td WIDTH=20%>&nbsp</td>
<td WIDTH=60% ALIGN=CENTER><img SRC="graphic.gif" height=72 width=500></td>
<td WIDTH=20%>&nbsp</td>
</tr>
</table>

0
 

Author Comment

by:Luby
Comment Utility
This is it! This does exactly what I was looking for. It must be the combination of specifying the percent values and adding the &nbsp; to the empty cells. Strange that it behaves differently when specifying the column width in pixels, but that's tables for ya. I would never want to teach HTML considering the exceptions to this and that. There seems to be a special way to do everything. No "pat" answer seems to exist for all situations, particularly when dealing with tables and the cross-platform problems.
Thanks for your time and thanks to all the others who made great attempts at providing the best answer. Hopefully we all learned sometime in this exercise.

Good Day all!
0
 

Author Comment

by:Luby
Comment Utility
"...all learned something...." gotta learn to type.

8^)
0
 
LVL 1

Expert Comment

by:sureshkumar
Comment Utility
i have given same answer to you.But i unable to understand why you rejected my answer and accept same answer from someother one.This is very bad.Dont do such foolish things again.


Note:
I am giving this comment only for your future reference not for points.


sureshkumar
0
 
LVL 3

Expert Comment

by:MorFF
Comment Utility
sureshkumar;

The point of EE is that the 'Experts' help the 'questioners' to solve their problems.  If your answer did not solve the problem in the question, then the questioner has every right to reject the answer or ask for further clarification.

Coming back on to chastise the questioner for accepting an answer that solved his problem does noone any good.

If you examine it properly, your answer and my answer were not the same.

Maybe I should say to you - This is very bad. Dont do such foolish things again.

A little bit childish isn't it?

Love and kisses - MorFF
0
 
LVL 1

Expert Comment

by:sureshkumar
Comment Utility
(The point of EE is that the 'Experts' help the 'questioners' to solve their problems.  If your answer did not solve the problem in the question, then the questioner has every right to  reject the answer or ask for further clarification. )

you said EE meaning that is right.

In this site we will give some assistance to questnaires.right. we never producing full answers.If we are producing full answers i think then this site address will change to Answers-Exchange.Not Experts-Exchange.


And one more important thing you said there is difference between your answer and my answer when i am observed i found only one difference that is i have not mentioned cell width i said ( now you can adjust widths of cells what ever you like it ). You mentioned cell widths also.

Take light.....................


Love and kisses - sureshkumar
0
 

Author Comment

by:Luby
Comment Utility
Look carefully now, sureshkumar. These two snippets of code are the different answers to the question. I can see the difference. MorFF obviously can see the difference. Can you see the difference? These two pieces of code each act differently in Netscape 4.x. I can't say what they do in another browser. MorFF addressed the potential dofference between browsers. He, in fact, was the first person to solve my problem.
With regards to your argument about "we never producing full answers". Maybe a different way of thinking is required on your part if you are to be chosen next time as well. While this site is called Experts Exchange, there is no requirement, nor is there much chance, that all of the users be "experts" in ALL the topic areas.
I will be the first to admint that I am no expert in HTML, hence, the question.
After carefully considering all the answers, it was clear to me that the BEST answer WAS chosen.
Regards,
________________________________________
<td>&nbsp;</td>

<td><img SRC="graphic.gif" height=72 width=500></td>

<td>&nbsp;</td>

________________________________________
<td WIDTH=20%>&nbsp</td>

<td WIDTH=60% ALIGN=CENTER><img SRC="graphic.gif" height=72 width=500></td>

<td WIDTH=20%>&nbsp</td>
__________________________________________
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now