>
Категории вопросов
Задать вопрос +

Основное

Контент-модули

Продвижение сайта

Управление сайтом

Доп. модули

Вебмастеру

Похожие вопросы



Как сделать подложку сайта кликабельной (брендирование сайта)

голоса: 0
Доброе время суток.  Нужно сделать подложку сайта кликабельной, так называемое, брендирование страниц.  Тестовую картинку в качестве фона установили (внеся изменения в CSS), но возникло 2 проблемы:  1. Кликабельной стала не только подложка, но и вся страница целиком. Присвоение отрицательных значений z-index и эксперименты с position успехом не увенчались. Как можно устранить данную проблему?  2. При изменении разрешения экрана картинка существенно смещается и искажается. Как можно с этим бороться? Или же нужно использовать какой-то определенный размер картинки для подложки?  Заранее благодарны более опытным вебмастерам за помощь в решении указанной проблемы!
Закрыто с пометкой: Ответ получен!
| Автор: | Категория: Дизайн сайта
Закрыт | | Автор: Yuri_Geruk

Ответов: 1

голоса: 0

Пример решения можете прочесть в материалах:

  1. http://forum.ucoz.ru/forum/31-65063-1
  2. https://www.ucoz.ru/qa/index.php/30657
| Автор:

Выполнили указанные ниже действия ( https://forum.ucoz.ru/forum/25-65063-1 ) - дизайн сайта вообще разлезся(( Стало еще хуже.

А страница как и прежде вся целиком и полностью кликабельна.

 

nightclick, добавте это в css

#branding_link {
        width:100%;
        height: 100%;
        position:absolute;
     z-index:1;
}

а в шаблоне HTML пропишите так

Цитата
<body><a href="ссылка" target="_blank" id="branding_link"></a>
| Автор:
Андрей777,

Удалите с шаблона то что вы прописали в коде:

<div id="all01" onclick="window.open('https://moneyveo.ua/')" style="cursor: pointer;">

И в стили после прописать:

#branding_link {
 position: absolute;
 left:-170px;
 width: 560px;
 height: 100%;
 }

Это чтобы левая часть фона была кликабельна, а чтобы и правая, тогда делайте еще одну ссылку под:

 <a href="ссылка" target="_blank" id="branding_link"></a>

добавьте вторую:

<a href="ссылка" target="_blank" id="branding_link2"></a>

и в стили так же добавьте:

#branding_link2 { 
position: absolute;   
right: 0px;  
width: 430px; 
height: 100%;  
}

| Автор:
Yuri_Geruk,

Удалили - все-равно дизайн плывет полностью, причем не только тестовая страница, а ВЕСЬ сайт.

Дизайн становится на место только после того, как убираем из CSS:

#branding_link {
        width:100%;
        height: 100%;
        position:absolute;
     z-index:1;

| Автор:
Редактирование | | Автор: Андрей777
Андрей777,
Дополнил ответ выше как правильно сделать.
| Автор:
Yuri_Geruk,
Часть странице по ширине осталась кликабельной (отметили стрелками - до куда кликабельна) - https://pastenow.ru/165a78c8a5a564cecc59cfd4064810cb . Особенно увеличивается ширина кликабельной зоны в случае уменьшения разрешения экрана.  С какими параметрами нужно "поиграться", чтобы подогнать? И что делать тем пользователям у которым разрешение меньше, анпример 1366*768 ?
| Автор:
Андрей777,

Увы, это решение не универсальное и не адаптивное и не задумано для всех экранов больших и маленьких телефонов и планшетов и нетбуков.Если нужно что-то универсальное, вам нужно искать специалиста на https://divly.ru/ который это разработает для вас.

  • В стилях выше параметры 560 и 430 это ширина левого и правого блоков фона, настраивайте как нужно.
| Автор:
Yuri_Geruk,

Та по ширине подогнали, но даже если незначительно изменяется разрешение экрана, зона кликабельности залазит на дизайн.

Подскажите, пожалуйста, можно ли вместо одной подложки фона использовать 2 изображения (для левой и правой части), ведь все-равно верх и низ подложки не кликабельны? Это поможет решить проблему с адаптивностью или нет?

| Автор:
Андрей777,
Можете использовать два фото, только это будут два отдельных куска по разных сторонах, и да, это снова не будет адаптивно как вы хотите. Адаптивность нужно настраивать под конкретный сайт, где заказать реализацию, я выше ссылки вам предоставил.
| Автор:
Yuri_Geruk,
Ну https://upartner.pro/ уже не позволяет размещать заказы.  Подскажите хоть на основе каких технологий может быть реализовано адаптивное решение?
| Автор:
Андрей777,

На основе условий media http://htmlbook.ru/css/value/media для каждого разного разрешения писать свои размеры для блоков прендирования и все настраивать.

| Автор:
Yuri_Geruk,
И сколько разработка подобного решения (хотя бы для наиболее распространенных разрешений экранов) может стоить, хотя бы примерно?
| Автор:
Андрей777,
Вы не у меня спрашивайте, а у специалиста который будет вам это делать. Думаю потолок в 1 тыс руб, но зависит от исполнителя.
| Автор:
Yuri_Geruk,
Спасибо за помощь! Будем искать.
| Автор:
...