How to make absolute positioning responsive?

[Limette]

I got inspired by sites like ribo.zone to have a homepage where you can click on various furniture items and objects as a way of navigating the site. I figured that the best way to do this is through absolute/relative positioning of the elements, which isn't something I've done before, so I experimented by making a rough css layout based on a sketch:




This was tedious, but surprisingly uncomplicated.

Now, the issue with this is that I used absolute pixel values for everything, so on smaller devices this will be difficult to navigate. Based on what a friend told me about her experiences with this, manually coding different layouts for different viewports would be a nightmare.

So, what would be the best way to make this layout responsive? The minimum thing I'd want it to do is to scale down to fit the user's viewport. On phones everything will be very small, but I think that's better than overflow, and I can still make custom layouts on top of this.

I guess one way to do it would be to set the width/height and positioning of everything in percentage values, but that sounds needlessly tedious and inefficient... if that IS the most viable method, what's the best way to calculate those values? I'm incredibly bad at math.

-----

Edit: Moved this topic to I Need Help, which I THOUGHT is what I originally put it in. Either way, I already got the answers I needed!

[Dan Q]

I guess one way to do it would be to set the width/height and positioning of everything in percentage values, but that sounds needlessly tedious and inefficient... if that IS the most viable method, what's the best way to calculate those values? I'm incredibly bad at math.

Percentages is probably what I'd do! The formula isn't hard. You're just measuring everything relative to the total size of the image in that dimension.

So suppose the whole picture is say 900px across. And the "welcome" board is 400px across. You'd set its width to be (400 / 900) * 100%. But here's the clever but: you don't even have to do the maths, because the calc() function in CSS will do it for you!

Here I've had a go at positioning the Welcome and Sitemap within the Room. I've assumed

- the room's "ideal size" would be 900px wide and 600px tall
- the Welcome board is 200px wide and 100px tall, and its top is 50px from the top of the room and its left is 400px from the left of the room
- the Sitemap is 150px wide and 120px tall, and its top is 240px from the top of the room and its left is 400px from the right of the room

Note that I'm only thinking in pixels here. But the magic comes when I make CSS "convert" that to percentages for me:

Code

<div class="room">
  <div class="welcome">
  </div>
  <div class="sitemap">
  </div>
</div>

<style>
.room {
  background: red;
  /* Original was 900px by 600px: */
  aspect-ratio: 900 / 600;
  /* But don't be wider than the viewport! */
  max-width: 100%;
  /* Allow us to position things absolutely inside it: */
  position: relative;
}

.welcome {
  background: blue;
  /* Position absolutely: */
  position: absolute;
  /* Original width was 200px out of the 900px room width */
  width: calc(200 / 900 * 100%);
  /* Original height was 100px out of the 600px room height */
  height: calc(100 / 600 * 100%);
  /* Original left position was 400px out of the 900px room width */
  left: calc(400 / 900 * 100%);
  /* Original top position was 50px out of the 600px room height */
  top: calc(50 / 600 * 100%)
}

.sitemap {
  background: pink;
  /* Position absolutely: */
  position: absolute;
  /* Original width was 150px out of the 900px room width */
  width: calc(150 / 900 * 100%);
  /* Original height was 120px out of the 600px room height */
  height: calc(120 / 600 * 100%);
  /* Original left position was 400px out of the 900px room width */
  left: calc(400 / 900 * 100%);
  /* Original top position was 240px out of the 600px room height */
  top: calc(240 / 600 * 100%)
}
</style>

Also available as a Codepen.

Prefer to use CSS variables so you don't have to keep typing the same numbers over and over? I've got you covered:

Code

<div class="room">
  <div class="welcome">
  </div>
  
  <div class="sitemap">
  </div>
</div>

<style>
:root {
  --room-width: 900;  /* pixels */
  --room-height: 600; /* pixels */
}

.room {
  background: red;
  /* Original was 900px by 600px: */
  aspect-ratio: var(--room-width) / var(--room-height);
  /* But don't be wider than the viewport! */
  max-width: 100%;
  /* Allow us to position things absolutely inside it: */
  position: relative;
}

.welcome {
  background: blue;
  /* Position absolutely: */
  position: absolute;
  /* Original width was 200px out of the 900px room width */
  width: calc(200 / var(--room-width) * 100%);
  /* Original height was 100px out of the 600px room height */
  height: calc(100 / var(--room-height) * 100%);
  /* Original left position was 400px out of the 900px room width */
  left: calc(400 / var(--room-width) * 100%);
  /* Original top position was 50px out of the 600px room height */
  top: calc(50 / var(--room-height) * 100%)
}

