Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Кнопка на бекграунд
Кнопка на бекграунд
Scandal
Сообщений: 99
Репутация: 0

Сообщение # 1 | 19:48:32
Всем доброго времени суток.
Мне нужна помощь, я хочу на бекграунд сайта засунуть картинку (Кнопку) и сделать ее в виде ссылки:
вот так выглядит сейчас


вот так надо:


подскажет кто как реализовать ?

Сайт http://kinoportal.clan.su

PS чем проще объясните тем будет лучше, так что бы "новенький" все понял smile

killbit
Сообщений: 317
Репутация: 104

Сообщение # 2 | 20:18:48
Вы можете свою же кнопку и использовать
например эту

Код

<a class="log_pan rcol" href="/index/3" title="">
<span>
РЕГИСТРАЦИЯ
<br>
НА САЙТЕ
</span>
</a>


единственное ей можно позицию выставить .
Что типа такого

после
<header>
Код
<a class="log_pan rcol top" href="ссылка на трейлер" title="">
<span> Смотреть трейлер </span>
</a>


и в ксс

Код

.log_pan.rcol.top {
     position: relative;
     top: -200px;
     right: 20px;
     border-radius: 8px;
     width: 150px;
     font-weight: bold;
     height: 36px;
}


ну и дальше насколько вашей фантазии хватит
Scandal
Сообщений: 99
Репутация: 0

Сообщение # 3 | 20:38:40
Цитата killbit ()
<a class="log_pan rcol top" href="ссылка на трейлер" title=""> <span> Смотреть трейлер </span>
</a>
да все вышло но как убрать + в круге и текст по середине поставить ? или к примеру сменить цвет кнопки?

killbit
Сообщений: 317
Репутация: 104

Сообщение # 4 | 20:53:50
за плюс отвечает
Код
.log_pan.rcol span {
       background: transparent url("../images/arrow_9.png") no-repeat scroll 94% 6px;
       padding: 4px 40px 0px 12px;
}

ищите рисунок какой надо и меняйте добавив это в ксс
Код
.log_pan.rcol.top span {
       background: transparent url("ссылка на картинку") no-repeat scroll 94% 6px;

}

то же самое и с цветом

добавляете в этот блок

Код
.log_pan.rcol.top {
        position: relative;
        top: -200px;
        right: 20px;
        border-radius: 8px;
        width: 150px;
        font-weight: bold;
        height: 36px;
}


Код
background:цвет;


Цвета Можно глянуть здесь

информацию по бекграунду можно глянуть здесь

а тут выравнивание текста
Сообщение отредактировал killbit - Пятница, 04 Сен 2015, 20:57:01
Scandal
Сообщений: 99
Репутация: 0

Сообщение # 5 | 20:59:10
Цитата killbit ()
за плюс отвечает
ну если я его удалю я так понимаю на кнопки регистрации и авторизации ее тоже не будет? Мне же нужно что бы ее только на это кнопки не было

Добавлено (04 Сен 2015, 20:59:10)
---------------------------------------------

Цитата killbit ()
ищите рисунок какой надо и меняйте добавив это в ксс
проще говоря, может можно просто влепить туда картинку с ссылкой а не парится?

killbit
Сообщений: 317
Репутация: 104

Сообщение # 6 | 21:02:05
Цитата Scandal ()
ну если я его удалю я так понимаю на кнопки регистрации и авторизации ее тоже не будет? Мне же нужно что бы ее только на это кнопки не было

Просто переназначьте бекграунд
скопируйте в ксс
Код

.log_pan.rcol.top span {
         background-image: none;

}

Добавлено (04 Сен 2015, 21:02:05)
---------------------------------------------

Цитата Scandal ()
проще говоря, может можно просто влепить туда картинку с ссылкой а не парится?

Угу , можете найти картинку маленькую в гугле
Scandal
Сообщений: 99
Репутация: 0

Сообщение # 7 | 21:15:11
Цитата killbit ()
Угу , можете найти картинку маленькую в гугле
ну картинку я и сам сделаю просто изначальный вопрос как засунуть картинку в бекграунд с ссылкой , вот что я понять не могу)

killbit
Сообщений: 317
Репутация: 104

Сообщение # 8 | 21:27:09
Цитата Scandal ()
ну картинку я и сам сделаю просто изначальный вопрос как засунуть картинку в бекграунд с ссылкой , вот что я понять не могу)


Код
.log_pan.rcol.top span {
        background: transparent url("ссылка на картинку") no-repeat scroll 94% 6px;

}


Я же дал ссылочку )) сходите почитайте , там много интересного
http://htmlbook.ru/css/background-image
http://htmlbook.ru/css/background-position

вот это в ксс
Scandal
Сообщений: 99
Репутация: 0

Сообщение # 9 | 21:57:54
Цитата killbit ()
а тут выравнивание текста
просто смотри , я центрировал текст как написано по ссылке что ты дал, и у меня вот что выходит


1. не совсем по центру :О
2.Смотреть и трейлер с новой строки, а нужно то все в одной :О

Добавлено (04 Сен 2015, 21:57:54)
---------------------------------------------
вот что вышло, но в центр все равно не хочет..


killbit
Сообщений: 317
Репутация: 104

Сообщение # 10 | 22:57:34
Цитата Scandal ()
вот что вышло, но в центр все равно не хочет..

можно margin использовать.

margin-top:5px;
например .
или padding

http://htmlbook.ru/css/cat/margin
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Кнопка на бекграунд
Страница 1 из 11
Поиск: