PDA

View Full Version : 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! :eek:

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!!!!!! :o

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:


<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:


<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! :o

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... :cool:

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:


<!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... :confused:

jscheuer1
10-07-2007, 02:40 PM
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:


<!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.

nycguurl
10-08-2007, 04:16 AM
Yes, you are 100% right. You'd need to see it. But I realized this choice was waaaaay too hard for me because I am just a little newbie. But I feel happy some other people will benefit from your wise words on the thread anyway... :o

nycguurl
10-08-2007, 05:14 PM
On second thought, I'm back. I tried the slideshow way, and it wasn't really conducive to what I'm really trying to make happen. Of course your answer (John) to that thread was brilliant, and I've filed it away for later. But I don't wanna give up on this centering thing just yet. I did as you said and put my best effort online (not so impressive as you will see, lol). Just to reiterate, I want to have absoluely positioned items for which I'm layering one on top of another to render as centered no matter the screen resolution. So I tried 2 ways--in an absolutely positioned div, or in a table. Here's my dilemna:

With the div I can absolutely position the items inside so they stay grouped, but I can't center the div.
With the table, I can center the actual table but can't get the items absolutely positioned inside it.
Oh, the frustration. I need both. I need the items absolutely positioned, and then whatever container they're in to be centered on the screen.


Here's my 2 attempts:
http://moneytreeaffiliates.com/Practice-1.htm
http://moneytreeaffiliates.com/Practice-2.htm

(As you can see in the second one, I can't get the "We can help" gif where I want it like I have in the first link.)

Please don't give up on me... :rolleyes:

jscheuer1
10-08-2007, 06:55 PM
Use this entire page, the exact code, from the opening DOCTYPE to the closing </html> tag:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>New Page 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.container {
position:relative;
width:759px;
height:273px;
margin:0 auto;
}
.abs_im {
position:absolute;
border:none;
}
#im1 {
top:0;
left:269px;}
#im2 {
top:0;
left:0;
}
#im3 {
top:62px;
left:352px;
}
</style>
</head>
<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="container">
<img class="abs_im" id="im1" alt="" src="images/Practice2.bmp" width="469" height="273">
<img class="abs_im" id="im2" alt="" src="images/Practice1.bmp" width="229" height="229">
<img class="abs_im" id="im3" alt="" src="images/Practice3.gif" width="102" height="26">
</div>
</body>
</html>

nycguurl
10-08-2007, 09:24 PM
John, I wish I could thank you like 12 times. IT WORKED!!! I can't believe I've been trying this for so long and just like that you solve my problems. This fixes an issue I had on like 50 pages or more. Thank you. I'm so happy! :o

nycguurl
10-09-2007, 01:37 PM
Oh no. I implemented it, but 2 problems happened. :eek:

1) When I open it in the browser I get this error message saying "To help protect your security, Internet Explorer has restricted this file from showing active content that could access your computer." And there's a yellow exclamation point blocking the cursor from clicking anything on the page. I don't want people to get this error because they'll become disenchanted with my site and question its security.

2) When I try to incorporate all the rest of the content on my page, it all renders very distorted in the preview. For instance, crazy stuff is happening like buttons and pictures are all piling up on top of one another in the preview.

Do you know what I can do to fix this :confused:

nycguurl
10-09-2007, 03:49 PM
Ok, I think that information bar block thing is just on my computer.

So now it's just the fact that other stuff I'm adding to the page is jumbling up. Can it be that I have other div's on the page and they have to be coded the proper way to like... be uniform and correspond to that code you gave me?

nycguurl
10-09-2007, 04:41 PM
Update: I discovered the distorted item in question was occuring because it was a special fade-in menu that contained images also named "im1", "im2", "im3" just like in the code you gave me... so no wonder the poor page was getting confused about which code to follow for them. LoL. I changed their names and now they are fine. Ok, so that's fixed. Now I'm just trying to add a mouseover to one of the images in the code from you. So far no luck, but I'll be back... :rolleyes:

nycguurl
10-09-2007, 06:02 PM
Sorry for the multiple posts in a row, but I didn't think it would be prudent to delete or edit any of them in case anyone was following this thread. Ok, I promise this will be my last question (I think, maybe). Everything's ironed out except this last issue. I need an image mouseover on one of the pics in the container, and I tried everything under the sun with no success. I bet it's just something so simple I'm not wise enough to know or find. I really, really tried. Here's my link so you can see where I attempted to apply the image mouseover and the hyperlink:
http://moneytreeaffiliates.com/Practice.htm

P.S. I changed each "im" to "pic"

Thanks in advance! :o

jscheuer1
10-09-2007, 07:31 PM
The mouse events need to be a part of the image tag in this case:


<a href="http://mydomain.com"><img
onmouseover="this.src='Practice4mouseover2.bmp';"
onmouseout="this.src='Practice4mouseover1.bmp';"
class="abs_im" id="pic1" alt="" src="Practice4mouseover1.bmp" width="469" height="273">

Also, you shouldn't use .bmp on the web - too many bytes. Use (convert to) .jpg for picture type images, and use the most compression you can without distorting the image. Use .gif for line drawing type images and use as few colors as possible without losing overall quality.

You should also preload the mouseover image(s).

nycguurl
10-09-2007, 07:55 PM
I knew the .bmp thing was gonna come up. I wish there was a way to change over to jpeg but when I do, even when I save at a high resolution every single picture ends up distorted. I bet that's why I use a lot of bandwidth! :eek:

