Картинка с обтекающим её текстом

вторник, 17 июня 2008

22:40

Картинка с обтекающим её текстом

все записи пользователя в сообществе Baka-zoid

Это все всего лишь иллюзия

справа <div align="center" style="float:right"><img src="Картинка"><font size="0.8em">«картинка справа»</font></div>
слева <div align="center" style="float:left"><img src="Картинка"><font size="0.8em">«картинка слева»</font></div>

Чтобы обтекающий текст не лепился вплотную к картине, нужно добавить атрибут hspace, например:
<img src="http://адрес картинки" align="left" hspace="20">
где вместо 20 - можно подставить любое значение

«картинка справа»

Авата́р, авата́ра, а́ва, также юзерпик (от англ. user picture — «картинка пользователя») — небольшое статичное или анимированное изображение (часто ограниченное размером в некоторое число пикселей), обычно не являющееся истинной фотографией пользователя. Отображается в профиле зарегистрированного пользователя форума или сайта. Может быть как фотографией, так и некой картинкой, которая отражает суть пользователя и помогает максимально правильно создать первое впечатление у собеседника.

Изготовление

Нет ничего сложного в том, что бы сделать аватар-картинку. Достаточно уменьшить до необходимых размеров понравившееся вам изображение, свою фотографию или рисунок.

«картинка слева»

С другой стороны получить качественную, красивую, запоминающуюся аватар-картинку достаточно сложно, поэтому существуют группы людей, изготовляющих аватары для других на заказ, существуют конкурсы на лучшие аватары и так далее. Некоторые типы аккаунтов ЖЖ позволяют пользователю иметь до 100 аватаров, поэтому спрос всегда растёт.

В связи с развитием всемирной сети, появления у пользователей более качественного доступа к Интернету, существует тенденция к увеличению размеров аватаров, что многими оценивается негативно

Так же для написания формул и прочей лабуды есть 2 тега:
повышающий <sup>текст</sup>
понижающий <sub>текст</sub>
так же их можно вкладывать друг в друга <sup>текст<sup>текст2<sup>текст3</sup></sup></sup>

повышающий: pen²
понижающий: Y₁₁Y₁₂+Y₂₁Y₂₂=Y_{В_{л_{о_{ж_{е_{н_{н_о}}}}}}}

Так же есть тег аббревиатуры <abbr title="HyperText Markup Language">ХТМЛ</abbr>
результат виден при наведении и удерживании курсора на тексе (должно появиться рашифрованное значение)

ХТМЛ

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

URL

Вспомнилось под хорошее настроение... Англия.. XIX в... Португалия янкам проиграла, так ведь еще всю игру проигры... Их травили дождем. Жгли солнцем. Забивали градом. Но он...

В офисе все дружно перешли на здоровый образ жизни. Завар... Сегодня ночью смотрел концерт в честь 50-летнего правлени... китайский морковный напиток приятнее немецкого, хотя госп...

Комментарии

17.06.2008 в 23:33

Таши

Всему своё тайми-вайми (с)

С послледним не поняла... можно еще разобьяснить, как это работает? То есть, что именно я добьюсь таким тэгом?

URL

17.06.2008 в 23:52

Baka-zoid

Это все всего лишь иллюзия

Девочка, живущая в сети ну, это просто %)
например, у тебя есть завод под названием Усть-Каменский Завод Стеклянных Колбочек, но всю эту лабуду всё время писать напрягает... и ты берёшь аббревиатуру т.е. УКЗСК
УКЗСК - смотриться компактно и стильно %D но теперь непонятно что это обозначает...
применяешь тег abbr и получаешь: УКЗСК
Далее, кому надо узнать как ЭТО расшифровываеться, тот наводит курсор мыши на аббревиатуру и через пару секунд выскакивает описание %D (ну и/или в статусной строке отображается, зависит от браузера)

URL

18.06.2008 в 16:50

Таши

Всему своё тайми-вайми (с)

