понедельник, 3 сентября 2012 г.

Отступ текста от картинки.Йёжа Йежов

Столкнулся с интересной проблемой .
Не получалось  сделать отступ  текста от картинки в Блоггер,долго искал и наконец нашёл .Вообще заметил , что на многих сайтах и блогах зазора между картинкой и текстом нет .
Смотрится не очень , мягко говоря .Можно,конечно, делать картинку посередине ,а текст сверху и снизу ,но иногда хочется расположить как-то покомпактнее .К тому же если много фото и текста ,страница выглядит очень растянутой ,что не всегда есть хорошо .Хотя -это дело вкуса  .Но с отступом  всё-таки смотрится немножко лучше -сугубо моё мнение , которое ,безусловно можно оспорить.Кстати как правильно располагать картинки можно прочитать здесь .Автор прекрасно рассказывает и показывает.


Пример взят из инета

Как видим здесь отступа нет и текст налипает на картинку .Смотрится не айс явно.Будем с этим бороться .Я нашёл несколько статей на эту тему .Кстати .пытался сделать текст без отступа для демонстрации ,но не получилось -закон подлости .Возможно уже  вбили в шаблон
данный отступ .Но если всё-таки отступа нет ,мы его сделаем .Сами .Своими руками .

Вариант 1

Достаточно простой и без ковыряния в шаблоне.Подойдёт для всех ,особо для новичков и не только . Хотя говорят , что он устарел .Недостаток -надо вставлять в каждую статью по новой, но это можно пережить как-нибудь .Материал взят ЗДЕСЬ И ЗДЕСЬ
Ёжики с отступами ,которых видите слева и справа, сделаны именно с помощью этих формул-кодов ,которые видите ниже. .




<img src="Адрес вашей картинки" align="left"title="Podskazka"width="310px" height="100px" hspace="15"vspace="15">

или Если хотим картинку справа  
<img src="Адрес вашей картинки" align="right"width="310px" height="100px" hspace="15"vspace="15">

 или Если хотим картинку справа c подсказкой и названием
<img src="Адрес вашей картинки" align="right"alt="nazvanie" title="podskazka"width="310px" height="100px" hspace="15"vspace="15">



.

Вместо Адрес вашей картинки ,естественно вставляем свой адрес картинки 
align="left" – картинка слева, текст справа
align="right" – картинка справа, текст слева
hspace="15" – расстояние между текстом и картинкой 15 пиксел по горизонтали h-Horizontal
vspace="15" – расстояние между текстом и картинкой 15 пиксел по вертикали v-Vertical
width="310px" Ширина .
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
height="100px" Высота 
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию 
center -картинка по центру .Но отступ у меня не получается по центру
.

Вариант 2
В общем-то ненамного и сложнее  первого варианта .ВЗЯТ ЗДЕСЬ.
Вместо ёжик hspace и vspace варианта 1 присвоим  класс.
ёжикАвтор назвал его otstup-1.Ну пусть будет так. Здесь уже надо будет лезть в шаблон .Что cтрашно ? Когда-то же надо начинать!!
Пусть это будет сегодня .Прежде чем запускать свои шаловливые ручки в оный Нужно
.
.
Это надо делать перед любыми эксперементами

Приступим тогда к ломанию шаблона .
Идём в редактирование блога 

.  
Идём в редактирование блога 
ШАБЛОН-ИЗМЕНИТЬ HTML-ПРИСТУПИТЬ-ставим галочку . 

РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА
Нажимаем клавиши на клавиатуре Ctrl+F .Вводим в поиск

]]></b:skin>
Щёлкаем мышкой прямо перед ним .Нажимаем ENTER .И в освободившуюся строчку над кодом вставляем
 .otstup-1 {

  margin: 0px 15px 10px 0px;

}

Нажимаем СОХРАНИТЬ ШАБЛОН
 margin-есть величина отступа
15px 10px величина отступа по горзотали и вертикали в пикселях
Для того ,чтобы Вставить картинку в статью. Пишем следующий код 

 Если картинка слева
<img class="otstup-1" align="left" width="310px" height="100px" alt="Название" src="Адрес ВАшей картинки">
или Если картинка справа
 <img class="otstup-1" align="right" width="310px" height="100px" alt="Название" src="Адрес ВАшей картинки">

   
align="left" – картинка слева, текст справа
align="right" – картинка справа, текст слева
width="310px" Ширина .
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
height="100px" Высота 
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
alt="Название"-естнествено ставим своё
src="Адрес ВАшей картинки" само собой ваш адрес картинки

.


 Вариант 3
Добрались с горем пополам до третьего варианта.ВЗЯТ ЗДЕСЬ.
Он не
ёжик

ёжик
отличается в установке   от варианта 2 
Автор назвал его primer-2.Значит так его и назовём. Также заходим в шаблон . Уже есть небольшой опыт.Так что боимся меньше 
Но всё равно не забываем

Прежде чем запускать свои шаловливые ручки в шаблон Нужно
.
.
Это надо делать перед любыми эксперементами

Приступим .
В принципе всё тоже самое ,разница только в добавляемом коде
Идём в редактирование блога 
ШАБЛОН-ИЗМЕНИТЬ HTML-ПРИСТУПИТЬ-ставим галочку . 

РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА
Нажимаем клавиши на клавиатуре Ctrl+F .Вводим в поиск

]]></b:skin>
Щёлкаем мышкой прямо перед ним .Нажимаем ENTER .И в освободившуюся строчку над кодом вставляем

 .primer-2 img {

  margin: 0px 15px 10px 0px;

}
Нажимаем СОХРАНИТЬ ШАБЛОН
 margin-есть величина отступа
15px 10px величина отступа по горзотали и вертикали в пикселях
Для того ,чтобы Вставить картинку в статью. Пишем следующий код

Если картинка слева
<div class="primer-2">

  <img align="left" width="310px" height="100px" alt="Название" src="Адрес ссылки">

  </div>


Если картинка справа
 <div class="primer-2">

  <img align="
right" width="310px" height="100px" alt="Название" src="Адрес ссылки">

  </div> 
.
align="left" – картинка слева, текст справа
align="right" – картинка справа, текст слева
width="310px" Ширина .
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
height="100px" Высота 
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
alt="Название"-естнествено ставим своё
src="Адрес ВАшей картинки" само собой ваш адрес картинки


.


 Вариант 4

          
ЁжНу вот и четвёртый вариант .Отличия,как 
такового нет  , почти.Конечный результат мы получаем тот же .Ведь нас именно результат интересует ?!
Я не специалист и не очень разбираюсь в преимуществах одного кода над другим .
Но раз автор дал несколько вариантов ,я их прихватил ,прихватизировал, так сказать .
 Установка кода иденчина второму и Ёж третьему вариантам ,но всё равно опять расскажу про неё .Повторение мать учения!Так что будем повторять и учиться!!!! И я тоже виесте с вами .Ведь я тоже новичок в блогостроении и тоже учусь .Мы все учились понемногу, Чему-нибудь и как-нибудь .Правда вот не доучились .Ну ,что ж будем добирать недополученное.
Грызть гранит блоговедения .Судьба такой нелёгкий ,однако !
.

Прежде чем начнём курочить  наш шаблон Нужно
.
.
Это надо делать перед любыми эксперементами

Приступим .
Идём в редактирование блога 
ШАБЛОН-ИЗМЕНИТЬ HTML-ПРИСТУПИТЬ-ставим галочку . 

РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА
Нажимаем клавиши на клавиатуре Ctrl+F .Вводим в поиск

]]></b:skin>
Щёлкаем мышкой прямо перед ним .Нажимаем ENTER .И в освободившуюся строчку над кодом вставляем

 .primer-3 img {

  float:left;  


  margin: 0px 15px 10px 0px;
 float:right;  

  margin: 0px 15px 10px 0px;
}
Нажимаем СОХРАНИТЬ ШАБЛОН
 margin-есть величина отступа
15px 10px величина отступа по горзотали и вертикали в пикселях
Для того ,чтобы Вставить картинку в статью. Пишем следующий код 
.
 Если картинка слева
<div class="primer-3">  <img align="left" width="310px" height="100px" alt="Название" src="Адрес ссылки на картинку"></div>

Если картинка справа

 <div class="primer-3">  <img align="right" width="310px" height="100px" alt="Название" src="Адрес ссылки на картинку"></div>
.
align="left" – картинка слева, текст справа
align="right" – картинка справа, текст слева
width="310px" Ширина .
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
height="100px" Высота 
Если не хотим выставлять размеры ,просто удаляем цифры,тогда будет ширина и высота картинки по умолчанию
alt="Название"-естнествено ставим своё
src="Адрес ВАшей картинки" само собой ваш адрес картинки

. .

Вариант 5
Взят здесь


ёжаЕщё один вариант отступа .Далее текст автора варианта .
Нужен ли перенос текста, зависит от того, как ваш сайт построен. Блоги, которые используют широкий дизайн, обычно прикрепляют небольшие фотографии, встроенные в текст и опираются на параметры обтекания, чтобы изображения и текст были совместимыми. 
Многие сайты, имеют модульную конструкцию, поэтому им просто необходимо использоватьёжа  обтекание текстом, потому что текст и изображения почти полностью состыкованы
 и редко появляются с промежутками.Изображение и выравнивание, также может повлиять на внешний вид обтекания текстом. Обтекание всегда будет казаться лучше, когда будет попадать рядом с текстом (так, чтобы все линии начинались/заканчивались на том же месте). Обтекание проявляется слабее, когда оно находится вместе с «рваным» текстом.
Текст автора варианта вставлен для примера обтекания  текста на данном коде .да и просто полезно почитать
Вставляем в шаблон
.
Прежде чем начнём ломать  наш шаблон Нужно
.
.
Это надо делать перед любыми эксперементами

Приступим .
Идём в редактирование блога 
ШАБЛОН-ИЗМЕНИТЬ HTML-ПРИСТУПИТЬ-ставим галочку . 

РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА
Нажимаем клавиши на клавиатуре Ctrl+F .Вводим в поиск

]]></b:skin>
Щёлкаем мышкой прямо перед ним .Нажимаем ENTER .И в освободившуюся строчку над кодом вставляем
следующий код
.
.align_left {

    float: left;

    margin-right: 1em;

    margin-bottom: 1em;

}



.align_right {

    float: right;

    margin-left: 1em;

    margin-bottom: 1em;

}



.align_center {

    display: block;

    margin-left: auto;

    margin-right: auto;

}
.

Нажимаем СОХРАНИТЬ ШАБЛОН
 margin-есть величина отступа 
 Для того ,чтобы Вставить картинку в статью. Пишем вот такой код код
<img src="Адрес картинки" alt="название" class="my-align-class" />


Вставляем свой адрес и название и все .перетягиваем картинку мышкой влево или вправо


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


ЕЩЁ СТАТЕЙ ОТ ЙЁЖИ ЙЕЖОВА


Об Авторе

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

Отправить комментарий