NDanilov2015
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by NDanilov2015
-
-
Добрый день! Есть такая задача - в заготовке для сайта имеется картинка очень большой ширины (около 4000 px). Её необходимо сделать адаптивным фоном (к размеру окна браузера/экрана компьютера), выводить центральную часть с несколькими товарами которые "вшиты" в картинку - а остальное пустить под возможность горизонтального скроллинга. (На саму фоновую картину должен быть пристыкован атрибут usemap, сообщенный с "картой", ведущей на страницы конкретных товаров).
Пока что удавалось реализовать лишь адаптивность, но без скроллинга (и кажется, в таком варианте и map не пристыковать):
.box{ background: url('../img/1.jpg') no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; }
(.box - это главный контейнер вложенный в <body>). Скроллингу мешает background-attachment, выставленное в fixed. Но стоит убрать fixed, тогда исчезает адаптивность...
Как грамотно решается такая задача?) Может здесь надо задействовать jQuery (и как именно)?
PS. Заранее спасибо! -
Всё, разобрался) Надо "px" при указании координат в пикселях писать слитно с цифрой, и тогда всё работает =) Вот что значит чистый PHP-программист занялся вёрсткой(((
-
Добрый день! Есть сайт http://valeodent.spb.ru/, представляющий длиннющую landing page, сделанную на темизированном Drupal 7. При щелчке по кнопке "Записаться" выходит форма, после заполнения которой посетитель должен увидеть сообщение типа "Заказ отправлен. В ближайшее время с вами свяжутся для уточнения деталей." - или сообщение об ошибке, если не все поля формы были заполнены. Сообщения реализуются через стандартные системные сообщения Drupal, но темизированы в файле .css шаблона сайта.
В шаблоне страницы page.tpl.php это сообщение выводится в блоке <div class="message">, который вложен в <div class="content-block">. Соответственно, поскольку content-block находится глубоко внизу, через долгую прокрутку браузера, сообщение исходно невидимо пользователем. И надо этот <div message> поднять в верхнюю часть окна браузера, чтобы посетители могли его увидеть!
Просто переставить этот div в заголовок header не получается - Drupal откажется печатать сообщения вообще. fixed-позиционирование непригодно для моего клиента т.к. блок неприятно стоит на месте при прокрутке содержимого, а должен уезжать вверх.
Остается использовать absolute позиционирование. У content-block указано position:static, т.е. вложенный в него message должен позиционироваться относительно окна браузера и всплыть наверх - однако, что-то не ладится и он позиционируется относительно своего родителя, так и оставаясь глубоко внизу(((
В чем дело? Почему не работает абсолютное позиционирование несмотря на static у родителя? Может быть из-за того, что Родитель находится глубоко "под днищем" окна браузера и требует долгой прокрутки к нему?
В каком направлении копать для адаптивного скроллируемого фона?
in HTML Coding
Posted
Суть проблемы в том, чтобы горизонтально длинная картинка была адаптируемой к изменению размера окна браузера (или экрана компьютера) - с отображением некоторой ее центральной части, с горизонтальным скроллингом. И еще чтобы к этому был прицеплен usemap атрибут, дабы сегменты картинки стали кликабельными для конечного пользователя.
В общем, придётся идти в немного другом направлении, чем я думал - никаким background-стилем это не сделать, видимо надо просто брать <img> с атрибутом usemap, вкладывать его в <div> и с этим как-то колдовать:
К сожалению, на jsfiddle не прицепить саму картинку чтобы это работало с кодом - но ключевой код выложил как он выглядит на данную минуту (верхняя часть и в HTML, и в CSS самое главное):
https://jsfiddle.net/NDanilov2016/c6271jcm/2/
Спасибо за содействие!