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

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

02012-08-04794610Денис Абдуллин

Если вы владелец онлайн кинотеатра в системе uCoz, и пользуетесь информерами, то статья именно для вас.
Стандартный вид информеров не то, что поможет привлечь потенциальных зрителей, а скорее отпугнет. Во-первых, из-за того, что заходят в кинотеатр, все должно быть наглядно. Изначально информер выглядит как простой текст (название), с датой добавления, и автором, все. Мало, кто захочет читать. Поэтому для информеров такого типа нужна как минимум картинка. Это не обязательно может быть информер фильмов, здесь может быть одежда оптом. Да, уже нормально, но фильмы имеют названия разной длины, потому все картинки смещаются, какие-то выше, какие-то ниже, в общем, весь вид портится.

Я предлагаю сделать надписи прямо на картинке, при этом красиво это все оформив.

информер ucoz

Итак, начнем.

Для начала, вставим этот код в шаблон информера.


Code
<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>  
<div class="img_title"><div align="left"><a href="$ENTRY_URL$">$TITLE$</a></div></div>  
</h2>  
</div>  
</p>  
</td>  
</tr>  
</tbody>  
</table>

После чего, в CSS вставляем данные стили.


Code
.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 - можно убрать, чтобы блок сам увеличивался или уменьшался в зависимости от длины заголовка. Или оставить, если хотите, чтобы блоки были одинаковые (при этом если надпись длиннее оставленной высоты (места), то она будет вылезать за рамки).


Code
h2 {  
position: absolute;  
top: 170px;  
left: 0;  
width : 100%;  
vertical-align:middle;  
}  
.image {  
position: relative;  
width : 100%; /* for IE 6 */  
}  

Данный стили отвечают за то, чтобы картинка и текст находились в правильном порядке.


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (10)
Tuxtaev 2015-01-11 в 21:29 / МатериалСпам
ны как не могу устанавить
0
Гость 2013-09-01 в 11:38 / МатериалСпам
А как сделать чтобы были только картинки без описания ?
0
Гость 2013-08-04 в 15:16 / МатериалСпам
Спасибо у вас отличный сайт! Наверное надо добавит хотя бы 4 материала что бы была надпись под картинкой! Короче огромное вам спасибо!
0
Гость 2013-08-04 в 15:15 / МатериалСпам
Все спасибо! К стате как сделать что бы надпись была под картинкой?
0
Илья Дементьев 2013-08-04 в 17:59 / МатериалСпам
По сути надпись под картинкой должна выводиться через тег $TITLE$, т.е. через название добавляемого материала.
0
Гость 2013-08-04 в 15:12 / МатериалСпам
Ну я так и делаю но почему то нет
0
Илья Дементьев 2013-08-04 в 14:59 / МатериалСпам
Что-бы были видны картинки надо когда добавляешь новый материал загрузить изображение. И все. P.S. Картинка выведется через код $IMG_URL1$.
0
Гость 2013-08-04 в 14:56 / МатериалСпам
Помоги админ!
0
Гость 2013-08-04 в 14:55 / МатериалСпам
Срочно помогите!
0
Гость 2013-08-04 в 14:55 / МатериалСпам
А как сделать что бы были видны картинки?
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.