Absolute position for items in table

**nycguurl** · 10-06-2007, 05:28 PM

Please help me. I'm lost...
I found this script to position images absolutely within a table, so that you can overlap images and so forth. But I don't understand exactly how to word the absolute positioning part. Whenever I try, my images jump right out of the table!

Here's the script:

Set the <td> to have position:relative and absolutely position the images inside of it.

<table><tr>
<td style="position:relative">
<img src="imageA.gif" class="status">
<img src="imageB.gif" class="status">
</td>
</tr></table>

with the same style for the .status class.

Can somebody add in an example absolute positioning part for one of the images? Thanks!!!!!!

**jscheuer1** · 10-06-2007, 05:53 PM

That's not a script. It is style css. If it worked as intended, which it would in IE 6, not in many, if any others. It would establish the td as a container for the the absolutely positioned images. However, most browsers will not allow a td to have relative positioning. You could do it like so:

Code:

<table><tr>
<td>
<div style="position:relative;width:100%;height:100%;">
<img src="imageA.gif" class="status">
<img src="imageB.gif" class="status">
</div>
</td>
</tr></table>

But you might not notice anything different because the table and/or td would need to have a width and height established somehow. Also, if the 'status' class is identical (which, as a class selected style it would have to be) and positioned absolutely, imageB.gif would cover imageA.gif.

Floats might be a better way to position images in a table cell:

Code:

<table><tr>
<td>
<img src="imageA.gif" style="float:left;">
<img src="imageB.gif" style="float:right;">
Some text could go here and appear between the two images, 
as long as there is room for it there.
</td>
</tr></table>

**nycguurl** · 10-06-2007, 07:30 PM

Hi John, thanks for the reply!

What I need is to be able to move an image wherever I want over another one. So align left or right is out. Can I have it where I can set the image (let's say image #2) to go in exact pixels where I want it to be, so it ends up placed just where I want it over the first image?

By the way I cannot use a graphics program to combine the images. The whole thing is, I have a tooltip attached to the bottom image, and then I want to layer the top image over that one.

Hope I gave you enough info for an answer...

**coucou** · 10-06-2007, 08:02 PM

show me some code

**jscheuer1** · 10-06-2007, 08:26 PM

How about a link to your page?

**jscheuer1** · 10-06-2007, 08:40 PM

I was thinking about this some more. If all you want is for B to cover A, something like so should work:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.status {
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<table style="width:150px;height200px;"><tr>
<td>
<div style="position:relative;width:150px;height200px;">
<img src="imageA.gif" width=150 height=200 class="status">
<img src="imageB.gif" width=150 height=200 class="status">
</div></td>
</tr></table>
</body>
</html>

**nycguurl** · 10-06-2007, 09:59 PM

Hi John. I'm sorry I don't have the site online yet because I'm still making it.

I don't want to cover an image completely. The pics are actually totally different sizes, and I just want to place one in a special place on top of the other.

Really, I wish there was just some way to put the absolutely poistioned pics in a div container. But when I do, the container cannot be centered, right? If it could, then it would look good in any computer resolution. As it stands right now, I can estimate the position of the container to the middle of the page, but the minute I switch to previw in another resolution, obviously I lose the centering.

Is it impossible...

**jscheuer1** · 10-07-2007, 02:40 PM

Originally Posted by nycguurl

I don't want to cover an image completely. The pics are actually totally different sizes, and I just want to place one in a special place on top of the other.

Really, I wish there was just some way to put the absolutely poistioned pics in a div container. But when I do, the container cannot be centered, right?

Divisions can easily be centered when using a transitional HTML 4.01 DOCTYPE or higher with valid URL, as in the below example:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.overlap{
position:relative;
width:300px;
height400px;
margin:0 auto;
}
.status {
position:absolute;
}
#s1 {
top:0;
left:0;
}
#s2 {
top:75px;
left:100px;
}
</style>
</head>
<body>
<div class="overlap">
<img id="s1" class="status" src="imageA.gif" width=300 height=400>
<img id="s2" class="status" src="imageB.gif" width=150 height=200>
</div>
</body>
</html>

**nycguurl** · 10-08-2007, 03:49 AM

I tried it, but everything stayed on the left. It's probably me...

Ok, I'm going to try something new. I will try an image slideshow. I have a question about it though but I'm not allowed to post it in here because it's a Dynamic Drive script. Maybe you'll be so nice to come over there... (pleeeeze?)

**jscheuer1** · 10-08-2007, 03:59 AM

Well, I'll look for your post. As far as this thread goes, we have reached a point where I would need to see a demo of your best effort somewhere live. Can't you just put up an example of the page where:

I tried it, but everything stayed on the left.

There are many things that can go wrong, not specifying the proper width and height for the containing division, not using a proper DOCTYPE, not to mention things that I can't imagine unless I see them.

Thread: Absolute position for items in table

Thread Tools

Search Thread

Absolute position for items in table

Bookmarks

Bookmarks

Posting Permissions