воскресенье, 27 февраля 2011
17:14

Обтекаемые картинки

все записи пользователя в сообществе Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Картинка с обтекающим ее текстом.
Картинка слева: <img src="адрес картинки" style="float: left; margin-right: 10px;"> Текст текст текст...
Картинка справа: <img src="адрес картинки" style="float: right; margin-left: 10px;"> Текст текст текст...
Margin - это отступ текста от края картинки, размер задается по вкусу.

Обтекаемые превьюшки.
Делаете превью любым доступным вам способом (про вставку превью рассказывается здесь, здесь, здесь и здесь) и затем к ссылке добавляете style="float: left; margin-right: 10px;" либо style="float: right; margin-left: 10px;".

<a href="адрес картинки"><img src="адрес картинки" width=XX style="float: left; margin-right: 10px;"></a>

Если картинка из БИ: <a href="картинка"><img src="превью" style="float: left; margin-right: 10px;"></a>

Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

[MORE=<img src="адрес картинки" width=XX style="float: right; margin-left: 10px;">]<img src="адрес картинки" style="float: right; margin-left: 10px;">[/MORE]

Из БИ: [MORE=<img src="превью" style="float: right; margin-left: 10px;">]<img src="картинка" style="float: right; margin-left: 10px;">[/MORE]

Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст тексттекст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

@темы: Добавление изображений, Теги оформления записи

URL
Комментарии
08.07.2011 в 21:03

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
funny-bone, понятно, убираете под море ваш текст и вместо "читать дальше" вставляете код картинки (см. коммент выше).
URL
08.07.2011 в 21:05

я так пробовала, не получилось..пойду еще пробовать)
URL
08.07.2011 в 21:07

получилось. :yes: спасибо. вот все так, с первого раза никак :D
URL
08.07.2011 в 21:07

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
попробуйте тут в комментах) небольшой кусок текста и под какую картинку пытаетесь убрать.
URL
08.07.2011 в 21:11


URL
08.07.2011 в 21:12

чото она мне уже разонравилась надо более выразительную найти :-D
URL
08.07.2011 в 21:12

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
funny-bone, так получается же!)
URL
08.07.2011 в 21:12

да, спасибо. еще раз! :white:
URL
22.05.2012 в 23:39

380509814378
полюбите жизнь и она обязательно полюбит вас
помогите , пожалуйста разобраться - никак не могу научиться вставлять картинки с облегающим их текстом )))
сколько не пробовала ничего не получается , а очень нужно )))
почему то ссылки , когда их вставляешь исчезают
если можно поподробнее для чайников , пожалуйста ))):beg::beg::beg:
URL
27.05.2012 в 00:55

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
380509814378, опишите подробно, что и как вы делаете.
URL
27.05.2012 в 23:14

380509814378
полюбите жизнь и она обязательно полюбит вас
Тайя, которая душит романтиков, я вставляла в пост вашу ссылку , добавляла адрес картинки из БИ и печатала текст
выходила ссылка , картинка открывается по ссылке и поэтому не пойму , что же я делаю не так ?
объясните, пожалуйста )))
babozka.diary.ru/p176949381.htm - посмотрите как получается
URL
29.05.2012 в 14:09

380509814378
полюбите жизнь и она обязательно полюбит вас
я нечаянно удалила прошлую запись
вот другая babozka.diary.ru/p177008613.htm все равно не получается )
URL
01.06.2012 в 21:16

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
380509814378, сорри, ток добралась)

Итак, берете один из этих двух кодов: (какой вам больше нравится))) )

<img src="адрес картинки" style="float: left; margin-right: 10px;">
или
<img src="адрес картинки" align="left" hspace="10">

В "адрес картинки" вставляете ссылку. Самое главное: в Html-вкладке, не в визуальном редакторе!

Результат раз




Результат два


URL
02.06.2012 в 20:07

380509814378
полюбите жизнь и она обязательно полюбит вас
Тайя, которая душит романтиков, спасибо за очень подробное описание
у меня получилось babozka.diary.ru/p177168427.htm#600070182 :friend:
можно еще спросить - я не знаю , почему но у меня в дневнике слетают ссылки , не пойму никак с чем это связано
записи есть , а ссылки слетают
URL
04.06.2012 в 19:26

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
380509814378, в смысле слетают?
URL
08.06.2012 в 22:01

380509814378
полюбите жизнь и она обязательно полюбит вас
Тайя, которая душит романтиков, я , наверное не правильно описала - ссылки исчезают со страницы , а весь текст и картинки остаются
возможно это связано с скоростью моего интернета )))
но не всегда - сейчас пока все в порядке )))
URL
13.07.2012 в 16:25

~Lydia_Rise~
«Мы не подходим друг другу. Я скорпион, а ты идиот!»
Скажите, возможно ли вместо текста тоже картинку вписать?
Мне нужно, чтобы справа - одна большая, а слева - четыре маленькие.
Помогите.
URL
13.07.2012 в 22:16

Zelmedv
~Elis Keller~,










URL
13.07.2012 в 22:28

~Lydia_Rise~
«Мы не подходим друг другу. Я скорпион, а ты идиот!»
Спасибо большое)))
URL
09.08.2012 в 22:16

Snapeart
SNAPE-ART DAILY
Тайя, которая душит романтиков, спасибо за Ваши записи о картинках, очень помогает!
Я обычно вот этой записью пользуюсь для вставки превью: diary-tips.diary.ru/p100964036.htm, только размер обычно делаю больше 150. Но я-то публикую картинки из сети, а вот тут john-n-mary.diary.ru/p179504626.htm возникла сложность при вставке картинки с превью с компьютера, а не из сети. Когда художник пытается увеличить превью, вставляя width="ХХХpx", изображение становится туманным. Когда с превью постишь картинку из сети, такого не происходит, качество изображения прекрасное. Есть возможность как-то справиться с этой проблемой?
URL
10.08.2012 в 23:38

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
mybianca, пожалуйста)))))))

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

Вот картинка static.diary.ru/userdir/1/4/9/6/1496305/7570155..."
А вот превьюшка static.diary.ru/userdir/1/4/9/6/1496305/thumb/7...", она стандартного размера. Чтобы сделать больше, берем исходную ссылку, а проще вытираем thumb/ и добавляем нужный размер.

Вот исходная превью





А вот увеличиваем:





Надеюсь, не путано объяснила)

А, вот еще. Дайрики автоматически берут за 100 пикселей длинную строну. Поэтому, местами удобнее менять не ширину (width), а высоту (height). Превью высотой 200px.




URL
12.08.2012 в 23:48

Snapeart
SNAPE-ART DAILY
Тайя, которая душит романтиков, огромное спасибо!!! :red:
URL
07.10.2012 в 23:22

.Х.
Один учитель у меня - моя принцесса Лень! (с)
Извините, что лезу с глупым вопросом в старую запись, но я не знаю, где бы это спросить, не в техподдержку же с таким бредом лезть, а тут вроде объясняют про картинки...

Решила я, воспользовавшись где-то тут подсмотренным кодом, приукрасить эпиграф, расположить одну картинку поверх другой (да, проще просто совсем совместить их в одну в графическом редакторе, но я всё равно хочу сделать таким образом кнопки, так что для тренировки, чтоб разобраться). Каюсь в кодах не разбираюсь, от того и закосячилось всё.
картинка

Проблема в том, что картинка должна быть по центру, а она оказалась смещена. И чтоб она была совсем по центру, код пришлось сделать таким

результат
Те самые 139 подобрала, расположив под смещённой картиникой нормальную, и проверяя через предпросмотр, как выглядит. Да, я дундук х)

Вопрос - с чем связано такое смещение и как оно вправляемо?

Заранее спасибо, если кто ответит ))
URL
08.10.2012 в 21:10

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Дани Адская Лиса, есть святое правило - "Работает - НЕ ТРОГАЙ!" :-D Получилось - и слава богу :-D

Смещается наверное из-за отступов, фиг знает... По центру они совместятся, если каждую по отдельности картинку отцентровать, а дальше отступы нужно подбирать.

У меня вот так вышло: каждая картинка отдельно центруется, а поднимается кодом. -365px 0 400px - верх — лево-право — низ (при трехзначной записи второе число задает одновременно лево и право). Зачем 400 внизу - сама не понимаю, но без них почему-то не поднимается, тут я не сильна :nope:




URL
08.10.2012 в 23:46

