1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] Как сделать блок с таким условием

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем AlexGood, 17 июл 2018.

  1. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Как сделать блок с таким условием: левая часть фиксированная, правая часть тоже фиксированная, а средняя часть резиновая?
    Т.е. допустим левый блок 100 px, правый 150px, а внутри поле input которое занимает все оставшееся пространство и при изменении разрешения тянется, а правый и левый блок остаются неизменными.
     
    AlexGood, 17 июл 2018
    #1
  2. pasha-b

    pasha-b

    Регистрация:
    9 янв 2013
    Сообщения:
    190
    Симпатии:
    109
    Так прямо так и делать, для левой и правой части задать нужную ширину, а для средней ширина 100%, к примеру.
     
    pasha-b, 17 июл 2018
    #2
    AlexGood нравится это.
  3. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Вот честно, думал про flex, но так и не решился протестировать)
     
    AlexGood, 17 июл 2018
    #3
  4. pasha-b

    pasha-b

    Регистрация:
    9 янв 2013
    Сообщения:
    190
    Симпатии:
    109
    Тут не flex виноват, просто с ним удобнее блоки размещать, можно и с помощью float сделать.
     
    pasha-b, 17 июл 2018
    #4
    AlexGood нравится это.
  5. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    У меня немного странно происходит. Слева блок 155, середина 100% и правый 160px, но когда начинаешь сужать 150 слева тоже уменьшаются))) Сейчас куда-нибудь залью, покажу.
    --- Добавлено, 17 июл 2018 ---
    Линк: http://testbcard.dtraduga.vh55.hosterby.com/
    Разрешение 767, вверху 3 этих блока: http://joxi.ru/L21bynnf85gyjA
    А при сужении получается вот такое дело: http://joxi.ru/EA4vM77FwLONdm (т.е. по бокам уже не по 150px)
    Как можно решить данный вопрос? Или я что-то не так сделал?
    --- Добавлено, 17 июл 2018 ---
    pasha-b, на вашем примере тоже видно когда сужаешь что подобная ситуация происходит
     
    AlexGood, 17 июл 2018
    #5
  6. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Что такое .empty_block? Никогда так не делайте!

    Потому что размер экрана не позволяет вместить всё при изначальных значениях ширины. Чтоб не дать сжаться при любых условиях надо задавать min-width, который для адаптивной вёрстки противопоказан.
    И вообще, смысл адаптивной вёрстки в том, что она не просто тянется-сжимается, а именно адаптируется! Если поле поиска на маленьком экране не вмещается нормально - надо его скрыть и сделать выпадающим по клику.
    Меня всегда удивляли типа "адаптивные" шаблоны, у которых на маленьких экранах содержимое шапки просто превращается в свалку мусора
     
    Dotrox, 17 июл 2018
    #6
    AlexGood нравится это.
  7. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    это просто пустой блок с прозрачным фоном - просто планировал что форма с поиском появится а логотип останется виден, чтобы не делать точно такого же наложения

    А ещё как-то иначе можно реализовать данную задачу чтобы все ужималось должным образом без наложений?
     
    Последнее редактирование: 17 июл 2018
    AlexGood, 17 июл 2018
    #7
  8. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    И вас не смущало, что логотип становится не кликабельным? И правая часть шапки тоже не кликабельна! Как меню раскрыть?
    Уже это должно было навести на мысли, что вы делаете какое-то костыльное извращение.

    Блок #BlockSearch вообще не должен существовать! У вас должна быть либо полностью отдельная мобильная шапка, либо все элементы должны быть расположены рядом без группирования в блоки, которые зависят от ширины, а каждый элемент сам по себе скрывается в зависимости от ширины.


    И вообще интерфейс какой-то очень странный: на десктопе в шапке поиска вообще нет (при чём совсем), зато на маленьких экранах он внезапно зачем-то начинает занимать почти всю шапку.
     
    Dotrox, 17 июл 2018
    #8
    AlexGood нравится это.
  9. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Суть немного не та, - то что сейчас это я просто практикуюсь. Поиск есть на десктопе только на тех страницах где он необходим. А на данный момент, я просто хотел при клике на значок поиска "увеличительного стекла" сверху выезжала форма поверх всего меню, где будет только input, сама кнопка поиска только другого цвета и на бургере просо "крест", который закрывает форму и очищает поле input - как-то так. Вот я и думаю как правильно все это дело реализовать.
     
    AlexGood, 18 июл 2018
    #9
  10. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Перезалил: теперь при клике на кнопку поиска форма выезжает как надо, а на крестик заезжает обратно. Смысл такой был изначально, только золотая кнопка поиска должна быть поверх черной, а крестик поверх бургера и все адаптивно, но пока увы (((
     
    AlexGood, 18 июл 2018
    #10
  11. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Во-первых, это в принципе неправильно: интерфейс всех страниц должен быть одинаков.
    А во-вторых, я не понимаю как это. Это что поиск не по сайту, а по текущей странице? Если так, то он вообще не должен быть в шапке.

    Разве сейчас не так? Всё выглядит вполне неплохо.
     
    Dotrox, 18 июл 2018
    #11
    AlexGood нравится это.
  12. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    так это я уже доделал))) просто думал как-то проще все обыграть, а пришлось мучать медиазапросами чтобы нормально смотрелось)))
     
    AlexGood, 18 июл 2018
    #12
  13. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Медиазапросы - обязательный атрибут адаптивного сайта! С технической точки зрения именно они и являются его главным отличием от просто резинового сайта.
     
    Dotrox, 19 июл 2018
    #13
    AlexGood нравится это.
< Выделение ссылки | Реакция на инпуты >