Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Alexander Koshelkov

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

Recommended Posts

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

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

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;

}

 

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

Share this post


Link to post
Share on other sites

Код не нужен.

Перед

 

Добавьте

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

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

 

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

Share this post


Link to post
Share on other sites

Код не нужен.

Перед <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>

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

 

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

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

Share this post


Link to post
Share on other sites

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

заменить на

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

  • Upvote 1

Share this post


Link to post
Share on other sites

<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

 

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

Share this post


Link to post
Share on other sites

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

position: relative;

вместо absolute

 

 

Ps

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

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

Share this post


Link to post
Share on other sites

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

<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

Edited by Alexander Koshelkov

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

В 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;

}

Share this post


Link to post
Share on other sites

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

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

 

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...