.sitemap {
  background: pink;
  /* Position absolutely: */
  position: absolute;
  /* Original width was 150px out of the 900px room width */
  width: calc(150 / var(--room-width) * 100%);
  /* Original height was 120px out of the 600px room height */
  height: calc(120 / var(--room-height) * 100%);
  /* Original left position was 400px out of the 900px room width */
  left: calc(400 / var(--room-width) * 100%);
  /* Original top position was 240px out of the 600px room height */
  top: calc(240 / var(--room-height) * 100%)
}
</style>

Again, there's a Codepen if you prefer.

This approach means you can still keep thinking in terms of pixels and make CSS do the maths for you. Each time, just remember that you're taking the "real" number, dividing it by the size of the room in that dimension, then multiplying by 100%... or rather: you're making CSS do that for you!

[Dan Q]

If you don't want your "room" to become larger than the original, then instead of max-width: 100%;, say max-width: min(100%, 900px); (assuming your ideal/original width would be 900px).

There are other approaches, though. Another one worth considering would be to make the whole thing as an SVG image, e.g. in Inkscape. You can still embed raster images (like JPEGs or PNGs or what-have you) in an SVG, but you can resize them dynamically.

A third different approach would be to scale it. This way, you can work in pixels just like you like, and then you use media queries to say "at less than THIS width, make everything THIS much smaller" to make a few "steps" down in size. Here's an example with two smaller scales:

Code

<div class="room">
  <div class="welcome">
  </div>
  
  <div class="sitemap">
  </div>
</div>

<style>
.room {
  background: red;
  /* Original was 900px by 600px: */
  width: 900px;
  height: 600px;
  /* Allow us to position things absolutely inside it: */
  position: relative;
  /* When we rescale it, pin the top left in place: */
  transform-origin: top left;
}

.welcome {
  background: blue;
  /* Position absolutely: */
  position: absolute;
  /* Original width was 200px */
  width: 200px;
  /* Original height was 100px */
  height: 100px;
  /* Original left position was 400px */
  left: 400px;
  /* Original top position was 50px */
  top: 50px;
}

.sitemap {
  background: pink;
  /* Position absolutely: */
  position: absolute;
  /* Original width was 150px */
  width: 150px;
  /* Original height was 120px */
  height: 120px;
  /* Original left position was 400px */
  left: 400px;
  /* Original top position was 240px */
  top: 240px;
}

@media (max-width: 900px) {
  /* When the window is less than 900px wide, scale down the room a bit! */
  .room {
    transform: scale(0.75);
  }
}

@media (max-width: 700px) {
  /* When the window is less than 700px wide, scale down the room a LOT! */
  .room {
    transform: scale(0.5);
  }
}
</style>

There's a Codepen for that as well. That approach is much more fine-grained control, but needs more testing (by making your browser wider and narrower and seeing where it "steps").

I hope those various examples provide help and inspiration!

[pepper]

... i did not know that you could define variables in CSS... 

Can you define functions as well? I know that there is a "class" but I considered it analogous to "id" and never considered it to be a true "class" in the OOP sense. Was I making an incorrect assumption? Is it actually a class as in you can have inheritance and encapsulation and all that?

I wonder how much object-oriented programming can you get away with in pure CSS without needing javascript? This is dangerous for my free time 

[Dan Q]

Can you define functions as well? I know that there is a "class" but I considered it analogous to "id" and never considered it to be a true "class" in the OOP sense. Was I making an incorrect assumption? Is it actually a class as in you can have inheritance and encapsulation and all that?

I'm afraid not.

CSS is fundamentally declarative. This is that. This has that.

Code

/* Links ARE red */
a {
  color: red;
}

/* Elements with class "important",
 * or directly inside a paragraph of class "notice-me",
 * HAVE a green border */
.important,
p.notice-me > * {
  border: 2px solid green;
}

CSS got the concept of state, but only through those declarations (and in conjunction with HTML). As in: WHEN this is the case, THEN this-is-that/this-has-that:

Code

/* WHEN the screen is in portrait orientation,
 * THEN change the menu-height variable on the <nav>: */
@media (orientation: portrait) {
  nav {
    --menu-height: 8em;
  }
}

/* WHEN the <body> contains an open <dialog>
 * THEN the overlay mask is shown: */
body:has(dialog[open]) {
  .overlay-mask {
    display: fixed;
  }
}

CSS doesn't have functions, though. And personally, I think that's a good thing!

One of the reasons that CSS is so much faster more-reliable than JavaScript is that it's possible for browsers to optimise it by pre-computing the possible states. That's impossible for all but the most tightly-bounded formally-declared programming languages. With CSS, a browser can know in-advance what the range of possibilities are and can reserve space for rendering quickly, and get things onto the screen rightaway.

It also makes it much safer.

Okay, that's not 100% true. IE6 and IE7 introduced something called CSS expressions, which let you embed functional JavaScript expressions into CSS. It was a terrible idea, and it was immediately exploited for XSS purposes. Think about it: if CSS is "safe" and can't run arbitrary code, then it's okay for places like this forum, for example, to let you write your own CSS on your profile page. If you can run arbitrary code within CSS, then it either needs careful and trustworthy sandboxes or else it has to be banned from use on profiles. (Or else guys like me cause trouble... like I already do in places like the chat, which don't have solid protection!  )

The closest thing to functions that CSS has nowadays, though, is built-in functions like calc(...), clamp(...), min(...), and max(...). These are super-useful, though, and with a little imagination you can do some truly amazing things with them.

Anyway: hope that helps!

I wonder how much object-oriented programming can you get away with in pure CSS without needing javascript?

None. CSS isn't even a procedural language, let alone an object-oriented one. It's a declarative language only with, increasingly, some aspects of functional languages. It's still 100% "programming", but it's limited. And I for one like that!

[sen.fish]

CSS doesn't have functions, though.

I don't know if you've been looking at some of the proposed specs, but I wouldn't be surprised if non built-in functions come to CSS in the next few years. Personally, it all looks quite cool, and I can definitely see myself using them when (if?) they stop being experimental features.

[Dan Q]

I don't know if you've been looking at some of the proposed specs, but I wouldn't be surprised if non built-in functions come to CSS in the next few years.

I have! And what they're talking about is certainly a convenience, but it's worth bearing in mind that it's not world-changing. They don't allow you to do anything that you can't do already today with variables; they just make it less long-winded for the complex cases.

(That said, doing things "simpler" is always a win: nested selectors are already pretty amazing and I use them all the time, even though they don't do anything I couldn't do in a more-longwinded way before!)

Now true attr(...) support. That's something I'm excited about. Right now you can only  reliably use it for content: directives, but once it's solidified the combination of it and functions will make it possible to, for example, make <input>s CSS size depend upon their maxlength without pre-coding all of the possible permutations and hacking around with attribute selectors.

There's a bright new CSS future coming. (As always, I guess!)

[chilblands]

I thought about this for a bit and my first response would be percentage or vh units and @media like Dan proposed.

Garfield also have the items layout like Ribose but it is not responsive. I think the layout inherently is kind of difficult to navigate because you "hover" to see where you are going which is difficult for small screen users. I'd reckon you can either...

• do whatever you are comfortable with and have a sitemap or
• (more difficult) hide the image links so on and have something simple for small screens if you want the site to be responsive and accessible.

I think vh units is good and that is what your inspo Ribose used so on small screens it look the same but smaller. FOR OPTION 2, THIS IS HOW I WOULD GO ABOUT IT BUT THERE IS ALWAYS A BETTER WAY!!

Code

#RespNav {display:none}
@media only screen and (max-width: 768px) {
  #ImgNav {display:none}
  #RespNav {display:block}
}

@media only screen and (max-width: 768px){} is your BFF! Let's say your image navigation is id="ImgNav", putting display:none (like above) hide it on small screen. Then you put something else to show up which is id="RespNav" which can be basic links or something completely different like Tabf5 (or Ctrl+shift+M to see different responsive displays).

SIMILARLY, you can use @media only screen and (max-width: 768px){} to move stuff only on small screens by using assigning class or id to your items. For example...

Code

@media only screen and (max-width: 768px) {
  #desk {bottom:0vh,right:50%}
  #comp {botton:5vh,right:25%}
}

[Limette]

Anyway: hope that helps!

Whoa thank you! This is very in-depth and has just what I needed to know! For some reason, it completely escaped my memory that you can do calculations in CSS- I was this close to calculating everything manually 

Your first proposed method will work just fine for me, I think! Eventually I want there to be a separate mobile layout entirely, but for now the percentage scaling shall do, and this also makes it adaptive to different monitor sizes. When I do get to making a mobile layout, I'm thinking of trying out that <picture> tag I've read about recently... But first I have a lot of other work to do!