Jump to content

sejunctus

Newbie
  • Posts

    9
  • Joined

  • Last visited

Information

  • Sex
    Мужчина

sejunctus's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Кажется, теперь то, что нужно! Спасибо огромное за помощь!
  2. Проценты не годятся, т.к. ширина берется от родительского блока, а в карусели он - это сумма всех изображений. 7680 пкс - 20% это 1536 пкс. Картинки через background, чтобы использовать свойство background-size: cover, в противном случае блок будет подстраиваться по высоте либо, что еще хуже, изображения будут вытягиваться (у нас же height: 100%). Может, вы знаете скрипт карусели попроще? Без таких наворотов?
  3. Пропишем у боковушек при ширине 1920 пкс ширину 375пкс [ ( 1920-1170 ) / 2 ]. Но если мы начнем увеличивать ширину экрана, то соседние картинки начнут наезжать на эти.
  4. Странно, вроде там 3 active стоит. Проблема как раз в том, что непонятно, какие размеры прописывать у боковых картинок. Вот смотрите: при разрешении в 1920 пкс скрипт делит всю ширину поровну между слайдами и всем прописывает 512 пкс. При разрешении в 1920 мне нужно центральный слайд сделать шириной 1170 пкс. Что прописать у боковушек? Прописывать нужно конкретную ширину, дабы перебить inline стиль. В идеале было бы найти в скрипте функцию, которая делит ширину экрана поровну между всеми слайдами. Но скрипт огромный, с кучей функций, а я в js не очень силен.
  5. Спасибо! Вроде получилось: http://steiner-glass.tmweb.ru/01/ Но теперь другая загвоздка: нужно центральное изображение сделать шире 2 других, а их напротив, ужать по бокам. Карусель owl-carousel. Может, есть какой-нибудь способ? Через css криво как-то выходит...
  6. Вот что получается (разрешение - 1920*1200 пкс). Нужно избавиться от белого зазора между каруселью и футером. Если растянуть картинки по высоте до 100% и ширину поставить auto, то пропадает футер. Про 100vh не очень понял, что вы имеете в виду. Скрипт или calc()? Flexbox не совсем кроссбраузерно получится. А что, если перебрать через медиа-запросы все возможные варианты высоты экрана? И под эти разрешения подгонять высоту. Правда, получится довольно топорно и громоздко, особенно учитывая широкое разнообразие разрешений. По идее, должен же быть более красивый способ
  7. В том то и дело, что не просто "тупо карусельку". Футер должен быть прижат книзу. Прижимаем футер - при уменьшии окна браузера появляется зазор между каруселькой и самим футером. А нужно, что это все вместе красиво адаптировалось. Знаете, как в случае с background-size: cover, когда уменьшаешь окно, и фон уменьшается пропорционально.
  8. Не совсем. Есть прокрутка вертикальная. А в ТЗ сказано - никаких прокруток при любых разрешениях. Попробовал погуглить разметку "святой грааль" (holy grail layout). Понравился вариант https://htmlacademy.ru/blog/29 Только пока не могу придумать, как это использовать в случае с каруселью.
  9. Очень нужна помощь опытных верстальщиков. Визуально ТЗ на картинке. Требования следующие: 1) футер прижат книзу 2) фоновый слайдер-карусель (выглядит именно так, по бокам предыдущая и следующая фотографии чуть затемненные) 3) полностью адаптивный, другими словами не должно быть ни горизонтальной, ни вертикальной прокрутки при любых разрешениях экрана 4) контент расположен в блоке поверх карусели 5) все это должно работать на CMS Joomla Я уже чего только не пробовал. Универсального решения не нашел. Фиксишь футер, остается пространство между каруселью и футером. Подгонять по высоте и прописывать стили для всех типов разрешений... Вряд ли оптимальный способ. На ум приходит использовать карусель, чтобы картинки были фоновыми и использовать background-size: cover, но вот не придумал как это осуществить. Высоту хедера и футера можно зафиксить (100 пкс) В общем, очень надеюсь на помощь. Думаю, данная задачка будет интересна многим. Вряд ли такие сайты попадаются на каждом шагу. (хотя, может есть примеры?)
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy