NDanilov2015
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by NDanilov2015
-
В каком направлении копать для адаптивного скроллируемого фона?
NDanilov2015 replied to NDanilov2015's question in HTML Coding
Суть проблемы в том, чтобы горизонтально длинная картинка была адаптируемой к изменению размера окна браузера (или экрана компьютера) - с отображением некоторой ее центральной части, с горизонтальным скроллингом. И еще чтобы к этому был прицеплен usemap атрибут, дабы сегменты картинки стали кликабельными для конечного пользователя. В общем, придётся идти в немного другом направлении, чем я думал - никаким background-стилем это не сделать, видимо надо просто брать <img> с атрибутом usemap, вкладывать его в <div> и с этим как-то колдовать: <body> <div class="box" id="agregat"> <div id="img-box"> <img src="img/1.jpg" style="display: block;" alt="" usemap="#Map" /> </div> <map name="Map" id="Map"> <area alt="" title="" href="#" shape="poly" coords="55,744,234,743,236,869,60,877" /> <area alt="" title="" href="#" shape="poly" coords="243,745,409,747,411,869,249,871" /> .... И так далее К сожалению, на jsfiddle не прицепить саму картинку чтобы это работало с кодом - но ключевой код выложил как он выглядит на данную минуту (верхняя часть и в HTML, и в CSS самое главное): https://jsfiddle.net/NDanilov2016/c6271jcm/2/ Спасибо за содействие! -
В каком направлении копать для адаптивного скроллируемого фона?
NDanilov2015 posted a question in HTML Coding
Добрый день! Есть такая задача - в заготовке для сайта имеется картинка очень большой ширины (около 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. Заранее спасибо! -
Проблема с position:absolute на длинной по высоте LP
NDanilov2015 replied to NDanilov2015's question in HTML Coding
Всё, разобрался) Надо "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 у родителя? Может быть из-за того, что Родитель находится глубоко "под днищем" окна браузера и требует долгой прокрутки к нему?