Help! Positioning things on a page

[DJoftheCoven]

Today, I was accepted into the sweetdreams webring!! I'm very happy about it, but I'm having some difficulties putting the webring button where I want. For reference, here's what I have so far:



This is where I want to put it, and I managed to place it there by observing how #radio is placed on melonland and copying that code to see if I could move it to my desired position. However, it seems that even though I was able to successfully position the widget, the "absolute" value makes it stay in place when the window is minimized, meaning that ppl with different screen sizes might experience display problems. Is there a way I can position it without causing this issue? Am I missing something obvious?

I'm kinda dumb lol so any help would be massively appreciated.

[Melooon]

Congrats on the new webring

minimized

Im gonna get you mean resized (made smaller)? minimised is something else!

So absolute position means that you set the position absolutely.. meaning it does not move. However the radio moves because its position is connected to the right side of the window, so it will always be positiond absolutely based on where the right edge of the browser is (float: right; right: 10px).

Is your issue that when the browser gets smaller it moves ontop of your main content? What would you like to happen instead?

You can position it based on something else using "position: relative"; so you could position it based on your main content rather than the right side of the browser! You'd have to tinker through, it's not complicated, but it's not super easy to demonstrate.

Lemmy know if you need more help (send the code too)

[DJoftheCoven]

Ah, whoops! Yes, I meant resized.

Anyhow, I tried to change the value to "relative", but I don't think it knows what it's supposed to be relative to because the whole main content of my site moved left. Here's what it looks like before and after...

[Melooon]

If you send the codepen I can help!

What you prob need to do is put both the webring and your main content in a div and use that div as your basis for positioning, like a guide rail.

[DJoftheCoven]

https://codepen.i:ha:DJoftheCoven/pen/dyeyKGL

keep in mind that I have most of the images in shorthand, so it'll look a lil wonky

[Melooon]

Ok Iv been messing with this for like 30 mins and I have a solution (but you'll need to fix some other things on your site)

Firstly this is what you need to know! https://stackoverflow.com/questions/1137517/how-to-position-absolute-inside-a-div

Simple steps:

• Move the webing inside your .page div
• Add "position: relative;" to your .page
• Remove the float from the .webring (turns out I never needed that)
• Set the the .webring to "right: -280px;" (you'll need to tweak that number)

You're done! However you have a bunch of "overflow: hidden" things set on your divs.. and that will break it again because the webing will now be hidden.. Overflow hidden is not a good way to solve site design issues, so Id encourage you to try and solve those! Try removing the overflow hidden from .page and see what goes wrong (if anything).

Give it a try and lemmy know if you get stuck!

[DJoftheCoven]

Thank you, Melooon! The webring is now right where I wanted to put it without issue. Your explanation was very helpful!!!

I'll have to go over my code for a while and see what I was doing with all those overflows. I guess that's what happens when I work on the same document for several months--I improve drastically the more I write, but when I get better, I see that my old stuff is full of mistakes!

Such is the artistic process