Перейти к публикации
Дизайн и модификация IPS Community IPBSkinsBETA
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...
Alexander Koshelkov

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

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

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

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

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>

  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

<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

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

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

Поделиться сообщением


Ссылка на сообщение
05/06/11 05:53 (изменено)

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

<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 пользователей

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

×
×
  • Создать...