Ка сделать тач диз?

magik, Самый распространенный вопрос: \"Как сделать тач ссылки?\". Мда...помню и сам такое спрашивал.
Что ж, попробую объяснить.

Для начала нужно растянуть ссылку на всю ширину экрана.
Мегакулдизайнеры говорят что для этого нужно вставить в ксс 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;
капипаст