Добавить сайт в закладки | Регистрация | Вход | RSS   
  0629 Первый информационно-развлекательный сайт портал города. Городской сайт  
Добавить объявление
 
Расширенный
Знакомства
 
Я:
Найти:
Возраст:
лет
Где:



Категории
ПроисшествияКриминал
ОбществоПолитика
БизнесСпорт
Страна и мирЭкология
КурьезыКультура
ФОРЕКСВАЛЮТА


Главная » 2014 » Январь » 25 » Вид информера онлайн кинотеатра
13:39
Вид информера онлайн кинотеатра
Если вы владелец онлайн кинотеатра в системе 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 */  
}  
Категория: Происшествия | Просмотров: 505 | | Рейтинг: 0.0/0
Поделиться в соцсетях
comments powered by HyperComments

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
[13.09.2014][Общество]
Представь себе, что каждый день минимум 3 новые красивые девушки (0)

[03.03.2014][Происшествия]
Аудиоплеер серого цвета с плейлистом (0)

[03.03.2014][Происшествия]
Рабочий мини профиль для ucoz (0)

[28.02.2014][Происшествия]
Красочный КВ скрипт + оформлен css стилями (0)

[28.02.2014][Происшествия]
Вид опроса для uCoz в стиле Flat дизайна (0)

[28.02.2014][Происшествия]
Форма поиска по сайту ucoz (0)

[08.02.2014][Происшествия]
Чвсы для сайта, блога (0)

[25.01.2014][Происшествия]
Получить код кнопки или баннера (0)

[25.01.2014][Происшествия]
Вид информера онлайн кинотеатра (0)

[25.01.2014][Происшествия]
Кот на сайт для uCoz (0)

[20.01.2014][Происшествия]
Скрипт радио для вашего сайта (0)

[29.12.2013][Происшествия]
Кнопка вверх (0)

[29.12.2013][Происшествия]
Вид комментариев для юкоз (0)

[27.12.2013][Происшествия]
Цветная статистика для Ucoz (0)

[13.12.2013][Происшествия]
Гирлянда для сайта (0)

[12.12.2013][Происшествия]
Новогодние украшения на сайт (0)

[12.12.2013][Происшествия]
Скрипт снег на сайт для uCoz (0)

[07.12.2013][Происшествия]
Профиль для ucoz в нижнем правом углу сай (0)

[07.12.2013][Происшествия]
Красивый информер для файлов ucoz (0)

[07.12.2013][Происшествия]
Кнопка Вверх и вниз для сайта (0)



Изделия из металла.