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]

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

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

Комментарии
2011-02-27 в 17:39 

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

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


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

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

2011-02-27 в 17:44 

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

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

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

2011-02-27 в 17:46 

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


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

2011-02-27 в 17:49 

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

2011-02-27 в 17:58 

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

2011-02-27 в 18:06 

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

2011-02-27 в 18:40 

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

2011-02-27 в 19:56 

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

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

2011-02-27 в 20:01 

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

2011-02-27 в 20:11 

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



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


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

2011-02-27 в 20:17 

quirischa
администратор
(с капибарой на аватарке)
2011-02-27 в 22:49 

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

2011-02-27 в 22:55 

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

2011-02-27 в 23:14 

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

2011-03-02 в 06:43 

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

2011-03-06 в 11:48 

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

2011-03-08 в 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
Как-нибудь можно настроить размер превью на дайри? Если нет, тогда подскажите, как сделать так, чтобы слева было среднего размера превью, а справа текст. Спасибо.

2011-03-09 в 12:43 

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

2011-03-15 в 16:26 

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

2011-03-16 в 18:57 

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

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

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



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

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

2011-03-16 в 19:30 

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

2011-03-16 в 19:35 

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

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


2011-03-16 в 19:39 

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

2011-03-16 в 19:40 

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

2011-03-16 в 19:40 

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

2011-03-16 в 19:43 

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

2011-03-16 в 19:47 

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

2011-03-16 в 19:50 

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

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




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

2011-03-16 в 20:04 

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

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




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

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

@Дневники: секреты, тонкости и хитрости

главная