Вторник, 19.03.2024, 12:55
Приветствую Вас Гость |
Никнейм Shampusik зарегистрирован!

shampusik

Весны в душе!      

чатик


  
блеск блеск Друзья Сайта блеск блеск
блеск
Анекдот дня
- Доктор, у меня бывают провалы в памяти.
- Да? И часто они у вас бывают?
- Кто?
- Провалы.
- Какие провалы?
------------
На приёме у окулиста:
— Какую букву я показываю?
— А кто это говорит?
-----------
В лифте, на последнем этаже:
— Вниз?
— Нет, блин, в бок!
------------
 - Дочь, выпей со мной!
 - Ну пааап... 
 - Что пап?!
 Я же с тобой уроки делал!
------------
Доктор, посмотрите! – говорит мужик, спуская штаны перед урологом.
- Болит?
- Нет.
- Маленький?
- Нет.
- Большой?
- Нет.
- А что тогда?
- Правда, хорошенький?
------------
Юмор
Читать далее: Жми тут

Shampusik.ucoz.net

Сайт для отдыха и хорошего настроения.

Сайт где есть все.
Музыка, софт, фильмы, красивые картинки про Любовь, стихи, форум, новости и многое другое!!!


Доктор WEB

Посетители

  
Информер праздники сегодня

  
     


shampusik.ucoz.netСайт для отдыха и хорошего настроения




Моим друзьям


Пожелания друзьям !!!

Пожелания друзьям !!!

   
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


Ваш IP адрес:
Ваш IP адрес:

Ваш IP адрес в данный момент

 

Oбтекание картинки текстом

 Ничего сложного в том, чтобы сделать обтекание картинки текстом, нет. В то же время, вопрос какой код нужен для задания отступов текста от картинки или фотографии достаточно распространенный у новичков, которые только начали вести блог или постигать основы html+css. В этой статье я приведу пару типичных решений для создания отступа картинки от текста в виде кода html и css.
               Способ 1: Вписываем код отступа текста для отдельной картинки или фотки
 


 

Простой способ задания обтекания картинки текстом, не требующий знаний html и css.
Чаще всего встречается задача, когда нужно расположить картинку слева и чтоб при этом ее сверху, справа и снизу окружал текст.
Еще желательно, чтобы текст располагался не вплотную к вставленной в статью фотографии или схеме, а немного отступал от картинки.
Как правило, большинство админок генерируют код для вставки изображения, при котором картинка располагается слева,
а текст начинается не справа вверху от картинки, в справа внизу, что удобно для крохотных иконок, но не подходит для больших картинок.
Чтобы сделать обтекание текстом для изображения, как в этом способе, при вставке картинки в статью нужно написать такой код:

 
<img src="здесь_веб-адрес_картинки" 
 alt="Здесь_подсказка_если_картинка_не_загрузилась" 
title="Здесь_всплывающая_над_картинкой_подсказка" 
width="ширина_ картинки_в_точках_числом" 
 height="высота_ картинки_в_точках_числом" 
 align="left" 
 style="margin: 3px 12px 0px 0px;" />
  Например, для вставки картинки, которую вы видите в этой статье чуть выше, код html и css выглядит так:
  <img src="http://www.webdi.kz/images/image/4f36da016d31.jpg"
 alt="Задаем отступ текста для фото" 
 title="Задаем отступ текста для фото" 
 width="300" height="350" 
 align="left" 
 style="margin: 3px 12px 0px 0px;" />
  Если вместо

align="left

написать

align="right"

Картинка будет прижиматься к правому краю, а текст слева будет подходить к ней вплотную.
Отступ текста от краев картинки в данном случае задается css-стилем

 
 margin: 3px 12px 0px 0px
 

Способ 2: Задаем отступы сразу для всех картинок в блоке одним классом css
 

  

Далее, в основном файле стилей css (обычно style.css) находите имя нужного класса (на примере его имя entry) и добавляете в файл описания стилей дополнительный класс, задающий поведение картинок (IMG) в нужном блоке:

.entry img { 
 margin: 3px 12px 0px 0px; 
 }

 Обратите внимание на обязательную точку перед именем класса (у вас он, вероятно, будет называться не entry, как в моем шаблоне WordPress),
пробел между именем css-класса и словом img, которое означает, что все инструкции класса относятся только к картинкам, находящимся внутри блока entry.
Числа, задающие отступ от картинки для текста и других изображений в статье, естественно, можно ставить свои.
Первый параметр после дерективы margin задает отступ картинки сверху, далее отступ справа, затем отступ снизу и последний параметр – отступ картинки от левого края.
После изменения своего файла стилей с расширением .css его следует перезалить на свой сайт по ftp.
В результате автоматически изменится отступ для всех картинок во всех статьях сайта/блога, стиль которых задается измененным css-классом.


 

Старый Вход блеск

Поиск
блеск Личный кабинет блеск
тут не скучно
форум19.03.2024
12:55




Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!

Календарь
«  Март 2024  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Новое на форуме Подробней о форуме
bleskНовое в Блоге
skupev
Добавлено: 25.11.2018
15 полезных для здоровья свойств простой воды

Комментарии: 0

skupev
Добавлено: 11.01.2017
Домашний коньяк — удивите ваших гостей!

Комментарии: 0

skupev
Добавлено: 23.11.2016
10 признаков счастливого человека.

Комментарии: 2

  • bleskНаш баннерблеск

    Если Вы хотите поддержать наш проект,
    разместите на своем сайте нашу кнопку:
  • Помощь сайту

    Если материалы данного сайта оказались Вам полезны, интересны, или же Вы просто хотите помочь развитию данного проекта, то мы приветствуем
    Любую Вашу помощь
    . Например:

    Ваши предложения по улучшению дизайна и удобства пользования сайтом.

    Ваши предложения по развитию сайта, появлению новых разделов.

    Добавление ссылок на наш сайт на тех форумах, где Вы часто бываете.

    Любая другая Ваша помощь!

    Для контакта с нами используйте Обратную связь. Самая эффективная и простая помощь для нас — частое посещение сайта и добавление новых отзывов! Если Вы хотите поддержать наш проект, разместите на своем сайте нашу кнопку.
  • WebMoney

    Если у Вас есть желание помочь материально,то можете отправить любую сумму на наш кошелёк
    WebMoney:

    R790729935749

    E246164539736

     -------------------
" Рекламма "
" Выведу методом запоя из соц.сетей: контакта и одноклассников! Пишите ..."

"Shampusik"

По всем спорным вопросам, Вы можете вызвать админа с помощью этой кнопки    
Никнейм Шампусик ,создан Для сайта и чатов ... с хорошей музыкой , адекватными людьми и приятным общением. )))     Сертификат на никнейм Shampusik, зарегистрирован на //shampusik.ucoz.net/
 
transport Индекс цитирования Яндекс.Метрика Рейтинг@Mail.ru Каталог сайтов Всего.RU Каталог сайтов Bi0 Каталог webplus.info счетчик 
посещений
  
   Яндекс.Метрика