Connecting Tech Pros Worldwide Forums | Help | Site Map

Position fixed image different screen resolution

Familiar Sight
 
Join Date: Nov 2006
Posts: 161
#1: Jun 21 '09
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
Expand|Select|Wrap|Line Numbers
  1. <div style='position:absolute;left:45%;top:50%;'>
  2. <img src=images/front1.png border=0>
  3. </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's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,583
#2: Jun 21 '09

re: Position fixed image different screen resolution


Get a quicker answer
Newbie
 
Join Date: Jun 2009
Posts: 6
#3: Jun 21 '09

re: Position fixed image different screen resolution


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.
Familiar Sight
 
Join Date: Nov 2006
Posts: 161
#4: Jun 22 '09

re: Position fixed image different screen resolution


Quote:

Originally Posted by drhowarddrfine View Post

Get a quicker answer

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's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,583
#5: Jun 22 '09

re: Position fixed image different screen resolution


Quote:

Originally Posted by beary View Post

Drhowardfine, taking into account your 5,197 posts and the fact that you're designated an expert

And former moderator of this forum.
Quote:
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.
Quote:
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:
Quote:
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.
Familiar Sight
 
Join Date: Nov 2006
Posts: 161
#6: Jun 22 '09

re: Position fixed image different screen resolution


Quote:

Originally Posted by drhowarddrfine View Post

And former moderator of this forum.

Well I would've included that if I'd known! :)
Quote:
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.

Quote:
The answer to your first question is....there is none.
Thankyou.

Quote:
Fixing that problem maybe makes the first question moot.
Point taken...

Quote:
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.
Reply