How do we get (Santa) image to be within desired Zone

[dean_ansari]

Hey all,

We have added a Santa image to our home page, to go with the Season.
We would like this Santa image to be within 25% to 75% of center on the right and -25% to -75% of center on the left. You can see what I mean here:

The non profit Social network & Search engine

We are using:
position: absolute; margin-top: 10em; margin-left: xem;

with x dynamically generated by PhP. But we are not getting the desire effect exactly as the Santa image is sometimes too close to center and sometimes off the screen on left & right.

Any suggestions?

Regards,

[Erik_J]

Hi @dean_ansari, Welcome to the forum!

I think the inconsistent place of the Santa image could be that it relies on its left and top auto coordinates. It is a good idea to move the image by margins, but it will move referring to the auto position that could shift depending circumstances, see @PaulOB’s thread : dcode-understanding-css-positioning

Give Santa the coordinates for the margins to move from, and also give the parent container a position to refer the coordinates to.

I suggest you try something like e.g.:

.bg_w_foto {
    position: relative; /* add position */
}
.santa_float{
    position: absolute;
    bottom: 0; /* add suitable coordinate */
    left: 50%; /* add suitable coordinate */
    margin-bottom: -5em;
    margin-left: -30em;
}

Post what you try to do to make it work as you intend.

EDIT)

@dean_ansari

with x dynamically generated by PhP

I don’t think that is necessary when Santa knows where he is.

EDIT)
Clarifying: Use the margin to move the same coordinate in neg or pos direction.

[dean_ansari]

Erick,
1st, Thanks for this suggestion. We are going to try it.

2nd, why the hek has Sitepoint new registeration I was forced to go through has changed my nick-name here to my actual name! And I have lost all my associated points