Но в данном конкретном примере лично у меня ничего нигде не высвечивается((

URL

18.06.2008 в 17:38

Baka-zoid

Это все всего лишь иллюзия

вот пример в опере, а что у вас за брузер? о_О

URL

18.06.2008 в 18:12

Таши

Всему своё тайми-вайми (с)

Я сейчас в ИЕ 6 нахожусь.

URL

18.06.2008 в 18:55

Baka-zoid

Это все всего лишь иллюзия

ну даже не знаю, что я вам могу посоветовать, переезжать в другой браузер разве что...

URL

18.06.2008 в 19:08

Таши

Всему своё тайми-вайми (с)

URL

22.06.2008 в 05:16

=[Элли]=

хм... однако. Если использовать предложенный способо, то вставка "превью в MORE", закачанного в дайри соответственно, не работает. Тег MORE не обрабатсявается и выводится полный размер картинки.

URL

22.06.2008 в 05:53

=[Элли]=

URL

22.06.2008 в 11:39

Baka-zoid

Это все всего лишь иллюзия

ммммм, я вас не очень понял, можно поподробнее?

URL

25.06.2008 в 17:06

=[Элли]=

Однако код не работает. Картинка, по идее, должна выводиться как превью с правой стороны, так?
<div align="center" style="float:right">[MORE=<img src='http://static.diary.ru/userdir/7/7/6/6/776645/thumb/31297632.jpg'>]<img src='http://static.diary.ru/userdir/7/7/6/6/776645/31297632.jpg' border='0'>[/MORE]</div>

URL

25.06.2008 в 17:08

=[Элли]=

эээээ... сработало. о_0 странно. До этого не получалось.
Тогда вопрос снят =))

URL

30.07.2008 в 23:20

keann

everyday could be the last.

а можно, пожалуйста, поподробнее о работе тега "div"? =)

URL

30.07.2008 в 23:24

Baka-zoid

Это все всего лишь иллюзия

keann зачитайтеся %)

URL

30.07.2008 в 23:43

keann

everyday could be the last.

ого.. бллагодарю)

URL

01.09.2008 в 03:57

Чайная ложечка

пятнадцатый камень

Чтобы обтекающий текст не лепился вплотную к картине, нужно добавить атрибут hspace, вот так примерно:
<img src="адрес картинки" align="left" hspace="20">

URL

02.09.2008 в 00:58

дядяГСС

Только война. Только хардкор. Только мясо, милая.

а избавиться от энтих надписей "картинка справа или слева" реально?

URL

02.09.2008 в 02:37

Baka-zoid

Это все всего лишь иллюзия

дядькаГСС реально, достаточно просто стереть...

URL

02.09.2008 в 10:31

дядяГСС

Только война. Только хардкор. Только мясо, милая.

ага, только вместо пустого пространства получается херня на пол страницы

URL

05.09.2008 в 21:58

=[Элли]=

дядькаГСС, а вы количество пикселей в hspace измените на нужное Вам и все получится =)
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

URL

08.09.2008 в 23:49

дядяГСС

Только война. Только хардкор. Только мясо, милая.

-=[Элли]=- а куды энто hspace вставлять? профан я тут полный

URL

09.09.2008 в 00:54

Baka-zoid

Это все всего лишь иллюзия

дядькаГСС об этом писала Чайная ложечка выше и пример привела..

URL

06.04.2010 в 18:12

Techno_Jaro

Подскажите пожалуйста, давно мучаюсь, если ли относительно несложный способ сделать следующее (на картинке ниже). Текст и картинка. Картинка отбивается влево (или вправо). Часть текста должно обтекать картинку, а дальнейший текст, начиная с определенного абзаца должен идти строго под картинкой. Независимо от разрешения экрана и размера окна браузера, то есть Enter'ы проблемы не решают. Не подошел и тэг < br >. Спасибо!

URL

07.04.2010 в 13:13

Baka-zoid

Это все всего лишь иллюзия

Techno_Jaro в div обернуть всё это дело

URL

08.04.2010 в 02:34

Techno_Jaro

Baka-zoid, а div надо с какими-то особенными параметрами применять? Пробовал просто:

<div>...</div>

. Но по крайней мере в рамках Diary не сработало.

URL

08.04.2010 в 11:49

Baka-zoid

Это все всего лишь иллюзия

<div><img src='http:///img.jpg' style="float:left">Текст справа</div>
<div style="clear: both;">Текст с новой строки</div>

Так

URL

08.04.2010 в 23:43

Techno_Jaro

Baka-zoid

Спасибо! Заработало!!!

URL

10.01.2011 в 20:42

fleyta

Мерлин, как интересно!

все ясно, кроме одного момента:

<div><img src='http:///img.jpg' style="float:left">Текст справа</div>
<div style="clear: both;">Текст с новой строки</div>

что означает style="clear: both;" и изменяется ли это?

URL

10.01.2011 в 21:44

Baka-zoid

Это все всего лишь иллюзия

clear:both "следит" что бы слева и справа от элемента не было других элементов. В принципе можно и убрать/изменить

URL

18.06.2011 в 21:34

Сделала все, как вы, Baka-zoid написали, а получилось вот что. Как убрать это слово?

URL

1 2 Следующая → Последняя


Запомнить

Картинка с обтекающим её текстом

@Секреты и хитрости