Jump to content

NDanilov2015

Newbie
  • Posts

    4
  • Joined

  • Last visited

Everything posted by NDanilov2015

  1. Суть проблемы в том, чтобы горизонтально длинная картинка была адаптируемой к изменению размера окна браузера (или экрана компьютера) - с отображением некоторой ее центральной части, с горизонтальным скроллингом. И еще чтобы к этому был прицеплен 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/ Спасибо за содействие!
  2. Добрый день! Есть такая задача - в заготовке для сайта имеется картинка очень большой ширины (около 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. Заранее спасибо!
  3. Всё, разобрался) Надо "px" при указании координат в пикселях писать слитно с цифрой, и тогда всё работает =) Вот что значит чистый PHP-программист занялся вёрсткой(((
  4. Добрый день! Есть сайт 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 у родителя? Может быть из-за того, что Родитель находится глубоко "под днищем" окна браузера и требует долгой прокрутки к нему?
×
×
  • 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