Тач Сылка! - PROFIWM.COM

Купить рекламу

Шины и диски для настоящих боссов дороги;

Обновить | Подписаться | Поднять тему

Чтобы выполнить действие авторизируйтесь или пройдите регистрацию на сайте.

Stimik

0.03

[автор] (27 сен 2013, 13:26) [0/0] [0] [отв] [спам] [под] +1 | -1

Как зделать Тач Ссылку!?
Соцка Кота)

Donkers

(27 сен 2013, 13:27) [0/0] [0] [отв] [спам] [под] +1 | -1

Раком
Добавлено 27.09.13 в 13:28:13:
Когда то я тоже не знал как

NeaDek(WAT)

[мошенник] 0.57

(27 сен 2013, 13:29) [0/0] [0] [отв] [спам] [под] +1 | -1

Stimik,

Для начала нужно растянуть ссылку на всю ширину экрана.
Мегакулдизайнеры говорят что для этого нужно вставить в ксс display: block;. Вроде правильно, но нас постигает глубочайшее разочарование когда мы видим как другие объекты сдвигаются вверх или вниз. Это всё потому что display: block; слишком капризный и поэтому не разрешает другим объектам соватся на свою территорию(строку).
Но его можно надресировать. Для этого добавляем к нему дресировщика по имени inline. Получается у нас вот такое display: inline-block;. Но этого не достаточно. Ведь дресировщик не знает как дресировать. Чтобы он узнал, нужно еще добавить width: 100%;. Смотрим, у нас кликабельность ссылки растягивается на всю ширину экрана. Но она по прежнему тонкая, пальцем по такой на сенсорах телефонах будет затруднительно попасть. Чтобы откормить и сделать её большой, нужно добавить повора padding: 6px;(цифру изменяйте как хотите). Отлично! У нас получилась тач ссылка которая не кому не мешает.

Теперь мы хотим её украсить. Например, рамкой.
Для этого добавляем border: 1px #000000 solid;(толщину, цвет и стиль рамки изменяйте как хотите).
Но правый и левый края рамки мы не видим. Это потому что ссылка растягивается на всю ширину экрана. Чтобы увидить левый и правый края рамки изменяем это width: 100%; на это width: 94%; и добавляем margin-left: 3px;(это отступ от левого края).
Теперь всё отображатся как надо.
Также, на фон тач ссылки можно добавить картинку, чтобы сделать её объемной. Для этого добавляем следующее background: url(ссылка/на/картинку.png) repeat-x top; или можно добавить стрелочку после ссылки, для этого делаем так background: url(ссылка/на/картинку.png) no-repeat;

Лорд

5.72

(27 сен 2013, 13:29) [0/0] [0] [отв] [спам] [под] +1 | -1

Сначала ссылка,потом класс

Shot_

7.61

(27 сен 2013, 13:30) [0/0] [0] [отв] [спам] [под] +1 | -1

сначало возьми ссылку а потом див,и закрой.

BoB

0.34

(27 сен 2013, 13:30) [0/0] [0] [отв] [спам] [под] +1 | -1

Donkers,

когдата все незнали

Stimik

0.03

[автор] (27 сен 2013, 13:30) [0/0] [0] [отв] [спам] [под] +1 | -1

Allion, Это я на ДМАСТЕ читал!

МАНЬЯК ЧИКАТИЛО

48.79

(27 сен 2013, 13:31) [0/0] [0] [отв] [спам] [под] +1 | -1

Причём сдесь соцка кота вобще?
Пишешь кароче в style.css этот код:

.link5 {
background : #ededed;
border-top : 1px solid #d8d8d8;
border-bottom : 1px solid #fff;
padding : 7px;
display : block;
}

.link5:hover {
background : #e5e5e5;

}

Вырвал у себя из портфеля что бы не расписывать заного.

Выводится так:

echo\'<a class=\"link5\" href=\"ССЫЛКА ТВОЯ\">ссылка</a>\';