.Х.
Один учитель у меня - моя принцесса Лень! (с)
"Работает - НЕ ТРОГАЙ!" :-D Получилось - и слава богу :-D
Да, я обычно этим и руководствуюсь, просто мало ли, я сижу и радуюсь, а уого-нибудь оно отображается по-страшному, я ж не могу проверить о_о

Большое спасибо за помощь! Я наверно воспользуюсь вашим кодом (тлько яне очень понимаю, как одно число может задавать и лево и право, но раз там ноль - то и ладно XD), хотя пока лучше и правда не буду трогать.
URL
24.11.2012 в 21:03

Snapeart
SNAPE-ART DAILY
Тайя, которая душит романтиков, а можно еще один, наверное, совсем глупый вопрос, но вдруг и это знаете, а?
Я, когда рисунки вставляю, обычно при помощи "width="..."" подгоняю их размер под размер экрана (своего, надеюсь, у большинства моих ПЧ такой же, ну и добавляю прямые ссылки на полный размер). Раньше делала это вручную, на глаз, - ставила разную эту самую ширину и прикидывала на "предпросмотре", потом корректировала. Потом (не помню, появилась эта фича в браузерах, или я это только для себя открыла) - стала ориентироваться на оптимизацию размера при просмотре по прямой ссылке, то есть открывать "Информацию об изображении" и копировать в свою запись в дайри ту ширину, которая там указана, и все было и просто, и идеально. Несколько дней назад, внезапно, делаю так и вижу, что в моей записи картинка в экран не влезает, отхватывается достаточно здоровый кусок. Иду обратно к оптимизированной картинке по прямой ссылке - все прекрасно. "Информация об изображении" показывает одинаковый размер у обеих. Одна влезает в экран, другая нет, ну и просто визуально видно, что они разные по размеру. Чтоб была "по экрану" в дайри, нужно сбросить в "ширине" писелей 30 от оптимизированной по пр. ссылке. (( Неудобно, раньше так душевно было. ( С чего так может получаться?..
URL
25.11.2012 в 14:02

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
mybianca, трудно без примера понять, может дело в дизайне, из-за него не влезает? Но лучше бы пример.
URL
25.11.2012 в 21:10

Snapeart
SNAPE-ART DAILY
Тайя, которая душит романтиков, вот, например: mybianca.diary.ru/p182667935.htm
Делаю либо превью, как тут, и полный размер по клику, либо чуть уменьшаю картинку, чтоб вписывалась в экран (до того размера, что здесь превью). Если возьмем прямую ссылку на картинку: th09.deviantart.net/fs70/PRE/f/2010/283/a/0/sna... , откроем ее в отдельной вкладке, и включим "Информацию об изображении", появится: "984px × 812px (в масштабе 922px × 761px)" - где первые две цифры - это полный размер, а те, которые "в масштабе", соответственно, размер оптимиризованного по (моему) экрану изображения. Раньше, для того, чтобы создать смотрибельный размер картинки (вот такого большого превью, как здесь, или самостоятельного изображения без превью) у себя в дайри-записи, я списывала эти цифры - т.е. писала "width=922", и тогда размер изображения идеально вписывался в экран, как и в отдельной вкладке. Сейчас у этого изображения пришлось сделать параметры "850px × 701px", чтоб оно ВИЗУАЛЬНО вмещалось в экран. Т.е., то, что имеет одинаковый объективный размер в пикселях, по-разному выглядит в отд. вкладке и в дайри-записи. А раньше было один в один. Дизайн не меняла. Меняла винду, но это тут имеет какое-то значение? :hmm:

Вот тут еще обсуждаем важный вопрос о вставке картинок: mybianca.diary.ru/p182889186.htm — останется ли хоть каким образом вставленная картинка, если пропадет исходник. Простите, я наглею. :beg:
URL
25.11.2012 в 22:07

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Т.е. раньше вы вставляли картинку большего размера и она влезала в экран? Даже не знаю... :nope:

Останется ли хоть каким образом вставленная картинка, если пропадет исходник - однозначно нет, ведь это ссылка оттуда, где размещена картинка, удалите исходник - останется только квадратик с вопросиком.
URL
25.11.2012 в 23:08

Snapeart
SNAPE-ART DAILY
Тайя, которая душит романтиков, ага! Удивительная история...

Ой мама, это ужасно. (( Интернет такая среда нестабильная, то и дело что-то падает, сносится и т.д. Как же спасаться-то... ((
URL