Home Help Search Login Register

Welcome, Guest. Please login or register.
October 08, 2022, 12:23:23 am
Forum activity rating: Two Star Posts: 14/24hrs Show Unread Posts | Unread Replies | Own Posts | Recent Posts
News: More cats, yess \o/ :4u: :transport: :TnT: :cheerR: :cheerL: :dive: :unite:

+  MelonLand Forum
|-+  Workshop Zone
| |-+  Tutorials & Help
| | |-+  HELP: How to keep the footer down?
« previous next »
Pages: [1] Print
Author Topic: HELP: How to keep the footer down?  (Read 187 times)
bythemeadow
Newbie
*
Posts: 26


she/faer

Discord: bythemeadow#2513
SpaceHey: Friend Me!

View Profile WWW
« on: September 05, 2022, 01:24:19 am »

so if i have my footer and my mainpage set as position:static; then it renders in order, showing the footer at the very bottom with a slight margin. easy. my problem is that the mainpage element has to have position:absolute; or else the nav buttons i built aren't selectable (they are placed underneath the main div and stick out from the side, like a bookmark.) i'm not sure why this is but it wouldn't be a problem if it didn't affect the footer. the mainpage either covers the footer or it renders halfway up the page. how do i fix this? 
Logged


puhuhuhuhu
Melooon
Administrator
Hero Member
*****
Posts: 617


So many stars!

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

View Profile WWW
« Reply #1 on: September 05, 2022, 12:56:20 pm »

Its a little hard to figure out exactly what your issue is, BUT a thread light this might be helpful?
https://stackoverflow.com/questions/44258085/css-how-to-attach-footer-to-the-bottom-of-the-page

When you set something as position absolute, it no longer takes up space on the page so the footer will no longer move down to avoid it. So you need to make something take up that space.

You could make an invisible div that is full height, then set pointer events none on it https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
You could also try playing with the z-index to make it behind everything else https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Those might also be helpful for figuring out your navbar or footer issues ^^
Logged

bythemeadow
Newbie
*
Posts: 26


she/faer

Discord: bythemeadow#2513
SpaceHey: Friend Me!

View Profile WWW
« Reply #2 on: September 05, 2022, 08:52:59 pm »

oh this is perfect, thank you! i didn't know that about position:absolute, good to know :]
Logged


puhuhuhuhu
MamboGator
Full Member
***
Posts: 123


Business Gator

View Profile
« Reply #3 on: September 05, 2022, 09:38:08 pm »

In general, it's better if you can find a way around using absolute positioning to begin with. I know all too well the temptation to use "position: absolute" because it's the easiest way to put something exactly where you want it, but using a grid or flex box is usually the better option because it'll naturally work with the rest of your layout.

Alternatively, you could use "position: fixed" on the footer so that it is always floating on the bottom of the screen, but without seeing your design it's hard to say if that would work for you.
Logged
bythemeadow
Newbie
*
Posts: 26


she/faer

Discord: bythemeadow#2513
SpaceHey: Friend Me!

View Profile WWW
« Reply #4 on: September 05, 2022, 09:43:57 pm »

In general, it's better if you can find a way around using absolute positioning to begin with. I know all too well the temptation to use "position: absolute" because it's the easiest way to put something exactly where you want it, but using a grid or flex box is usually the better option because it'll naturally work with the rest of your layout.

Alternatively, you could use "position: fixed" on the footer so that it is always floating on the bottom of the screen, but without seeing your design it's hard to say if that would work for you.

i've heard this a couple times, i'll look into it  !<o
Logged


puhuhuhuhu
Pages: [1] Print 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines RSS | WAP2 | BBCode Help


Melon Sites!
Visit Melonking.Net! Visit the MelonLand Forum! Visit the Gif Gallery! Support the Forum
Friend Communites!