Position fixed image different screen resolution

[beary]

Hi,

I have a 314 x 190 png which I want displayed basically halfway between the end of some form fields and the side of the #wrapper. So I put it in a div

<div style='position:absolute;left:45%;top:50%;'>
<img src=images/front1.png border=0>
</div>

which looks great on res 1280 x 1024, 1200 x 800, 1200 x 768, 1152 x 864

It's pushed to the right on 1024 x 768 and 800 x 600
It's pushed way left on 1600 x 1200

Two questions:
1) Which screen res are the important ones to get right?
2) I thought % would take care of the problem but I clearly don't uinderstand css enough. What do I need to change to have the image stay in the same position?

Many thanks for any answers

[drhowarddrfine]

Get a quicker answer

[Skeer]

Try putting the div outside of any parent with restricted widths then adding "margin: auto auto;" Which makes the div have auto left and right margins. In other words, centered. Try removing the right and left positions and play around with the "position" style. Make sure the div width is set to image width.

[beary]

@drhowarddrfine
Skeer, thanks heaps for your answer. It gives me something to try. It hasn't totally solved it, but it gives me something to go on. Much appreciated.

Drhowardfine, taking into account your 5,197 posts and the fact that you're designated an expert, your answer didn't help. I posted code. And I'm fairly sure that the answer to my 1st question (take another look) is not found on the page you linked to. Honestly, I appreciate the fact that you've made a lot of posts, but would it be possible to try and provide "answers"? (And please don't flame me, this is a genuine request.)

[drhowarddrfine]

@beary
And former moderator of this forum.

your answer didn't help. I posted code.

Reread the link I sent you. My first line is "I see these mistakes over and over again." and I'm seeing it again. That's why I created that post and it's been stickied there for years.

would it be possible to try and provide "answers"? (And please don't flame me, this is a genuine request.)

You'll get answers when you provide proper information. Again, reread the link I gave you. That's why it's titled "How to get a quicker and more complete answer." The information you give is not enough to answer the question. We can pass the ball back and forth for quite a while and still wind up with what you did with Skeer:

It hasn't totally solved it

If I'm going to take time to help solve your problem, I don't want to waste it going off in one direction only to find out you didn't have a doctype and that would solve everything with no effort.

The answer to your first question is....there is none. Pick one and someone will argue another, but THAT is not your problem. The problem is you can't get your image in the right place in different resolutions. Fixing that problem maybe makes the first question moot.

So, I provided you with a way to get a quicker better answer by giving more and better information with little to no guess work or minimal back and forth. If you want a lot of back and forth and guessing spread over several days, I'm sure Skeer will help you with that.

[beary]

@drhowarddrfine
Well I would've included that if I'd known! :)

More stuff you wrote

Fair enough. I see your points.

Actually, I was wrong: Skeer's efforts did solve the problem. I realised the containing div wasn't positioned relative and with his suggestion to margin:auto auto, it stays exactly where it should now in every resolution I can test.

But I completely take your point, as a post of the html and css would have shown you I was missing the position:relative.

The answer to your first question is....there is none.

Thankyou.

Fixing that problem maybe makes the first question moot.

Point taken...

So, I provided you with a way to get a quicker better answer by giving more and better information with little to no guess work or minimal back and forth. If you want a lot of back and forth and guessing spread over several days, I'm sure Skeer will help you with that.

Yeah I reckon he would as well :)

Thanks for your further explanations (sincerely). Case closed I think.