I updated the code to exactly what you said and nothing's happening when I mouseover. The other image isn't coming up.
In read today that in CSS you have to tweak the code to get the image mouseover to show up in IE, which is what I'm using.
I really really reeeeally need the mouseover to show up in IE too. :(
Here's my link again:
http://moneytreeaffiliates.com/Practice.htm

jscheuer1
10-09-2007, 09:50 PM
It's working here, you may need to clear your browser's cache. Also, I don't think you've fully thought out the logic of when you want the image to change. It would probably be better to use two small images of just the 'click here' button.

As it is now, you are swapping a huge image (takes time) and when you mouseover the 'we can help' image, you are actually mousing out from the larger image it covers.

Any decent image editing software can convert from .bmp to .jpg without apparent distortion.

nycguurl
10-09-2007, 10:13 PM
Yes, this is true that using 2 smaller images on that part would be better. It being done that way was the leftover remnants of when I couldn't get any of the images absolutely positioned where I wanted them. But now with the new div code, I can certainly change that.

As for the .bmps, I use Image Composer and it constantly degrades the image quality when I attempt to switch to jpeg. I'll try another program, though.

But about my not being able to see the rollover effect in IE, I found an entire Google search full of the fact that the CSS rollover coding must be manipulated to work for IE. I just thought maybe you'd have some magic for it. :rolleyes:

Are you seeing it in IE?

P.S. My cache is clear and my cookies are gone too.

nycguurl
10-10-2007, 01:22 AM
Would you believe it's working now? Temperamental, computers are. :rolleyes:
Thanks soooooo much for all your help John!!!!

Till next time...

jscheuer1
10-10-2007, 05:23 AM
For editing images, I use the not too expensive Paint Shop Pro. The Gimp is equivalent and free. Photoshop is good too, but quite expensive.

About IE css rollovers. What you say is true. But these are not css rollovers. Those can be accomplished via background images and the hover pseudo class. In IE less than 7, an anchor link must be employed, and it can get tricky. However, for what you are doing, the javascript rollovers you have are fine, and work the same in all modern browsers, provided (as most folks do) javascript is enabled. Since the rollover isn't crucial, it's OK if the few non-javascript enabled users miss it.

You should still preload the mouseover image. Put this simple script in the head of your page after the style block:


<script type="text/javascript">
var imageover=new Image();
imageover.src='Practice4mouseover2.bmp';
</script>

Hopefully you soon will be changing Practice4mouseover2.bmp to a smaller .jpg or .gif image. When you do, just update its name in the above code.

nycguurl
10-10-2007, 01:34 PM
Oh wow! You read my mind! I wanted to come back here and ask how to preload the mouseover with that code, but I didn't dare because I didn't want you to be like "Oh no she's back." LoL! Thank you. :o

Ok I will try to edit my images soon. It's so true...

nycguurl
10-11-2007, 11:49 PM
Goodness, I'm sorry I'm back because something happened. Now that I have everything funnctioning properly with the CSS container thing, suddenly my colored scrollbar is gone! I wonder what happened. I tried it 2 ways. Please tell me what I can do... :o


My first way:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.container {
position:relative;
width:759px;
height:273px;
margin:0 auto;
}
.abs_im {
position:absolute;
border:none;
}
#pic1 {
top:0;
left:269px;}
#pic2 {
top:0;
left:0;
}
#pic3 {
top:62px;
left:352px;
}
#pic4 {
top:201px;
left:476px;
}
</style>



<style type="text/css">
body {
scrollbar-arrow-color: FFFFFF;
scrollbar-base-color: 0099CC;
scrollbar-dark-shadow-color: 0099CC;
scrollbar-track-color: FFFFFF;
scrollbar-face-color: 0099CC;
scrollbar-shadow-color: 0099CC;
scrollbar-highlight-color: 0099CC;
scrollbar-3d-light-color: 0099CC;
}
</style>



My second way:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.container {
position:relative;
width:759px;
height:273px;
margin:0 auto;
}
.abs_im {
position:absolute;
border:none;
}
#pic1 {
top:0;
left:269px;}
#pic2 {
top:0;
left:0;
}
#pic3 {
top:62px;
left:352px;
}
#pic4 {
top:201px;
left:476px;
}
body {
scrollbar-arrow-color: FFFFFF;
scrollbar-base-color: 0099CC;
scrollbar-dark-shadow-color: 0099CC;
scrollbar-track-color: FFFFFF;
scrollbar-face-color: 0099CC;
scrollbar-shadow-color: 0099CC;
scrollbar-highlight-color: 0099CC;
scrollbar-3d-light-color: 0099CC;
}
</style>

jscheuer1
10-12-2007, 02:36 AM
Once you started using an HTML 4.01 transitional DOCTYPE with a valid URL, you changed the rules a little. One thing that changed was that you could now center an element (in this case a division) by giving it width and margin:0 auto;. This is because all modern browsers will see that DOCTYPE and follow the rules (often called 'almost standards compliant') associated with it.

Another thing that changed is that scrollbar styles which previously applied to the body element no longer work. This is also because of the rules associated with the DOCTYPE. Scrollbars aren't really on the body anyway. They are on the page at the root (html) level. To make a long story short, just use:


html {
scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #0099CC;
scrollbar-dark-shadow-color: #0099CC;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #0099CC;
scrollbar-shadow-color: #0099CC;
scrollbar-highlight-color: #0099CC;
scrollbar-3d-light-color: #0099CC;
}

Notes: As far as I know, only IE and Opera use the scrollbar styles. Also, the # prefix is required in 'almost standards compliant' css for both 3 and 6 digit hex color codes.

nycguurl
10-12-2007, 03:02 AM
Wow you are a genius! Perfect instructions as usual! ;)