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

1262
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
Мини-чат
Последние комментарии
  • Marishka написал:
  • Upd 1.4 Кому лень https://jsfiddle.net/7js6tfp1/5/
  • Marishka написал:
  • Мы обновили код и упростили его установку:
    Что нового:
    1. Новый легкий js код.
    2. Отправка по Enter если есть или нет Aa цвета.
    3. Простая установка.

    Принцип работы:
    Используется родное поле ввода текста с выбором цвета, родная кнопка отправки скрывается позволяя отправить форму по Enter.

    Демо: https://jsfiddle.net/7js6tfp1/4/
  • Marishka написал:
  • Радио не стоит на месте новая версия вам 1.5:
    Что нового:
    1. Media Session - позволит вам переключать из бара браузера радио, а также на блоке экрана.
    2. Новые радиостанции.
    3. Новый API код.

    Демо: fiddle
    Реальная полная версия: woobl
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
    Последние темы
    Опрос
    475
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 4
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: