how to set absolute position of images relative to screen center

Question

I try to set up a simple landing page for my website, and there will only be 5 images, ordered in a pentagon-like form. (the images will be at pentagons edges each). so instead of 5 images in a line or a row, there are 5 images in a "circle".

I was able to set the images in a responsive layout in the positions i want them, they are resizing on smaller screens and even the positions of the images are responsive.

but here begins the problem. the position of the images are set relative to the screen-borders

position: absolute; top: 50% left: 25%

for the first image, and so on for the other 4 images, in order to get them in positions of the five edges of a pentagon

when resizing the browser window the distance from one image to the other changes, of course this is because the position are set in relation to the window-borders.

and the order of the images of course breaks, until they will appear either to distant form each other or to close to each other.

is there no way to set images position in a absolute position in relation to a pre-set point on screen, such as the absolute center of the screen?

the five images should be responsive, but the order of the images and their distance to each other should always be in the same relation! (in order to keep the images in a circle, or otherwise said at the five edges of the pentagon)

right now I use following code with inline style, which looks great on a 980*1280px screen, but on smaller or bigger screens the position of the images is not anymore in the desired "pentagon" order:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body{
                background-color: #000;
            }

            .overlay1 {
                width: 10%;
                position: absolute;
                top: 50%;
                left:25%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .overlay2 {
                width: 10%;
                position: absolute;
                top: 25%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .overlay3 {
                width: 10%;
                position: absolute;
                top: 50%;
                left: 75%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .overlay4 {
                width: 10%;
                position: absolute;
                top: 75%;
                left: 37.5%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .overlay5 {
                width: 10%;
                position: absolute;
                top: 75%;
                left: 62.5%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <img src="site.com/content/uploads/2014/08/site-logo-vector- 280x280.png" class="overlay1" />
        <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay2" />
        <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay3" />
        <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay4" />
        <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay5" />
    </body>
</html>

UPDATE UPDATE UPDATE:

i edited following code (changed HTML as follows):

    <div class="container">
    <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri" />
    <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri1" />
    <img src="site.com/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri2" />
    <img src="site.com/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri3" />
    <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri4" />
    </div>

(changed CSS as follows):

    .container{
    height: 100vh;
    max-width: 100vh;
    border: 1px red solid;
    position: absolute;
    top: 0%;
    left: 0%;
    }

    img.ri
    {
    position: relative;
    max-width: 25%;
    }
    img.ri:empty
    {
    top: 23%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    img.ri1:empty
    {
    top: 50%;
    left: -5%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    img.ri2:empty
    {
    top: 50%;
    left: 25%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    img.ri3:empty
    {
    top: 60%;
    left: 30%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    img.ri4:empty
    {
    top: 60%;
    left: 40%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }

now everything is good, but i want the container to show always in the center of viewport (width only)

     (position: absolute; left:50%; )

my image.ri:empty is obviously not working for .container (works only with elements with no children's!!!!!!)

does anybody have any idea how to center this?

     position: absolute; left:50vw;

does not work as well.

the problem is obvious :

"Take note of the selector: img.ri:empty — empty is a structural pseudo-class which only matches elements which have NO children (an image should never have any). This is a CSS3 selector so IE8 and below will not parse the declaration. We could have used an alternative, such as Conditional Comments, but this seems a far more efficient solution and requires just six additional characters."

so how can i set a CONTAINER to a REAL center of the screen-width?

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

You can try setting the images inside of a div and giving that div a static width, so that when the screen is resized the relative positions of the images stays constant (basically making the div non-responsive)

EDIT: Try looking at this and let me know if that's what you're looking for :) What I did was, I created a wrapping <div class="container"> and gave it the following properties:

.container {
    border: 1px red solid;
    position: relative;    
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}

Then I added the following class to each image, as well as the .overlay# class you had (with some parts removed):

.picture {
    width: 10%;
    position: absolute;
    display: inline;
}

Reference: The second answer of this SO post

EDIT #2: An example of my comment below:

<div class="container">
    <div class="adjusted">
        // images, same as above
    </div>
</div>

And the extra CSS:

.container {
    /* same as above, plus the following line */
    top: 50%;
}

.adjusted {
    top: -100px; /* <--this would be half the height of your pentagon */
}

EDIT #3: I think I got it! There are two nested <div> containers, and there may be a few extra lines of styling, but it's pretty close. I think if you play with this then you might be able to make it work.

Good luck!

edited May 23 '17 at 11:50

Community

1
1

answered Aug 12 '14 at 22:13

RemedialBear

644
5
15

i thank you for that solution, i already was there as well by myself and what i didn't like is the fact that the "pentagon"remains in the top half of mobile screens, means the pentagon does not appear in the ABSOLUTE center of the screen but only in the top-center. thats way i came away from that solution. if there is a possibility to center the container to a absolute center, means centered in width and height as well on every screen size, let me know :) thank you again... – Aug 12 '14 at 23:20
The only other suggestion I have is to use `top: 50%;` for the parent `
` then move it up by half the height of the pentagon (by nesting another `
`). This may work, since you want the distance between the images to remain constant, which will give you a constant height.
– RemedialBear Aug 13 '14 at 00:46
your approach goes close, i was just trying to modify as follows: in smaller screens move the entire box to the center of screen, (position absolute; top50%; left50%) and when on bigger screens, resize the box to fit the screen height and so the scroll will be removed. (i was trying to use a @media screen and (orientation: landscape)) but it was not working. any idea? – Aug 14 '14 at 00:35

score 1 · Answer 2 · edited Aug 13 '19 at 08:09

I HAVE THE SOLUTION: :)

anyway, something really confusing happens:

this is the (i guess) cleaner version of the code,:

fiddle example

     #outer {
     position: relative;
     }
     #inner {
     margin: auto;  
     position: absolute;
     left:0;
     right: 0;
     top: 0;
     bottom: 0;
     }
     .parent{
height: 100vh;
max-width: 100vw;
border: 1px black solid;
position: absolute;
top: 0%;
left: 0%;
}
   .container{
height: 100vh;
max-width: 100vh;
border: 1px red solid;
position: relative;
top: 0%;
left: 35%;
}

img.ri
{
position: relative;
max-width: 25%;
}
img.ri:empty
{
top: 23%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri1:empty
{
top: 50%;
left: -5%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri2:empty
{
top: 50%;
left: 25%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri3:empty
{
top: 60%;
left: 30%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri4:empty
{
top: 60%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
     <div class="parent" id="outer">
     <div class="container" id="inner">
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri" />
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri1" />
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri2" />
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri3" />
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri4" />
    </div>
    </div>

anyway, look AT THIS!!! (in the same fiddle example, just modify code as follows:) remove the entire #outer html and css, and add a "}" sign at line 12 of css, and you get same result, only the outer border is removed...

WHY IS THIS???? it seems almost impossible to me, as this is a extra "}" sign and should break the code or am i wrong???

thank you for your help!

i hope my solution helps future seekers :)

score 0 · Answer 3 · answered Aug 12 '14 at 22:45

0

well, I think your method isn't the best because it will always have a random element. I'd try using something like JQuery responsive image maps plugin for a better behavior, but if you're dead set on this approach, I'd try something like this:

1) first, build a "container box" for this element.

2) Then, inside it, build a 5x5 square grid (you'll need to use either Jquery to detect width or use absolute width with CSS). It's very important that these divs have the same width and height, even if empty.

3) Make all image widths 100%. After this, place the images like this: 1st image: 1st row, 3rd column 2nd and 3rd image: 1st and 5th col, 3rd row 4th and 5th image: 2nd and 4th col, 5th row.

This WILL WORK. And it will be 100% responsive. But quite honestly, I don't think it will look nice, so I encourage you to either use the JQuery path or to embrace the responsive models, and if you don't have a pentagon in a mobile, so be it. Of course, depends on your needs and taste

answered Aug 12 '14 at 22:45

Devin

7,690
6
39
54

thank you for your idea, i had a look at this JQuery responsive image maps plugin, seems it does quiet a cool job, looking a the the picture they put a s example... i do actually not understand how it works, and looking at the code of the image they put as example i where scared... lots of coding :) and i am a bloody beginner... but you are right. nice looking stuff needs nice looking code :) – Aug 12 '14 at 23:46
well, then use the other code, it's simple html and it's bulletproof, I just don't think it will look fine at really small sizes like mobile – Devin Aug 13 '14 at 01:02
this approach would be great, but the geometry of the pentagon is not correct, unfortunately, as pentagon edges does not arch exactly the positions in 5 squares grid. since there is no way to make a 5 squar grid with different sizes of boxes, it is not useful for me, but THANK YOU ANYWAY, for your fast ideas and help :-) – Aug 14 '14 at 00:37

how to set absolute position of images relative to screen center

3 Answers3