Содержимое сайта, при уменьшении масштаба идет влево

Question

Содержимое сайта, при уменьшении масштаба идет влево

Рейтинг: 0Ответов: 2Опубликовано: 22.04.2023

Почему оно прижимается в левую сторону? Как можно решить?

.kvadrat {
    width: 164px;
    height: 82px;
    background: rgba(0,0,0,1);
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
}
.text1 {
    width: 103px;
    color: rgba(255,255,255,1);
    position: absolute;
    top: 48px;
    left: 29px;
    font-family: Inter;
    font-weight: Bold;
    font-size: 20px;
    opacity: 1;
    text-align: center;
}
.img1 {
    width: 100px;
    height: 50px;
    margin-left: 35px;
}
.textchislo{
    width: 323px;
    height: 131px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    margin-top: 220px;
    margin-left: 320px;
    overflow: hidden;
}
.v1_65 {
    width: 323px;
    color: rgba(0,0,0,1);
    top: 0px;
    margin-left: 20px;
    font-family: Inter;
    font-weight: Bold;
    font-size: 50px;
    opacity: 1;
    text-align: center;
}
.mesyats {
    width: 117px;
    color: rgba(0,0,0,1);
    top: 61px;
    left: 103px;
    font-family: Inter;
    font-weight: Regular;
    font-size: 25px;
    opacity: 1;
    text-align: center;
}
.textchislo1{
    width: 323px;
    height: 131px;
    background: url(../images/v1_67.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    margin-top: 40px;
    margin-left: 320px;
    overflow: hidden;
}
.v1_66 {
    width: 323px;
    color: rgba(0,0,0,1);
    top: 0px;
    margin-left: 20px;
    font-family: Inter;
    font-weight: Bold;
    font-size: 50px;
    opacity: 1;
    text-align: center;
}
.mesyats1 {
    width: 117px;
    color: rgba(0,0,0,1);
    top: 61px;
    left: 103px;
    font-family: Inter;
    font-weight: Regular;
    font-size: 25px;
    opacity: 1;
    text-align: center;
}
.textchislo2{
    width: 323px;
    height: 131px;
    background: url(../images/v1_67.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    margin-top: 40px;
    margin-left: 330px;
    overflow: hidden;
}
.v1_67 {
    width: 323px;
    color: rgba(0,0,0,1);
    top: 0px;
    margin-left: 20px;
    font-family: Inter;
    font-weight: Bold;
    font-size: 50px;
    opacity: 1;
    text-align: center;
}
.mesyats2 {
    width: 117px;
    color: rgba(0,0,0,1);
    top: 61px;
    margin-left: 10px;
    font-family: Inter;
    font-weight: Regular;
    font-size: 25px;
    opacity: 1;
    text-align: center;
}
.textchislo3{
    width: 323px;
    height: 131px;
    background: url(../images/v1_67.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    margin-top: 40px;
    margin-left: 300px;
    overflow: hidden;
}
.v1_68 {
    width: 323px;
    color: rgba(0,0,0,1);
    top: 0px;
    margin-left: 35px;
    font-family: Inter;
    font-weight: Bold;
    font-size: 50px;
    opacity: 1;
    text-align: center;
}
.mesyats3 {
    width: 117px;
    color: rgba(0,0,0,1);
    top: 61px;
    margin-left: 35px;
    font-family: Inter;
    font-weight: Regular;
    font-size: 25px;
    opacity: 1;
    text-align: center;
}
.img2 {
    width: 100px;
    color: rgba(0,0,0,1);
    position: absolute;
    margin-top: -660px;
    margin-left: 500px;
    font-family: Inter;
    font-weight: Bold;
    font-size: 50px;
    opacity: 1;
    text-align: center;
}
.img3 {
    width: 100px;
    color: rgba(0,0,0,1);
    position: absolute;
    margin-top: -480px;
    margin-left: 500px;
    font-family: Inter;
    font-weight: Bold;
    font-size: 50px;
    opacity: 1;
    text-align: center;
}
.img4 {
    width: 100px;
    color: rgba(0,0,0,1);
    position: absolute;
    margin-top: -320px;
    margin-left: 500px;
    font-family: Inter;
    font-weight: Bold;
    font-size: 50px;
    opacity: 1;
    text-align: center;
}
.img5 {
    width: 100px;
    color: rgba(0,0,0,1);
    position: absolute;
    margin-top: -130px;
    margin-left: 500px;
    font-family: Inter;
    font-weight: Bold;
    font-size: 50px;
    opacity: 1;
    text-align: center;
}
.footer {
    margin: 0px auto;
    position:fixed;
    z-index: 999;
    bottom:0;
    left:0;
    width:100%;
    height: 200px;
    background-color: #000000;
  }
  .line {
      margin-bottom: 300px;
  }
  .textfooter1 {
      color: rgb(255, 255, 255);
      font-family: Inter;
      font-weight: Bold;
      margin-left: 90px;
      margin-top:65px;
  }
  .textfooter2 {
    color: rgb(255, 255, 255);
    font-family: Inter;
    font-weight: Bold;
    margin-left: 550px;
    margin-top: -90px;
    font-size: 14.5px;
}
.textfooter3 {
    color: rgb(255, 255, 255);
    font-family: Inter;
    font-weight: Bold;
    margin-left: 950px;
    margin-top: -160px;
    font-size: 14.5px;
}
.img6 {
    width: 350px;
    height: 120px;
    color: rgba(0,0,0,1);
    position: absolute;
    margin-top: -40px;
    margin-left: 1250px;
    font-family: Inter;
    font-weight: Bold;
    font-size: 50px;
    opacity: 1;
    text-align: center;
}
.social-icons {
    display: flex;
    justify-content: center;
    list-style: none;
    margin-top: 43px;
    margin-bottom: 1rem;
    margin-left: 1500px;
    padding-left: 0;
  }

  .social-icons>li {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }

  .social-icons a {
    position: relative;
    background-color: #eee;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background-color .3s ease-in-out;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .25rem;
  }

  .social-icons a:hover {
    background-color: #e0e0e0;
  }

  .social-icons a::before {
    content: "";
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    left: .65rem;
    top: .65rem;
    background: transparent no-repeat center center;
    background-size: 100% 100%;
  }

  .social-icons .social-icon-twitter::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231da1f2' d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3E%3C/svg%3E");
  }

  .social-icons .social-icon-fb::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%234267B2' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
  }

  .social-icons .social-icon-vk::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%232787f5' d='M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z'/%3E%3C/svg%3E");
  }

  .social-icons .social-icon-telegram::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2327a7e7' d='M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z'/%3E%3C/svg%3E");
  }

  .social-icons .social-icon-youtube::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23ff0000' d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");
  }
  .uptext {
    width: 79px;
    color: rgb(0, 0, 0);
    margin-top: 20px;
    display: inline-block;
    margin-left:  850px;
    font-family: Inter;
    font-weight: Bold;
    font-size: 25px;
    opacity: 1;
  }
  .uptext2 {
    width: 79px;
    color: rgb(0, 0, 0);
    margin-top: 20px;
    display: inline-block;
    font-family: Inter;
    margin-left: 150px;
    font-weight: Bold;
    font-size: 25px;
    opacity: 1;
  }
  .imglichniykab1 {
    width: 40px;
    height: 40px;
    margin-top: -35px;
    margin-left: 1700px;
    display: block;
    overflow: hidden;
  }
  .textlichniykab1 {
    width: 1000px;
    color: rgb(0, 0, 0);
    margin-left:  1770px;
    margin-top: -55px;
    display: block;
    font-family: Inter;
    font-weight: Bold;
    font-size: 25px;
    text-decoration: none;
  }
  .afisha {
    width: 79px;
    font-family: Inter;
    font-weight: Bold;
    font-size: 50px;
    margin-top: 90px;
    margin-left: 480px;
    opacity: 1;
  }
  .kino {
    width: 439px;
    color: rgba(0,0,0,1);
    position: absolute;
    margin-top: -635px;
    left: 650px;
    font-family: Inter;
    font-weight: Bold;
    font-size: 35px;
    opacity: 1;
    text-align: center;
}
.kino1 {
    width: 439px;
    color: rgba(0,0,0,1);
    position: absolute;
    top: 620px;
    left: 650px;
    font-family: Inter;
    font-weight: Bold;
    font-size: 35px;
    opacity: 1;
    text-align: center;
}
.kino2 {
  width: 650px;
  color: rgba(0,0,0,1);
  position: absolute;
  margin-top: -300px;
  left: 650px;
  font-family: Inter;
  font-weight: Bold;
  font-size: 35px;
  opacity: 1;
  text-align: center;
}
.kino3 {
  width: 650px;
  color: rgba(0,0,0,1);
  position: absolute;
  margin-top: -110px;
  left: 600px;
  font-family: Inter;
  font-weight: Bold;
  font-size: 35px;
  opacity: 1;
  text-align: center;
}
.kino4 {
  width: 650px;
  color: rgba(0,0,0,1);
  position: absolute;
  margin-top: -630px;
  left: 1100px;
  font-family: Inter;
  font-weight: Bold;
  font-size: 20px;
  opacity: 1;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="afisha.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Inter&amp;display=swap" rel="stylesheet">
    <title>Афиша</title>
</head>
<body>
    <div class="kvadrat">
        <img class="img1" src="Icon.png">
    </div>
    <div class="uptext1">
        <a href="Афиша.html">
        <span class="uptext">О нас</span>
    </a>
    <a href="Афиша.html">
        <span class="uptext2">Контакты</span>
    </div>
</a>
<div class="imglichniykab">
    <img class="imglichniykab1" src="user.png">
    <p><a class="textlichniykab1" href="Афиша.html">Личный кабинет</a></p>
</div>
<div class="afisha">
    <p class="afisha">Афиша</p>
</div>
    <span class="text1">OMEGA</span>
    <div class="textchislo">
        <span class="v1_65">20</span><br>
        <span class="mesyats">октября</span>
    </div>
    <div class="textchislo1">
        <span class="v1_66">30</span><br>
        <span class="mesyats1">октября</span>
    </div>
    <div class="textchislo2">
        <span class="v1_67">1</span><br>
        <span class="mesyats2">мая</span>
    </div>
    <div class="textchislo3">
        <span class="v1_68">10</span><br>
        <span class="mesyats3">мая</span>
    </div>
    <div class="line">
        <img class="img2" src="icon2.png">
        <img class="img3" src="icon2.png">
        <img class="img4" src="icon2.png">
        <img class="img5" src="icon2.png">
        <span class="kino">"Кукушкины слёзы"</span>
        <span class="kino1">"Сеспель"</span>
        <span class="kino2">"Самый счастливый день"</span>
        <span class="kino3">"Хранители"</span>
        <span class="kino4">Режиссер: Борис Манджиев</span>
    </div>
    <div class="footer">
        <footer>
            <p class="textfooter1">© 2023 "Омега"</p>
            <p class="textfooter2">Адрес <br>
                <br>
                г. Чебоксары, ул. Кадыкова 21 <br><br>
                Телефон кассы <br><br>
                + 79157633634
                <br><br>
                По всем вопросам <br>
                + 79187633634</p>
                <p class="textfooter3">Политика конфиденциальности
                    <br><br>Правила компании</p>
                    <img class="img6" src="icon3.png">
                    <ul class="social-icons">
                        <li><a class="social-icon-twitter" href="https://twitter.com/itchief_ru" title="Официальная страница ИТ Шеф в Twitter" target="_blank" rel="noopener"></a></li>
                        <li><a class="social-icon-fb" href="https://www.facebook.com/itchief.ru" title="Официальная страница ИТ Шеф в Facebook" target="_blank" rel="noopener"></a></li>
                        <li><a class="social-icon-vk" href="https://vk.com/itchief" title="Официальная страница ИТ Шеф в ВКонтакте" target="_blank" rel="noopener"></a></li>
                        <li><a class="social-icon-telegram" href="https://t.me/itchief_ru" title="Официальная страница ИТ Шеф в Telegram" target="_blank" rel="noopener"></a></li>
                        <li><a class="social-icon-youtube" href="https://www.youtube.com/channel/UCbh6Tqnw22ZBRvELewUXgxA" title="Официальный канал ИТ Шеф на Youtube" target="_blank" rel="noopener"></a></li>
                      </ul>
        </footer>
    </div>
</body>
</html>

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0

я переписал за вас почти весь код. Потому что в вашем коде было очень тяжело работать. footer и контент афишы заполните сами

*{
    margin: 0;
    padding: 0;
}
a{
    color: #000;
    text-decoration: none;
}
html,body{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
.content{
    min-height: 100%;
    width: 1280px;
    display: flex;
    flex-flow: column;
    margin: 0 auto;
    align-items: center;
}
header{
    width: 100%;
    height: 70px;
    display: flex;
}
.company__info{
    height: 100%;
    width: 100px;
    background-color: #000;
    display: flex;
    flex-flow: column;
    align-items: center;
}
.company__logo{
    width: 70px;
    height: 40px;
}
.company__name{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    margin-top: 5px;
}
.header__list{
width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.header__link{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 18px;
}
.header__list > .header__link{
    margin-right: 10px;
}

/* Афиша */
.poster__wrapper{
    width: 1100px;
    margin-top: 10px;
    height: 400px;
    display: flex;
    flex-flow: column;
}
.poster__title{
font-weight: 650;
width: 100%;
display: flex;
justify-content: center;
font-size: 20px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.poster{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    border: 1px solid #000;
}
.poster__content{ /* контент афишы */
    width: 100%;
    height: 93px;
    border: 1px solid #000
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="CSSJS/style.css" rel="stylesheet"><!--укажите свой путь к css-->
    <link href="https://fonts.googleapis.com/css?family=Inter&amp;display=swap" rel="stylesheet">
    <title>Афиша</title>
</head>
<body>
    <header>
        <div class="company__info">
            <img src="" alt="" class="company__logo">
            <p class="company__name">OMEGA</p>
        </div>
        <li class="header__list">
         <a href="" class="header__link">О нас</a>
         <a href="" class="header__link">Контакты</a>
         <a href="" class="header__link">Личный кабинет</a>
        </li>
    </header>
    <main class="content">
     <div class="poster__wrapper">
       <p class="poster__title">Афиша</p>

        <div class="poster">
            <div class="poster__content">
             <!--информация-->
            </div>
            <div class="poster__content">
            <!--информация-->
            </div>
            <div class="poster__content">
            <!--информация-->
            </div>
            <div class="poster__content">
             <!--информация-->
            </div>
         </div>
     </div>
    </main>
</body>
</html>

Answer 2

▲ 0

Советую использовать MediaQueries, задавая в конструкции стили для экрана размеров от - до. Пример который использую я @media screen and (min-width: 1440px) { стили }, это для разрешений лэптопов, и выше, дальше можно использовать запросы под разрешения ниже этого, если нужно работать с дизайном для планшетов и мобил. Принцип тот же, только указываешь помимо минимума еще и максимальную ширину, до которой будут актуальны текущие стили. Документация по запросам, советую прочесть https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries

P.S. будь осторожнее с абсолютным позиционированием :)

Содержимое сайта, при уменьшении масштаба идет влево

Ответы