World Wild Web > ☔︎ ∙ I need Help!
Help! Positioning things on a page
DJoftheCoven:
Today, I was accepted into the sweetdreams webring!! :ha: 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 :tongue: so any help would be massively appreciated.
Melooon:
Congrats on the new webring :happy:
--- Quote --- minimized
--- End quote ---
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
Navigation
[0] Message Index
[#] Next page
Go to full version