Картинка с описанием на странице контента uCoz

1233
10 из 10
Проголосовало: 3






Нам необходимо на странице с контентом, в нужное место установить контейнер div, в который мы помещаем ссылку на изображение и тег span, в котором прописываем комментарий к изображению:

Code
<div class="content_img">  
  <img alt="пример новости в демо" title="картинка новости "src="img/primer_img_news.jpg">
<span>описание картинки</span>  
</div>


Теперь всё, что нам необходимо, так это прописать нужные css стили нашему html шаблону выше:

Code
/* Описание под картинкой  
------------------------------------------*/  
.content_img {  
  width:160px;  
  float:right;  
  display:block;  
  text-align:center;  
  background: #f6f6f6;  
  outline: 1px solid #D0D0D0;  
  border: 1px solid #fff;  
  padding: 5px 5px 5px 5px;  
  margin: 0px 2px 5px 20px;  
}  

.content_img img {  
  margin: 3px 0px 3px 0px;  
}  

.content_img span {  
  color:#777;  
  font: 10px Verdana,Arial,Helvetica, sans-serif;  
  text-shadow: 1px 1px 1px #fff;  
}


Обратите внимание, что в данном примере, контейнер div будет размещён с правой стороны вашего контента, для отображения с левой стороны контента, вам необходимо установить этот стиль:

Code
/* Описание под картинкой  
------------------------------------------*/  
.content_img {  
  width:160px;  
  float:left;  
  display:block;  
  text-align:center;  
  background: #f6f6f6;  
  outline: 1px solid #D0D0D0;  
  border: 1px solid #fff;  
  padding: 5px 5px 5px 5px;  
  margin: 0px 20px 5px 0px;  
}  

.content_img img {  
  margin: 3px 0px 3px 0px;  
}  

.content_img span {  
  color:#777;  
  font: 10px Verdana,Arial,Helvetica, sans-serif;  
  text-shadow: 1px 1px 1px #fff;  
}


На этом всё, спасибо за внимание !
Автор публикации: Загрузка
Загрузка
Estwood, это его n материал
Источник: http://www.center-dm.ru
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2116
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Добрый вечер.Подскажите,пожалуйста: как сделать, чтобы второй или третий набор смайлов заменить своими.
Вы сами себе пишите?
  • CbIPoK2513 написал:
  • Скрипт хорош, уже подстроил свой сайт под него :3
  • gefest35 написал:
  • Супер)))!пасиб за работу!!!
  • sasha2016tv написал:
  • Хороший скрипт
    Последние темы
    Опрос
    240
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 1
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: