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

1251
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 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
  • waak написал:
  • Почему у меня он перелистывает в верх а не вниз и если это первая песня на стр то он её по кругу гоняет а не переходит к последней
    и как сделать стоп по клику на трек который играет?
  • Acht написал:
  • Тест
    Мда, у меня тоже не работает. Или нужно ждать обновление?
    Последние темы
    Опрос
    255
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: