Dear Michaelbluejay -
Fortunately your problem does not require very difficult CSS. I have
put together a simple document that places two tables on top of each
other without using an absolute reference. You can easiliy modify the
code to suit your needs.
The document has been tested on Internet Explorer and Mozilla. Both
the HTML and the styles of this document has been validated at W3.org.
For your reference, the links to validate CSS and HTML are:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
(These are two of the most useful links you will ever put in your
webmaster toolbox.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Overlapping tables</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<style type="text/css" media="all">
table.first
{
margin: 0;
padding: 0;
width: 200px;
height: 200px;
color: #000000;
background-color: #ff0000;
text-align: center;
}
table.second
{
margin: 0;
padding: 0;
position: relative;
top: -201px;
left: -1px;
text-align: center;
width: 200px;
height: 200px;
color: #ffffff;
background-color: transparent;
}
</style>
</head>
<body>
<table class="first">
<tr>
<td>
<h1>TABLE</h1>
</td>
</tr>
</table>
<table class="second">
<tr>
<td>
<h1>TABLE</h1>
</td>
</tr>
</table>
</body>
</html>
******************
Note:
The Net abounds with guides to styles. You might want to look at for
instance:
http://www.w3schools.com/css/pr_class_position.asp
for details on positioning, or simply drop keywords like css and
tutorial into Google.
Good luck! |
Request for Answer Clarification by
michaelbluejay-ga
on
18 Dec 2002 22:18 PST
This is not what I'm looking for.
Obviously I can position the second table on top of the first one by
subtracting the height of the first table. The problem is that I
won't always know the height of the first table. And when I finish my
project, I'm going to have 20 tables in the document, and I'm NOT
going to be adding up the Height of the previous 19 tables to find the
value to set for the 20th, even if I knew what the height of those 19
tables were, which I don't.
I want to be able to set the location DYNAMICALLY, based on the
location of the first table. Surely there is a CSS or JavaScript
location property for the first table that I can reference when
setting the position of the second table. This is all I'm looking
for.
|
Clarification of Answer by
skorba-ga
on
19 Dec 2002 05:20 PST
Dear Michaelbluejay -
I misunderstood your question about CSS. And that is my fault - I
should have asked if you wanted a Javascript solution. Please accept
my apologies.
* * *
Clarification of answer:
I have modified the document to run a Javascript method called setPos
once the document is loaded:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Overlapping tables</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<style type="text/css" media="all">
table.first
{
position: absolute;
margin: 0;
padding: 0;
color: #000000;
background-color: #ff0000;
text-align: center;
}
table.second
{
margin: 0;
padding: 0;
position: relative;
text-align: center;
color: #00ff00;
background-color: transparent;
}
</style>
<script type="text/javascript"><!--
onload = setPos;
function setPos ()
{
var table_1 = new namedTable ('first_table');
var table_2 = new namedTable ('second_table');
table_2.style.top = table_1.style.top - 1;
table_2.style.left = table_1.style.left - 1;
}
function namedTable(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
//--></script>
</head>
<body>
<table class="first" id="first_table">
<tr>
<td>
<h1>TABLE</h1>
</td>
</tr>
</table>
<table class="second" id="second_table">
<tr>
<td>
<h1>TABLE</h1>
</td>
</tr>
</table>
</body>
</html>
* * *
Notes:
1)
The document still validates (both CSS and XHTML) at w3.org.
2)
It is tested in Mozilla and Internet Explorer.
3)
By force of habit I use the doc-type xhtml1-strict.dtd, but you should
not use this doctype when publishing for Mozilla. Use XHTML
transitional instead - or simply put in no header (which will let the
browsers run in Quirk mode, and be more lenient towards scripting
errors).
4)
If you further want to study this topic, here is a link to the most
precise and lightweight Javascript Positioning techniques I know of:
http://www.xs4all.nl/~ppk/js/
Good luck!
|
Request for Answer Clarification by
michaelbluejay-ga
on
19 Dec 2002 11:00 PST
Thank you, this is closer to what I'm looking for.
I would be interested in a solution that doesn't require nearly so
much code, though. The relevant line seems to be this:
table_2.style.top = table_1.style.top - 1;
Surely there is a way to refer to the first table without needing
ANOTHER function to refer to the name? I thought that one of the
whole points of JavaScript was that you could refer to any element on
a page without too much trouble?
Also, assuming there is a way to do this, can I run the command when
doing a mouseover, such as: on mouseover="table_2.style.top =
table_1.style.top - 1;" (or whatever the proper code is to set the
top of the second table to the top of the first)? I realize that may
be inefficient, since the position could get set repeatedly rather
than just once, but I still prefer that way if it's possible.
I don't need to set the Left property, since they're already the same.
BTW, this is for a menuing system I'm trying to write for a site I run
as a public service. It seems crazy that HTML/JavaScript/CSS whatever
doesn't have menu COMMANDS built in, you have to roll your own. Hence
a lot of code.
|
Clarification of Answer by
skorba-ga
on
20 Dec 2002 03:02 PST
Dear Michaelbluejay -
<< It seems crazy that HTML/JavaScript/CSS whatever
doesn't have menu COMMANDS built in, you have to roll your own. >>
You are very right about that.
But it does not stop there: During the last years the web has changed
very much. There are many standards, some on the way in, some common,
and some very outdated indeed. This is a problem, but there is nothing
we can do about it.
Some people use old and outdated software to surf the web. The only
thing these old browsers have in common, is that they can render
straight HTML. And Javascript is not straight HTML. There is nothing
anyone of us can do about that. I hope you understand this simple
fact.
<< Surely there is a way to refer to the first table without needing
ANOTHER function to refer to the name >>
I am sorry about this, but you actually need another function to check
what kind of Javascript that is running on the user's setup.
A table is an object. If you want to access the properties of this
object, then several of the most common browsers have DIFFERENT ways
of doing this. And that is just the way it is.
Let me try to explain:
Several years ago Netscape invented the concept of layers. Which gave
developers like you the opportunity to create stunning web pages, with
total control of how layers were stacked on top of each other, and
their position.
A developer would put the tags <layer name="somename"></layer> around
the content they wanted to position. And with javascript they could
access this content with the command document.layers['somename'] -
position it, hide it, show it etc.
Microsoft, on the other hand, did not implement the concept of layers.
They developed another document model. To access the properties of an
object, you would instead use javascript to ask for the object
document.all['somename'] - and then you could set styles, position the
object etc.
(Remember, this was the years of the browser wars, where it seemed
that those who controlled the most common browser would rule the
planet.)
Well, today both of these techniques are on the way out. If you for
instance are using Internet Explorer version 6, then the correct way
to ask for an object, is to use the term
document.getElementById('somename'). And then you can proceed to set
styles and position the object.
And this is the reason, as you say, that you need ANOTHER function to
refer to the name. This way of coding stuff was developed by regular
guys like you and me to try to cope with the different ways the
browsers implement Javascript.
If you look closer at the function, you will see that there is a
pattern:
function namedTable(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
First the code asks: Does the concept document.getElementByID exist?
If yes, then use that specific concept.
If not, the code asks: Does the concept document.all exist?
If yes, then use that specific concept.
Finally the code asks: : Does the concept document.layers exist?
If yes, then use that concept.
* * *
Final notes: there is no way around asking what kind of code you need
to access certain properties. And in fact, the more advanced stuff you
want to create, the longer the list of different implementations
become.
The only way around this is to disregard all other browsers than one
single browser. You can for instance say: This menu system will only
run on InternetExplorer 6 and above. I will disregard any other
browser. THEN you can simplify your code a lot. But you will also have
many angry customers ...
If you want to know more about this subject, I repeat the links I
posted above:
http://www.xs4all.nl/~ppk/js/
This really is an excellent place to start when learning to code
dynamic web page lements.
If you simply want to download some freeware scripts others have
written, then this seems to be an excellent starting point:
http://www.dynamicdrive.com/dynamicindex1/
Google search terms: javascript dynamic menu css dhtml
I hope this answer will suffice. Good luck!
|
Clarification of Answer by
skorba-ga
on
20 Dec 2002 06:21 PST
By the way - when I wrote
table_2.style.top = table_1.style.top - 1;
I only put in the '-1' part so that the tables should be slightly off
- that way it is easier to see that you actually have two tables at
the same position. You will of course not have '-1' when coding your
final menu.
|
