Entrance Events! Chat Gallery Search Everyone Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
April 01, 2025 - @51.03 (what is this?)
Activity rating: One Star Posts & Arts: 2/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts Start New Topic  Submit Art
News: ozwomp is requesting your location  :ozwomp: [Agree] Super News: Upload a banner!

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  fixed positioning help!


« previous next »
Pages: [1] Print
Author Topic: fixed positioning help!  (Read 75 times)
Yuvi
Casual Poster ⚓︎
*


⛺︎ My Room

View Profile WWW

Joined 2024!
« on: March 05, 2025 @446.09 »

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

Amongus
crazyroostereye
Casual Poster ⚓︎
*


I am most defiantly a Human

⛺︎ My Room
RSS: RSS

View Profile WWW

Joined 2024!
« Reply #1 on: March 05, 2025 @703.51 »

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: March 05, 2025 @719.75 by crazyroostereye » Logged

Yuvi
Casual Poster ⚓︎
*


⛺︎ My Room

View Profile WWW

Joined 2024!
« Reply #2 on: March 06, 2025 @281.72 »

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

Amongus
Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Melons critiquing and helping each other

Started by urgellxBoard ✎ ∙ Art Crafting

Replies: 22
Views: 2433
Last post August 24, 2024 @487.13
by e-
Strange positioning/anchor link issue o3o

Started by zzzzzBoard ☔︎ ∙ I need Help!

Replies: 3
Views: 816
Last post May 05, 2024 @785.83
by zzzzz
Help! Positioning things on a page

Started by DJoftheCovenBoard ☔︎ ∙ I need Help!

Replies: 6
Views: 1398
Last post September 03, 2022 @27.78
by DJoftheCoven

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | ~ Send Feedback ~ 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