OK, kids, I've picked up a couple of books and I'm trying to learn how to do some rather complex placement of graphics objects using the modern new tools instead of relying on tables.
The main page of this site is actually graphically rather complex, but when I created it in June of 2001 I didn't know anything about CSS and wasn't very interested in learning. But now I've gotten curious about it, and I've already learned quite a lot. And I've run up against a problem that has me totally stumped, because the only way I can find to solve it is to use a table, or to use some very complex Javascript. Since what I'm trying to do is to center something, that seems strange that I can't find any other solution. But what I'm trying to center is somewhat complex, and there seems to be an interaction that's preventing me from doing it.
So here's a simplified example of the kinds of things I'm trying to do. It is representative but not typical.
First, there's a file which contains a picture of a face (which I downloaded):
There's also an animated GIF which makes the eyes blink, which is not the same size as the face. (That's a critical piece of this puzzle: the images will not be the same size.)
The idea is to merge these two on the page so that what you see is a face with blinking eyes, and to have that face-with-blinking-eyes be centered the way the above two images are. In order for that to happen, the eyes have to be on top of the face, and moved 30 pixels to the right and 121 pixels down relative to the upper left corner of the face. (Which means the eyes should be on a higher Z-layer than the face.)
That is very easy if you're willing to physically force an absolute position in the page, but it's a bit more challenging if what you'd really like is for the face to be a floating object inside of the page, and for the eyes to physically track the face as it floats. However, I've got that working:
The essential code looks like this:
<head>
<style type="text/css">
#face {position:relative; top:0px; left:0px; z-index:0;}
#eyes {position:absolute; top:121px; left:30px; z-index:1;}
</style>
</head><body>
...
<div id="face">
<img border="0" src="face.gif">
<div id="eyes">
<img border="0" src="eyes.gif">
</div>
</div>
...
</body>
That's what is actually in the source to this page to show the face just above, although the names are actually "face01" and "eyes01" to show that particular image because there are going to be others later with different declarations.
The <div> for the eyes is declared absolute, but it appears inside of the <div> for the face. That sets its context as being the containing <div>, which is the one which is declared for the face.
It's important to note that it is the presence of a "position" in the face's declaration that makes it create an origin for the eyes. If the face didn't have a "position" declaration, the eyes would, more or less, look right through to the next higher thing that had a position, which in this case would be the entire document. Thus if the "face" had no "position" declaration, the eyes would display at a position of 30/121 relative to the document, up in the upper left-hand corner, laying on top of the initial text. (You can see an example of that here.)
Both objects must have "position" declarations. The eyes must be "position:absolute", the face must be "position:relative", and the div containing the eyes has to be inside of the div which contains the face. Otherwise they don't overlap properly, or don't float, or fail in any of several other ways.
It will be noted that I'm using IDs for this. That's because I'm actually experimenting with browser-based animation, and I need the IDs so I can dynamically play with visibility and position. I plan on having objects turn on and off, and move around, in response to mouse actions.
Just beneath her face is the phrase "Change Mouth". Try clicking it if you have Javascript enabled. It makes the mouth change by mapping and unmapping an alternate version which lays on top of the face, just as the eyes do. The mouth graphic looks like this:
