prowebber.cc - Тут есть все для настоящих вебмастеров

Провеббер » DataLife Engine » DLE хаки » Обтекание картинки текстом

Набор в команду! Ведется набор в команду, для наполнения сайта новым, интересным контентом. Если у тебя есть предложения, свободное время, ты обладаешь интересным контентом, и хочешь поделиться с другими?

Обращайся к нам в ЛС группы Вконтакте.

Обтекание картинки текстом

Автор: McWizard 2011-3-10 DataLife Engine / DLE хаки

Данный материал предоставлен сайтом ProWebber.cc исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.

Скачать бесплатно Обтекание картинки текстом.

Здравствуйте, уважаемые пользователи PW, я думаю всех давно мучает вопрос, как же сделать обтекание картинки текстом., как на скрине к новости? Сейчас я всё подробно изложу. Не нужно никаких модулей, всё делается очень просто и легко.

Внимание! У Вас нет прав для просмотра скрытого текста.

Надеюсь всё понятно, если что отписываем в комментах,

Дополнительные ссылки на скачивание ТОЛЬКО для зарегистрированных

Просмотры: 7 113 :: Комментарии (15) :: :: Нужна помощь? Задайте вопрос на форуме ::

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1McWizard

10 марта 2011 20:57
Регистрация: 15.01.2011

Был(а) онлайн: 10.07.2014
Комментариев: 125

Сразу хочу сказать, что это не хак, не модуль, а просто небольшая помощь новичкам, просто не всегда дополнительные поля удобны при загрузки картинок на сайт

#2unnamedman

10 марта 2011 22:39
Регистрация: 9.02.2010

Был(а) онлайн: 17.08.2017
Комментариев: 84

Способ канешн...
Деже не хак, а скорее особенность верстки.
Есть минусы. Попробуйте добавить спойлер или попробуйте быстрое редактирование новости. Я о том что все картинки будут того размера который вы укажете, без исключения biggrin

#3mitrushi

10 марта 2011 22:50
Регистрация: 4.01.2010

Был(а) онлайн: 3.11.2016
Комментариев: 160

В краткой новости сделал так:

.test img:first-child {
display: block;
float: left;
width: 164px; height: 164px;
margin: 0 33px 5px 0;
height: auto;
margin-bottom: 10px;
border: 0;
background: #dbdbdb;
padding: 8px;
border-right: 1px solid #ababab;
border-bottom: 1px solid #ababab;
-moz-box-shadow:1px 3px 7px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow:1px 3px 7px 1px rgba(0, 0, 0, 0.15);
}

Получилось очень красиво.. Теперь картинки не только в рамке, но и слева.. независимо от того, в каком расположении они добавлялись. Но, в полной новости такие стили не подходят.. у меня рвет шаблон drink

#4McWizard

10 марта 2011 23:57
Регистрация: 15.01.2011

Был(а) онлайн: 10.07.2014
Комментариев: 125

mitrushi,float: left; это не обязательно, если в краткой новости захотите сделать картинку по центру, зачем надо это писать? Тут уже стандартные настройки движка-вывод вправо, влево, по центру.

unnamedman, да, безусловно в полной новости такие параметры ставить нельзя, шаблон действительно рвет, вы правильно сказали, особенности верстки) хотя для спойлера в engige.css можно поставить другие настройки картинок, предположим.

#5unnamedman

11 марта 2011 12:09
Регистрация: 9.02.2010

Был(а) онлайн: 17.08.2017
Комментариев: 84

Цитата: McWizard

для спойлера в engige.css можно поставить другие настройки картинок, предположим.

Я имел ввиду короткую новость, ну и полная пусть тоже имеется ввиду.
И как это повлияет на тот факт что будет безобразие при быстром редактировании новости? biggrin

#6fantom88

13 марта 2011 11:03
Регистрация: 21.11.2010

Был(а) онлайн: 31.01.2015
Комментариев: 20

Цитата: unnamedman

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

А что кто-то отменил max-width, max-height

#7Korsar

15 апреля 2011 00:12
Регистрация: 25.09.2009

Был(а) онлайн: 28.05.2012
Комментариев: 10

как насчет просто css стиля для картинки?
аля .style img {padding-right... padding-bottom и тд..}

#8Zielony

17 апреля 2011 15:41
Регистрация: 13.02.2011

Был(а) онлайн: 26.06.2012
Комментариев: 5

хорошая вещь спасибо

--------------------

DataLife Engine PL
4dle.net.pl

#9SalTok

17 апреля 2011 16:54
Регистрация: 13.09.2010

Был(а) онлайн: 19.05.2012
Комментариев: 22

как исправить в быстрый редоктировани новост......

#10reeserv

30 апреля 2011 11:17
Регистрация: 7.03.2010

Был(а) онлайн: 4.10.2012
Комментариев: 4

Помогите я бот в какой файл надо прописывать скажите??

#11powerxtreme

25 мая 2011 07:09
Регистрация: 17.05.2011

Был(а) онлайн: 3.06.2012
Комментариев: 50

полезная инфа, попробую на своем СДЛ

#12Gooman

10 июля 2011 20:43
Регистрация: 7.04.2010

Был(а) онлайн: 26.01.2012
Комментариев: 4

Спасибо. Я уж думал забыть про эти отступы, а тут так помогли :)

#13reset86

11 августа 2011 01:10
Регистрация: 23.10.2010

Был(а) онлайн: 29.06.2020
Комментариев: 105

Я от вас фигею товарищи, такое чувство что здесь не школота, а детсад собрался.

--------------------

#NVJOB

#147up

18 декабря 2011 17:57
Регистрация: 16.04.2011

Был(а) онлайн: 20.12.2011
Комментариев: 3

mitrushi,

.test img :first-child {
Подчеркнутое лучше убрать иначе IE сумма сходит а в целом почитав всех вас и сделав работу над ошибками получил:

.test img ~~:first-child~~ - (для нормального отображения в иешке убираем)
{
display: block;
float: left;
margin: 0 33px 5px 0;
max-width: 164px;
max-height: 164px; (И добавляев max- чтобы в быстром редактировании картинки не брали задаваемое значение (быстрое редактирование стало более нормальным но все равно нето))
height: auto;
margin-bottom: 10px;
border: 0;
background: #dbdbdb;
padding: 8px;
border-right: 1px solid #ababab;
border-bottom: 1px solid #ababab;
-moz-box-shadow:1px 3px 7px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow:1px 3px 7px 1px rgba(0, 0, 0, 0.15);
}
height: auto;
margin:0 10px 10px 0;
-moz-box-shadow:1px 3px 7px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow:1px 3px 7px 1px rgba(0, 0, 0, 0.15);
}

Итак чтобы Быстрое редактирование отображалось корректно ему мешают следующие элементы:

1. float: left; (Задать в движке можно)
2. border (можно и без бардюра обойтись)
3. -moz-box-shadow:1px 3px 7px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow:1px 3px 7px 1px rgba(0, 0, 0, 0.15); (и убрать эффект тени)