воскресенье, 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
Комментарии
27.02.2011 в 17:39

Sertap
Изо всех даров мира остается только доброе имя, и несчастен тот, кто не оставит даже этого
такие картинки будут отображаться без учета прописанного кода в ленте тех, кто включил у себя опцию "игнорировать авторское оформление" (как у меня, например)

могу предложить еще один код, который этот глюк не выдает (для картинки справа и картинки слева воотстветственно):


как это выглядит

у этого способа, впрочем, свой недостаток — не срабатывают отступы текста от картинки с помощью margin
но можно использовать как вариант.
URL
27.02.2011 в 17:44

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Sertap, о как, полезное уточнение. А при использовании align'a можно также добавлять margin:

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

Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
URL
27.02.2011 в 17:46

Ролли Фостер
У ветра тоже была своя история.


Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст тексттекст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
URL
27.02.2011 в 17:49

Sertap
Изо всех даров мира остается только доброе имя, и несчастен тот, кто не оставит даже этого
Ролли Фостер
Души романтиков
ухты! спасибо за варианты!
URL
27.02.2011 в 17:58

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Ролли Фостер, угу, так тоже можно :) Вариантов - завались, аж не знаешь какой выбрать)
URL
27.02.2011 в 18:06

Ролли Фостер
У ветра тоже была своя история.
Души романтиков Я просто не очень люблю использовать style для элементарных операций типа выравнивания или отступа :о) к тому же так получается, что картинка как бы отступает не только от текста, но и от границы документа. Смотрится, на мой взгляд, более интересно, чем простой отступ текста)
URL
27.02.2011 в 18:40

Uk@R
Quincy reseARCHER
Имхо, у Ролли Фостер самый рациональный вариант. Основы хтмл же =)
URL
27.02.2011 в 19:56

Puding
Но что бежишь под дождем, что стоишь под дождем – намокаешь одинаково (с)
Души романтиков Ролли Фостер О, это очень интересная и нужная вещь! Спасибо! :hi2:
Один способ я знала, а вот с align - нет))

У меня есть вопрос: можно сделать так, чтобы текст обтекал картинку, а под картинкой была подпись мелкими(!) буквами? Я в кодах не разбираюсь, пользуюсь интуитивно, чем найду))) а с этой штукой как-то не выходит, то текст не хочет обтекать, то буквы остаются обычного размера...
URL
27.02.2011 в 20:01

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Puding, а ты бери текст в теги <small></small>
Будет мелкий.
URL
27.02.2011 в 20:11

Ролли Фостер
У ветра тоже была своя история.
Puding, как один из возможных вариантов:



мелкий текст мелкий текст мелкий текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст


Если обозначить border="0", то границы видно не будет.
URL
27.02.2011 в 22:49

Puding
Но что бежишь под дождем, что стоишь под дождем – намокаешь одинаково (с)
Ролли Фостер Спасибо! :hi2:
Да, для чайника это не так-то просто...)) А вот был ещё какой-то такой код, где указывалась ширина картинки в пикселах, чтобы подпись под ней не выезжала за её края. Вы не знаете, как это сделать?
URL
27.02.2011 в 22:55

Ролли Фостер
У ветра тоже была своя история.
Puding Это в свойства таблицы нужно прописать, чтобы она по ширине была определенного размера. Что то типа
, где вместо xxx - нужные значения. точнее ищите в интернетах, "работа с таблицами в HTML" - там все это есть.
URL
27.02.2011 в 23:14

Puding
Но что бежишь под дождем, что стоишь под дождем – намокаешь одинаково (с)
Ролли Фостер Угу, ясно, спасибо!)))
URL
02.03.2011 в 06:43

- апрельская Кошка -
Спасибо большое! Очень полезная запись!!!! (сколько я её искала!!!)
URL
06.03.2011 в 11:48

Дочь Кота
Театр в мыслях. Бардель в подсознании...
огромное спасибо за подсказку ^^
URL
08.03.2011 в 19:32

holy shell
le temps s'en va dans les printemps que tu perds a gagner d'autres guerres au lieu d'être à moi
Как-нибудь можно настроить размер превью на дайри? Если нет, тогда подскажите, как сделать так, чтобы слева было среднего размера превью, а справа текст. Спасибо.
URL
09.03.2011 в 12:43

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
glacial white
<a href="адрес картинки"><img src="адрес картинки" width=XX style="float: left; margin-right: 10px;">, размер превью выбирайте сами.
URL
15.03.2011 в 16:26

Ozariya
Я - женщина, а значит я на кухне, ой, простите, актриса.
а возможно ли сделать картинку под текстом, но не превью, а саму картинку, к тому же полупрозрачную и справа?
URL
16.03.2011 в 18:57

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Ozariya, так под или справа? Если под, то обычно размещается картинка, после текста, если справа, то любым из предложенных здесь способов.

Прозрачность делается так:

Прозрачность 0.2, 0.5 и 0.7.



Соответственно, степень прозрачность от 0 до 1. Сердцем чую, что можно и попроще написать, но не знаю как))

А! Про IE забыла. Чтобы и в IE видно было, надо так:

URL
16.03.2011 в 19:30

Ozariya
Я - женщина, а значит я на кухне, ой, простите, актриса.
Души романтиков , спасибо!!!
а справа - имеется ввиду, что бы как тут:

URL
16.03.2011 в 19:35

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

Тут текст ------------------------- --------------------------------- -------------------------------- -------------------------------- ---------------------------------- ----------------------------------- ---------------------------- ----------------------------- ---------------------------------------- --------------------------------- ---------------------------- ---------------------- ----------------


URL
16.03.2011 в 19:39

Ozariya
Я - женщина, а значит я на кухне, ой, простите, актриса.
а текст на картинку будет попадать?
URL
16.03.2011 в 19:40

Ozariya
Я - женщина, а значит я на кухне, ой, простите, актриса.
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
URL
16.03.2011 в 19:40

Ozariya
Я - женщина, а значит я на кухне, ой, простите, актриса.
не попадает
URL
16.03.2011 в 19:43

Тайя.
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Ozariya, ааа, картинка под текстом, вы имеете в виду, фоном чтобы... Можно, но геморройно, сходу сейчас не соображу. Либо таблицами, либо через div..
URL
16.03.2011 в 19:47

Ozariya
Я - женщина, а значит я на кухне, ой, простите, актриса.
Души романтиков , я пыталась через див - не получилось, а таблицей не чётко будет...
спасибо за мозговую активность! как прийдёт что-то в голову - напиши...
URL
16.03.2011 в 19:50

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

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




Ссылка должна быть короткая, из вашей БИ. Текст тоже будет полупрозрачным. А так как вы хотите, мне кажется, таблицей только можно сделать...
URL
16.03.2011 в 20:04

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

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




Правда слева :crztuk:
URL