» » >
Картинка с описанием на странице контента uCoz
·
28.09.2013, 21:38


В целом, можно найти в интернете скрипты, которые прописывают под изображением нужный текст, который расположен в title самого изображения.

Но так как я против того, чтобы загружать страницу дополнительными скриптами и тратить на их поиск своё время, я решил ответить на данный вопрос благодаря знаниям html-css.

Шаг 1 - Установим HTML:

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

HTML

<div class="content_img">
  <img alt="пример новости в демо" title="картинка новости "src="img/primer_img_news.jpg">
<span>описание картинки</span>
</div>  
Шаг 2 - Установим CSS:

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

CSS-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 будет размещён с правой стороны вашего контента, для отображения с левой стороны контента, вам необходимо установить этот стиль:

CSS-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;  
}

На этом всё, спасибо за внимание!

Категория: Вид новостей | Добавил: tashkent97
Просмотров: 509 | Загрузок: 245 | Источник: center-dm.ru | Рейтинг: 5.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<