Привет, друзья. Сегодня посчитала нужным вернуться к теме как работать с изображениями в блоге, которую не совсем до конца раскрыла в прошлый раз. Кто читал эту статью помнит, что рассматривали вариант, как правильно оформить ссылку на картинку и расположить её относительно текста.
Хочу рассказать, как в таких случаях правильно установить в нужном месте картинку и оптимизировать. Рассмотрим варианты обтекания картинки текстом.
Чтобы картинка располагалась строго по центру достаточно воспользоваться редактором Блоггер. И чтобы убрать лишнюю ссылку достаточно нажать на функцию ссылка. Это вы всё и без меня знаете.
Как правильно расположить небольшое изображение по центру.
танцы, танцы,танцы
танцы. танцы,танцы
Код.Этот вариант подходит для тех случаев, когда изображение расположено по центру. Если мы начнём его перемещать влево или вправо, или менять размеры, используя функцию - маленький, большой, средний, то автоматически опять появиться ненужная ссылка.
Хочу рассказать, как в таких случаях правильно установить в нужном месте картинку и оптимизировать. Рассмотрим варианты обтекания картинки текстом.
Чтобы картинка располагалась строго по центру достаточно воспользоваться редактором Блоггер. И чтобы убрать лишнюю ссылку достаточно нажать на функцию ссылка. Это вы всё и без меня знаете.
Как правильно расположить небольшое изображение по центру.
танцы, танцы,танцы
танцы. танцы,танцы
<img src=" Адрес (url) изображения" alt="танцы" height="50" width="50" title="танцуем" style="vertical-align: middle;"/>
Картинка слева от текста (повторюсь). Обтекание картинки текстом.
Обезьянки Мармозетки,
Замечательные детки -
Арди, Брюс, Базилио
Прилетели к нам в субботу
Самым первым самолётом
Прямо из Бразилии!Целый день едят конфетки,
Прочитали все газетки
Код.
<img src=" Адрес (url) изображения " alt="обезьянка" height="104" width="147" title="весёлая обезьянка" style="float: left; margin: 0 5px;"/> Остальное содержание.
Картинка справа от текста.
До чего смешная рожица! То напыжится, то съёжится... Подняла весёлый крик, Показала всем язык. Засмеялся папа - Не язык - "лопата"! Ну а я был очень мил - Ей улыбку подарил, Угостил бананом: -Кушай, обезьяна!
Код.
<img alt="обезьянка" height="104" src=" Адрес (url) изображения " style="float: right; margin: 0 5px;" title="весёлая обезьянка" width="147" />
Если нужно прекратить обтекание изображения, можно конечно наставить кучу тегов <br>,<br>. Но это будет неправильно. В том месте где следует прекратить обтекание вставьте в текст следующее:
<br style="clear: both">
Свойство clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.
clear: both | left | none | right
Всё сегодня. Спасибо за ваш визит. До встречи.
здесь можно оформить подписку на новые шпаргалки
Постараюсь использовать в своих блогах в ближайшее время! БОЛЬШОЕ СПАСИБО!
ОтветитьУдалитьВиктория! Доброе утро! Я сделала в одном из своих блогов обтекание картинки текстом! Здорово получилось! СПАСИБО! Смотрите 2 последних сообщения в БЛОГЕ Кота Васьки - http://www.pussyvasyacat.blogspot.com
ОтветитьУдалитьИрина, всё здорово. Только вот что-то блог долго грузится. Может стоит убрать некоторые гаджеты-часики, календарики. И размеры картинок уменьшить. Почитайте вот эту статью http://www.shpargalochki.ru/2014/05/gorkij-opyt-tozhe-opyt.html
УдалитьСпасибо за Ваши комментарии и что заглядываете. Ваське привет.
Здравствуйте! Самый главный тег вы дали в конце поста, вот реально для новичка бороться с этим обтеканием текста это что-то. Непонятно почему Blogger в редактор не включил эту функцию. А то, если захочешь красиво свои картинки расставить без лишнего текста, можно только по центру — слева и справа он тебе не даст. Спасибо за подсказку, просто когда начинаешь искать, тебе расскажут о многих интересных вещах, но самое главное, элементарное, которое тебе мешает двигаться дальше, об этом умолчат.
ОтветитьУдалитьЗдравствуйте. Ну значит нужно пробовать всё, чтобы понять как правильно. Вот для информации ещё как сделать обтекание круглых картинок http://www.shpargalochki.ru/2017/11/obtekanie-tekstom-kruglyh-izobrazhenij.html
ОтветитьУдалитьПривет! Спасибо за ссылку, но оптимальный вариант для картинок я уже нашёл, просто хотел поблагодарить за то, что помогаете начинать и объясняете самые азы. Просто сложности решать, когда умеешь, это одно, а вот если первый раз столкнулся и не знаешь, где взять, это другое.
ОтветитьУдалитьПривет. И то верно. Все мы друг у друга учимся. Ни кто не рождается со всеми знаниями. Все с азов начинаем.Спасибо Вам за внимание к моему блогу.
Удалить