Форум программистов
 
Регистрация на форуме тут, о проблемах пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Как купить рекламу на форуме


Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме 20000 рублей в месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 07.06.2021, 17:24   #1
Дмитрий134
Новичок
Джуниор
 
Регистрация: 07.06.2021
Сообщений: 1
По умолчанию Как задать фиксированный размер блоку, чтобы он не изменялся при масштабировании, и сместить его в нужное место?

Здравствуйте. Только недавно начал изучать программирование и столкнулся с такой проблемой. Каким способом можно закрепить блок в одном месте, чтобы он не менял расположение при масштабировании? При этом он должен находиться в обозначенной красной рамкой области. Прошу не ругать за банальный вопрос, несколько дней пытаюсь решить проблему с помощью гугла, но не выходит. Спасибо за внимание!
Код:
 .odcatwall {
    background: #fff;
    overflow: auto;
    display: block;
    padding: 10px;
    text-align: center;
    font-size:1.4em;
    border:1px solid #ddd;
    margin-bottom:20px;

  }

.odcatwallhref {
    padding-top:10px;
}


}   
</style>
<div class="row">
  {% for category in categories %}
    <div class="product-layout col-lg-4 col-md-3 col-sm-6 col-xs-12">
        <a class="odcatwall" href="{{ category.href }}">
            <div><img src="{{ category.image }}" /></div>
            <div class="odcatwallhref">{{ category.name }}</div>
        </a>
    </div>
  {% endfor %}
</div>
Изображения
Тип файла: jpg 8YDOZ.jpg (46.7 Кб, 2 просмотров)
Дмитрий134 вне форума Ответить с цитированием
Старый 13.06.2021, 09:45   #2
maks1331
Форумчанин
 
Аватар для maks1331
 
Регистрация: 20.12.2016
Сообщений: 100
По умолчанию

Цитата:
Сообщение от Дмитрий134 Посмотреть сообщение
Здравствуйте. Только недавно начал изучать программирование и столкнулся с такой проблемой. Каким способом можно закрепить блок в одном месте, чтобы он не менял расположение при масштабировании? При этом он должен находиться в обозначенной красной рамкой области. Прошу не ругать за банальный вопрос, несколько дней пытаюсь решить проблему с помощью гугла, но не выходит. Спасибо за внимание!
Конкретно может не помогу, но общую идею скажу.

У секций сайта должна быть некоторая ширина, например 1300px. Тогда, разместив дочерние блоки верстка ехать не будет, при vw > 1300px.

При верстке адаптивной версии стоит использовать следующий приём: доходим до ширины секции с запасом и уменьшаем её.
Код:
@media(max-width:1350px){
    .width{
        max-width:1100px;
        width:1100px;
    }
}
Адаптируем блоки и продолжаем, пока не доходим до vw = 320px.

Если ты задаёшь общую ширину, как %, например width: calc(100% - 50px*2), при размещении внутренних элементов это нужно учитывать, т.к. если у тебя родитель адаптивный, а дочки статичные - рано или поздно все поедет и это усложняет процесс. Новичку лучше делать так, как я описал выше. Кстати, большинство моих проектов строятся по этому принципу, т.к. это проще, а проще - быстрее, дешевле и надежнее.
maks1331 вне форума Ответить с цитированием
Ответ
Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать картинку адаптивной, само растягивающейся к размеру монитора, чтобы размер баннера изменялся сам - подстраивался под дизайн сайта Alar HTML и CSS 6 07.01.2020 03:53
Хочу задать чтобы при заполнении а ячейку даты изменялся цвет все строки - Google таблицы aziz_piriev Общие вопросы по программированию, компьютерный форум 3 18.10.2019 09:22
Фоновая картина в HTML, чтобы при масштабировании экрана она тоже изменяла размер vladkk HTML и CSS 1 16.03.2018 23:15
Хочется чтобы документ хранился и изменялся автоматически в каком-либо месте, после его изменения с ПК Андрей Ли Microsoft Office Word 3 07.07.2017 11:18
Как задать размер окна при нажатии на Sumbit из формы Niodar Помощь студентам 0 12.11.2009 09:19



Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS