Jak zrobić, żeby strona internetowa się nie przesuwała podczas powiększania lub zmniejszania okna

Robię grę internetową i chcę, żeby podczas powiększania lub zmniejszania okna divy się nie przesuwały.

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>Naxis.io</title>
    <meta name="description" content="" />
    <meta name="keywords" content="io, io games, games, website games, game, bubble game, buggle, circle, eating other players," />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link href="https://fonts.googleapis.com/css2?family=Lato&family=Ubuntu&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,500;0,600;1,700&display=swap" rel="stylesheet">
    <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    <script src="slider.js"></script>
    <script src="newwindow.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="stylesheet" href="Toggles/toggles.css" type="text/css" />
    <link rel="stylesheet" href="Sliders/sliders.css" type="text/css" />
    <link rel="stylesheet" href="Fontello/css/fontello.css" type="text/css" />

</head>

<body onselectstart="return false;" oncontextmenu="return false">

    <div id="container">       
        <div id="main">           
            <div id="left"></div>

            <!--MAIN-->
            
            <div id="mid">

                <input type="text" name="Skin-URL" maxlength="40" placeholder="Skin URL" />
                <input type="text" name="Nickname" maxlength="20" placeholder="Nickname" />
                <input type="text" name="Tag" maxlength="20" placeholder="Tag" />

                <button type="button" name="buttonplay">
                    <i class="icon-play"></i>
                    <span class="play-ins">Play</span>
                  </button>
                
                  <button type="button" name="buttonspectate">
                     <i class="icon-eye"></i>
                  </button>

            </div>
            <div id="right">
               
                <div id="settings">

                    <!----- SLIDER START ----->


                    <!----- SLIDER END ------>



                    <!----- TOGGLE START ----->

                    <!----- TOGGLE END ------>

                </div>
                
                <div id="profile">

                    <div class="login-ins">Login to your account with Discord to save your in-game progress.</div>
                    <div style="clear:both;"></div>

                    <button name="button-login" onclick="DiscordNewWindow()">
                        <i class="iconify" data-icon="fa-brands:discord"></i>
                        <div class="login-button-ins">
                            Login with Discord
                        </div>
                    </button>
                </div>
            </div>

            <div id="socials">
                <a href="https://discord.gg/76dhzvEFGy" target="_blank"><div class="dc">
                    <i class="iconify" data-icon="fa-brands:discord"></i>
                        <div class="dc-ins">
                                Official Discord
                        </div>
                </a>            
                
                <a href="https://www.youtube.com/channel/UCRjwCE_lmKW2lxToBQso66A" target="_blank"><div class="yt">
                    <i class="icon-youtube-play"></i>
                        <div class="yt-ins">
                            YouTube
                        </div>
                </a>   

                <a href="https://discord.gg/RxmhMuGxHQ" target="_blank"><div class="tournament">
                    <i class="icon-award"></i>
                        <div class="tournament-ins">
                            Tournaments
                        </div>
                </a> 

                <a href="https://www.youtube.com/channel/UCRjwCE_lmKW2lxToBQso66A" target="_blank"><div class="skins">
                    <i class="icon-picture"></i>
                        <div class="skins-ins">
                            Skins
                        </div>
                </a> 
            </div>
            
        </div>
            
    </div>
        <div style="clear:both;"></div> 
</body>
</html>

html, body {
    background-color: #2e2e2e;
    color: #cecece;
}

/*START OF MAIN--------------------------------------------------------------------------------------------> */

#container {
    width: 1085px;
    height: 75px;
    margin-left: auto;
    margin-right: auto;
    transform: translate(-5%, 320%);
}

#main {
    width: 1090px;
    height: 505px;
    top: 100%;
    left: 100%;
    transform: translate(-0.7%, 0.2%);
}

#left {
    float: left;
    width: 340px;
    min-height: 500px;
    background-color: #181818;
    border: 0.1px solid #0a0a0a; 
    border-radius: 5px;
    box-shadow: 0px 0px 3px #0a0a0a;
    margin-right: 9px;
    margin-left: 9px;
}

#mid {
    float: left;
    width: 360px;
    min-height: 500px;
    background-color: #181818;
    border: 1px solid #0a0a0a; 
    border-radius: 5px;
    box-shadow: 0px 0px 7px #0a0a0a;
    margin-right: 9px;
    margin-left: 9px;   
}


#right {
    float: left;
    width: 340px;
    height: 50  0px;
    text-decoration: none;
}

#profile {
    float: left;
    width: 340px;
    min-height: 170px;
    background-color: #181818;
    border: 1px solid #0a0a0a; 
    border-radius: 5px;
    box-shadow: 0px 0px 7px #0a0a0a;
    text-decoration: none;
    margin-left: 9px;
    margin-top: 10px;

}

#settings {
    float: left;
    width: 340px;
    min-height: 310px;
    background-color: #181818;
    border: 1px solid #0a0a0a; 
    border-radius: 5px;
    box-shadow: 0px 0px 7px #0a0a0a;
    font-family: 'Josefin Sans', sans-serif;
    margin-right: 9px;
    margin-left: 9px;
    margin-bottom: 9px;
}

/*END OF MAIN----------------------------------------------------------------------------------------------> */
/*---------------------------------------------------------------------------------------------------------- */
/*START OF INPUT-------------------------------------------------------------------------------------------> */

input[name="Skin-URL"] { 
    background-color: #272727;
    color: #cecece;
    outline: 1px;
    border: 1px solid #363636;
    border-radius: 3px;
    transform: translate(4.5%, 1110%);
    width: 313px;
    height: 20px;
    padding: 7px;
}

input[name="Nickname"] { 
    background-color: #272727;
    color: #cecece;
    outline: 1px;
    border: 1px solid #363636;
    border-radius: 3px;
    transform: translate(7.5%, 875%);
    width: 177px;
    height: 20px;
    padding: 7px;
}

input[name="Tag"] { 
    background-color: #272727;
    color: #cecece;
    outline: 1px;
    border: 1px solid #363636;
    border-radius: 3px;
    transform: translate(18.5%, 875%);
    width: 108px;
    height: 20px;
    padding: 7px;
}

button[name="buttonplay"] {
    background-color: #272727;
    color: #cecece;
    border: 1px solid #313131;
    border-radius: 3px;
    width: 271px;
    height: 38px;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    transform: translate(5.6%, 990%);
    outline: 1px;
    text-decoration: none;
    cursor:pointer;
}

.play-ins {
    width: 0px;
    color: #ffffff;
    text-decoration: none;
    text-shadow: 0px 0px 2px black;
    font-family: 'Ubuntu', sans-serif;
    transform: translate(-90%, 1900%);
    margin-left: -80px;
}

button[name="buttonplay"]:hover {
    background-color: #175cb8;
    box-shadow: 0px 1px 3px #175cb8;
}


button[name="buttonspectate"] {
    background-color: #272727;
    color: #cecece;
    border: 1px solid #313131;
    border-radius: 3px;
    width: 45px;
    height: 38px;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    transform: translate(51%, 985%);
    text-decoration: none;
    outline: 1px;
    cursor:pointer;
}

button[name="buttonspectate"]:hover {
    background-color: #d1b006;
    box-shadow: 0px 1px 3px #d1b006;
}

/*END OF INPUT---------------------------------------------------------------------------------------------> */
/*---------------------------------------------------------------------------------------------------------- */
/*START OF SETTINGS----------------------------------------------------------------------------------------> */

.settings-ins {
    color: #ffffff;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 50px;
    text-align: center;
    margin-top: 20px;
}

/*END OF SETTINGS------------------------------------------------------------------------------------------> */
/*---------------------------------------------------------------------------------------------------------- */
/*START OF LOGIN-------------------------------------------------------------------------------------------> */

button[name=button-login] {
    background-color: #272727;
    border: 1px solid #313131;
    width: 300px;
    height: 50px;
    border-radius: 8px;
    margin-top: 20px;
    margin-left: 19px;
    margin-right: auto;
    font-size: 19px;
    font-family: 'Josefin Sans', sans-serif;
    outline: 2px;
    cursor: pointer;
}

button[name=button-login]:hover {
    background-color: #2c2c2c;
    border: 1px solid #414141;
}


.login-button-ins {
    color: #ffffff;
    font-family: 'Josefin Sans', sans-serif;
    color: #ffffff;
    margin-top: 8px;
    margin-right: 55px;
    text-decoration: none;
}

.login-ins , #profile >a {
    font-size: 15px;
    margin-left: 15px;
    margin-top: 35px;
    font-weight: 1px;
    text-align: left;
    color: #ffffff;
    text-shadow: 1px 1px 2px black;
    font-family: 'Roboto Mono', monospace;
    text-decoration: none;
}

/*END OF LOGIN---------------------------------------------------------------------------------------------> */
/*---------------------------------------------------------------------------------------------------------- */
/*START OF SOCIALS-----------------------------------------------------------------------------------------> */

#socials {
    margin-bottom: 50px;
    width: 550px;
    min-height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, 1548%);
    text-decoration: none;
    color: #ffffff;   
}

.dc {
    float: left;
    background-color: #738adb;
    width: 170px;
    height: 34px;
    border-radius: 5px;
    margin-right: 10px;
    text-align: center;
    font-family: 'Josefin Sans', sans-serif;
    margin-top: -5px;
}

.dc:hover {
    background-color: #5e75c2;;
}

.yt {
    background-color: #FF0000;
    width: 125px;
    height: 34px;
    border-radius: 5px;
    font-family: 'Josefin Sans', sans-serif;
    text-decoration: none;
    margin-top: 0px;
    margin-left: 180px;
}

.yt:hover {
    background-color: #be0202;
}

.yt-ins {
    float: left;
    width: 120px;
    height: 35px;
    border-radius: 5px;
    font-family: 'Josefin Sans', sans-serif;
    margin-top: -20px;
    margin-left: 20px;
    text-decoration: none;
    color: #ffffff;
}

.dc-ins {
    float: left;
    width: 120px;
    height: 35px;
    border-radius: 5px;
    font-family: 'Josefin Sans', sans-serif;
    margin-top: -19px;
    margin-left: 35px;
    text-decoration: none;
    color: #ffffff;
}

.iconify {
    float: left;
    font-size: 25px; 
    margin-left: 10px; 
    margin-top: 5px;    
    text-decoration: none;
    color: #ffffff;
}

.tournament {
    background-color: #c0900c;
    width: 140px;
    height: 34px;
    border-radius: 5px;
    font-family: 'Josefin Sans', sans-serif;
    margin-top: -30px;
    margin-left: 135px;
    text-decoration: none;
}

.tournament-ins , #socials >a {
  color: #ffffff;
  text-decoration: none;
  margin-top: -14px;
  margin-left: 25px;
}

.skins {
    background-color: #ff00dd;
    width: 100px;
    height: 34px;
    border-radius: 5px;
    font-family: 'Josefin Sans', sans-serif;
    text-decoration: none;
    margin-top: -26px;
    margin-left: 150px;
}

.skins-ins {
  color: #ffffff;
  margin-top: -8px;
  text-decoration: none;
  margin-top: -10px;
  margin-left: 25px;
}

Coś tu masz nie tak w css-ie,

Twój

<div id="container"> 

    . . .

</div>

ma mniejsze rozmiary niż reszta (niektórych) elementów html w Twoim kodzie.

#container {
    width: 1085px;
    height: 75px;
    margin-left: auto;
    margin-right: auto;
    transform: translate(-5%, 320%);
}
 
#main {
    width: 1090px; /* main jest większy od kontenera */
    height: 505px;
    top: 100%;
    left: 100%;
    transform: translate(-0.7%, 0.2%);
}

jeżeli wpisujesz: transform: translate(-5%, 320%), to wtedy margin nie daje żadnego efektu,
top, left, nie zadziała bez ustawienia position,

Dodaj ten kod do #container

  border: 2px solid red;
  overflow: hidden; /* lub overflow: auto; */

czyli

#container {
    width: 1085px;
    height: 75px;
    margin-left: auto;
    margin-right: auto;
    transform: translate(-5%, 320%);
    border: 2px solid red;
    overflow: hidden;
    /* lub overflow: auto; */
}

a do #main, dodaj np. position: relative; to zobaczysz efekt ustawienia: top: 100%; left: 100%;

czyli

#main {
    position: relative;
    width: 1090px;
    height: 505px;
    top: 100%;
    left: 100%;
    transform: translate(-0.7%, 0.2%);
}

zobacz efekt na stronie, domyślam się, że nie o to, chyba Tobie chodziło.

Jak zrobić, żeby strona internetowa się nie przesuwała podczas powiększania lub zmniejszania okna

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci