Перейти к публикации
View in the app

A better way to browse. Learn more.

Дизайн и модификация Invision Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Как добавить кнопку поверх баннера?

Опубликовано:

Доброго времени суток. Мне необходимо добавить кнопку на главный баннер в моём стиле. Не подскажете как это сделать?

Вот как она должна выглядеть (кнопку я нарисую и залью на хостинг, интересует какой нужно добавить код):

post-44902-0-12479500-1304557256_thumb.jpg

Вот код хеадера-

 

}

#feature_head {

background:url({style_images_url}/cs_header.jpg) no-repeat scroll 0 50% #152E46;

height:260px;

margin: 25px -10px 0px -10px;

position:relative;

}

#feature_logo {

margin-left:20px;

margin-top:20px;

position:absolute;

}

#secondary_nvs {

background-position:center top;

clear:both;

font-size:0.9em;

padding: 21px 0;

}

#secondary_nvs li {

float:left;

padding-right:7px;

}

 

Вроде бы он :) . Как он выглядет сейчас можно посмотреть тут

Рекомендованные сообщения

Опубликовано:

Код не нужен.

Перед

 

Добавьте

<div style='z-index:11000; position: absolute; top: 100px; left: 50px;'><img src='{$this->settings['img_url']}/knopka.png' alt='' /></div>

Точные координаты вычислите сами.

 

Ну и чтобы кнопка работала, к картинке надо какое-то действие прикрепить.

Опубликовано:
  • Автор

Код не нужен.

Перед <div id='primary_nav'>

 

Добавьте

<div style='z-index:11000; position: absolute; top: 100px; left: 50px;'><img src='{$this->settings['img_url']}/knopka.png' alt='' /></div>

Точные координаты вычислите сами.

 

Ну и чтобы кнопка работала, к картинке надо какое-то действие прикрепить.

Спасибо, добавел настроил положение, как настроить адрес (куда она видет) какой код и куда добавить. Я очень извеняюсь, я ещё зелёный в этом деле :). Тыкую, пробую, учусь

Опубликовано:

<img src='{$this->settings['img_url']}/knopka.png' alt='' />

заменить на

<a href='http://адрес куда ведет/'><img src='{$this->settings['img_url']}/knopka.png' alt='' /></a>

Опубликовано:
  • Автор

<img src='{$this->settings['img_url']}/knopka.png' alt='' />

заменить на

<a href='http://адрес куда ведет/'><img src='{$this->settings['img_url']}/knopka.png' alt='' /></a>

Супер. Сделал, вот ещё одна проблема. Я настроил кнопку под своё разрешение - 1920х1080 она стоит там где надо. Но вот на моём другом монеторе с другим разрешением она уезжает в другое место. Как её закрепить?

 

1920х1080

6d88757ab562t.jpg

1600x900

b879cd15088et.jpg

 

п.с. исчерпал лимит на загрузку

Опубликовано:

Попробуйте использовать

position: relative;

вместо absolute

 

 

Ps

Предполагается, что пользователи должны хранить служебные временные картинки на своих серверах.

Иначе никакого дискового пространства не хватит.

Опубликовано:
  • Автор

Вот с этим кодом

<div style='z-index:11000; position: relative; top: 0px; left: 10px;'><a href='http://www.creativestation.ru/index.php?showtopic=8939/'><img src='{$this->settings['img_url']}/knopka.png' alt='' /></a></div>

<div id='primary_nav'>

 

выглядет так

cff7df982fc7t.jpg

 

Можно сделать что бы просто нажатием на банер перекидовало в тему, не добавляя кнопку(на задний баннер тот что с облоками, под лого и навигацией)?

 

Т.к. этот баннер будет постоянно меняться. На нем будут рекламироваться конкурсы и при нажатии на него он должен кидать в тему с конкурсом

 

Вот например другой баннер (не доделанный):

4ad50d2c09b2t.jpg

0918295c9e76t.jpg

Изменено пользователем Alexander Koshelkov

Опубликовано:

Можно привязать ссылку для перекидывания к сменному логотипу (баннеру). Меняется же только картинка, но не ссылка.

Но лучше не нужно, потому что и поисковики, и пользователи привыкли, что нажатие на лого выводит на главную страницу форума.

Хотя точно сказать, нанесет ли это вред, не могу.

Опубликовано:
  • Автор

Логотип у меня отдельно, он сейчас кликабельный. А баннер нет. Надо сделать баннер тоже кликабельным. Лого будет вести на главную, а баннер в тему

Опубликовано:

В html картинка баннера прописана или в css?

Если в html, все просто, засовываете в ссылку как кнопку

<a href='http://адрес куда ведет/'><img src='{$this->settings['img_url']}/баннер.png' alt='' /></a>

А если в css, придется делать прозрачную картинку, размером с баннер, и привязывать как кнопку поверх баннера.

Опубликовано:
  • Автор

В html картинка баннера прописана или в css?

Если в html, все просто, засовываете <img src .... /> в ссылку как кнопку

<a href='http://адрес куда ведет/'><img src='{$this->settings['img_url']}/баннер.png' alt='' /></a>

А если в css, придется делать прозрачную картинку, размером с баннер, и привязывать как кнопку поверх баннера.

В CSS

 

}

#feature_head {

background:url({style_images_url}/cs_header.jpg) no-repeat scroll 0 50% #152E46;

height:260px;

margin: 25px -10px 0px -10px;

position:relative;

}

Опубликовано:

В таком случае делайте прозрачный png вместо кнопки (только больше, желательно размером с баннер) и привязывайте в html поверх баннера.

Код писала выше.

 

В принципе можно и 1 на 1 px сделать

Но тогда растянуть, задав размеры/ Примерно так

<a href='http://адрес куда ведет/'><img src='{$this->settings['img_url']}/knopka.png' width='300' height='160' alt='' /></a>

Опубликовано:
  • Автор

:blink: Может мне можно вас к себе пригласить, в АДЦ ? А то уже теоремы не совсем понятны получаются ))

Создайте аккаунт или войдите в него для комментирования

Сейчас на странице 0

  • Нет пользователей, просматривающих эту страницу.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.