Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
a Summer day - @388.55
Activity rating: Four Stars Posts & Arts: 89/1k.beats Random | Recent Posts | Guild Recents
News: :happy: Open the all windows! Your mind needs storms and air! :happy: Guild Events: There are no events!

+  MelonLand Forum
|-+  Life & The Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  fixed positioning help!

 « previous next »
Pages: [1] Print Embed
Author Topic: fixed positioning help!  (Read 745 times)
Yuvi
Full Member ⚓︎
***
View Profile WWW


⛺︎ My Room

Guild Memberships:
Artifacts:
Joined 2024!
« on: a Spring day » Embed
Heya, I need some help with this CSS issue im facing which im having a lot of trouble finding answers for :(
Basically i want to create this scrollable page but i want the page selectbox to remain on the left of the screen right where it is without moving, obviously for this i'd use "position; fixed" for something like this, however I'm not getting the result i want due to some html stuff.

I'f i put the element within the same div as the other 2 elements, it resizes normally and stays in place, however it doesnt actually fix to the viewport.


but if i put the element in the body, it fixes as usual but it does not stay in place when the viewport is resized.


is there any way i can get it to fix to the viewport and resize along with the other 2 elements in the div? html and css attached via catbox file and spoiler
https://files.catbox.moe/co7z6j.html

Spoiler
<!DOCTYPE html>
<html>
    <head>
      <title>Update Log</title>
        <link rel="preconnect" href="https://fonts.bunny.net">
      <link href="https://fonts.bunny.net/css?family=pixelify-sans:400,500,600,700" rel="stylesheet"/>
      <link rel="stylesheet" href="style.css">
        <style>
            body{
                height: 100%;
                padding: 0;
                margin: 0;
            }
            #update_log_box{
                color: white;
                width: 630px;
                position: absolute;
                bottom: 0;
                top: 10px;
                left: 50%;
                transform: translate(-50%, 0);
            }
            #update_log_feed{
                border-style: dashed;
                border: white;
                overflow: auto;
            }
            #ulog_select{
                background-color: #6f0000;
                width: 155px;
                border-color: azure;
                position: fixed;
                font-size: 27px;
                text-align: center;
                left: 300px;
                top: 100px;
            }
            #update_log_title{
                border-style: solid;
                background-color: #6f0000 ;
                color: red ;
                font-size: 50px;
                text-align: center;
                padding-top: 15px;
                padding-bottom: 15px;
                top: 0;
                margin-top: -10px;
                position: sticky;
            }
        </style>
    </head>
    <body>

        <div id="ulog_select">
            <a href="index.html">
                <h3 class="tabs">
                    Home
                </h3>
            [/url]
            <a href="Blogs.html">   
                <h3 class="tabs">
                    Blogs
                </h3>
            [/url]
            <a href="About.html">
                <h3 class="tabs">
                    About
                </h3>
            [/url]
            <a href="Shrines.html">
                <h3 class="tabs">
                    Shrines
                </h3>
            [/url]
            <a href="Socials.html">   
                <h3 class="tabs">
                    Socials
                </h3>
            [/url]
        </div>

        <div id="update_log_box">
            <!--new idea, let feed overflow into the viewport naturally and make select and title sticky/fixed.-->
            <div id="update_log_title">
                Update Log
            </div>

            <div id="update_log_feed">
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 1</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 2</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 3</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 4</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 5</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 6</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 7</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 8</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 9</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 10</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 11</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 12</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 13</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 14</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 15</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 16</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 17</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 18</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 19</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 20</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 21</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 22</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 23</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 24</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 25</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 26</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 27</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 28</p>
                    <p>IM DENNIS FROM CHAINSAW MAN!!!!!! 29</p>
                    <p>AMONG US!!!!!!! </p>
            </div>
        </div>
    </body>
</html>
[close]

thank you for your time! :grin:

Logged
https://files.catbox.moe/hk7spj.pngAmongus
crazyroostereye
Full Member ⚓︎
***
View Profile WWW


I am most defiantly a Human
⛺︎ My Room
iMood: Crazyroostereye
RSS: RSS

Guild Memberships:
Artifacts:
Joined 2024!
« Reply #1 on: a Spring day » Embed
My quick and dirty solution was to change the left property from ulog_select to 50% and add a transform: translateX(-30rem);

Code
#ulog_select{
background-color: #6f0000;
width: 155px;
border-color: azure;
position: fixed;
font-size: 27px;
text-align: center;
top: 100px; 
left: 50%;
transform: translateX(-30rem)
}

The Issue was that your left property was a fixed px value, which changes with the viewport, while the main content was a relative value that stays 50% from the edge whatever size the Viewport was.

I would recommend you have a look at flexbox, as that might mitigate such Issues in the future. In general have a look into relative Values.

Best of Luck with your page
« Last Edit: a Spring day by crazyroostereye » Logged
https://crazyroostereye.de/stuff/Crazy31.gifhttps://ayoreis.com/static/Arch.pnghttps://crazyroostereye.de/stuff/Zen31.png
Yuvi
Full Member ⚓︎
***
View Profile WWW


⛺︎ My Room

Guild Memberships:
Artifacts:
Joined 2024!
« Reply #2 on: a Spring night » Embed
Quote from: crazyroostereye on a Spring day
I would recommend you have a look at flexbox, as that might mitigate such Issues in the future. In general have a look into relative Values.

Damn! i completely forgot about flexbox :ohdear:
but thank you so much!!! I'll definately modify with flexbox at some point in the future but for now i'll go with your solution, thank you again :)!
Logged
https://files.catbox.moe/hk7spj.pngAmongus
Pages: [1] Print Embed 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | Send Feedback | Supporters ♥ Forum Guide | Rules | RSS | WAP | Mobile


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
@000 MelonLand Search Zap! Want to Login or Join ? Forum Art Hub Chat Webring Everyone Site Editor Recent Edits Tenement Arcade Linkz Web Guides Graphics Catalogue Wiki Newsletters Image Stream
Melon's Sites TamaNotchi Textures PixelSea GifyPet MoMG Ozwomp Online Loom Videos Leaky Webring Melonking
Tools Melon Software ArtHub Embed Maker ML Passports
Outlinks Webrings Internet Phone Book HTML Energy Declarations Hackers & Designers Frutiger Aero Forum m15o's Web Services 32Bit Cafe iMood
Minecraft: Online
Join: craft.melonking.net

Forum Theme Picker