Home Entrance Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
April 14, 2024 - @811.01 (what is this?)
Forum activity rating: Four Star Posts: 51/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :happy: Open the all windows! Your mind needs storms and air! :happy:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Help! Positioning things on a page


« previous next »
Pages: [1] Print
Author Topic: Help! Positioning things on a page  (Read 920 times)
DJoftheCoven
Jr. Member ⚓︎
**


Eng. Esp. Fra. 한


View Profile WWW

First 1000 Members!Joined 2022!
« on: September 02, 2022 @938.19 »


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.

Logged

Melooon
Hero Member ⚓︎
*****


So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

First 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To ManBug!
« Reply #1 on: September 02, 2022 @951.57 »

Congrats on the new webring :happy:

Quote
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)
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
DJoftheCoven
Jr. Member ⚓︎
**


Eng. Esp. Fra. 한


View Profile WWW

First 1000 Members!Joined 2022!
« Reply #2 on: September 03, 2022 @965.53 »


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...







Logged

Melooon
Hero Member ⚓︎
*****


So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

First 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To ManBug!
« Reply #3 on: September 03, 2022 @969.65 »

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.
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
DJoftheCoven
Jr. Member ⚓︎
**


Eng. Esp. Fra. 한


View Profile WWW

First 1000 Members!Joined 2022!
« Reply #4 on: September 03, 2022 @975.02 »


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
Logged

Melooon
Hero Member ⚓︎
*****


So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

First 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To ManBug!
« Reply #5 on: September 03, 2022 @4.72 »

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!
« Last Edit: September 03, 2022 @11.06 by Melooon » Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
DJoftheCoven
Jr. Member ⚓︎
**


Eng. Esp. Fra. 한


View Profile WWW

First 1000 Members!Joined 2022!
« Reply #6 on: September 03, 2022 @27.78 »


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. :drat: 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 :happy:

Logged

Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Things you've overheard?

Started by DoctorScreechBoard ☕︎ ∙ Fun & Forum Games

Replies: 10
Views: 1760
Last post March 19, 2024 @764.99
by starbreaker
What are some of your favorite 404 pages?

Started by Icey!Board ✁ ∙ Web Crafting

Replies: 14
Views: 3060
Last post April 13, 2024 @766.34
by oerrorpage
Website example page

Started by Icey!Board ☆ ∙ Showcase & Links

Replies: 3
Views: 1824
Last post December 16, 2021 @285.10
by cinni

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi